cesium启用指南罗盘和比例尺

上一节我们学习了:cesium 移动鼠标获取经纬度今天我们要学习的是cesium启用指南罗盘和比例尺。

这里的指南罗盘和比例尺我们使用到了插件cesium-navigation-es6

效果

指南罗盘

比例尺

配置项

import CesiumNavigaion from "cesium-navigation-es6";

  // 设置导航罗盘的配置
  var options = {
    // 启用罗盘
    enableCompass: true,
    // 是否启用缩放
    enableZoomControls: true,
    // 是否启用指南针外环
    enableCompassOuterRing: true,
    // 是否启用距离的图例
    enableDistanceLegend: true,
  };
  // 初始化导航罗盘
  let navigation = new CesiumNavigaion(viewer, options);

cesium-navigation-es6介绍

cesium-navigation-es6 是一个第三方插件，用于为 Cesium.js 提供额外的导航功能，包括缩放、平移、方位等控制。该插件主要用于改进和简化在 Cesium 地球或 3D 场景中的导航体验。

基础特性：

支持 2D、3D 和 Columbus 视图模式。
提供缩放滑块。
提供方向（北、南、东、西）和旋转控制。
提供用于定位和复位视图的按钮。

使用方法：

安装

首先，你需要安装 cesium-navigation-es6 包。你可以使用 npm 进行安装：
```
npm install cesium-navigation-es6
```
引入到项目

在你的代码中，你需要引入 cesium-navigation-es6。
```
import 'cesium-navigation-es6';
```

初始化

通常在初始化 Cesium Viewer 后，你可以初始化 cesium-navigation 插件。

const viewer = new Cesium.Viewer('cesiumContainer');
viewer.extend(Cesium.viewerCesiumNavigationMixin);

或者，你也可以通过传递选项对象来进行更多自定义设置。

viewer.extend(Cesium.viewerCesiumNavigationMixin, {
  // 自定义选项
});

cesium-navigation-es6 插件允许你通过传递一个配置对象来定制其行为和外观。下面是一些常用的配置项及其描述：

viewer.extend(Cesium.viewerCesiumNavigationMixin, {
  // 是否在导航工具栏中显示指南针
  enableCompass: true, // 默认为 true
  // 是否显示缩放控制器
  enableZoomControls: true, // 默认为 true
  // 是否显示查看模式控制器，例如 2D、3D、Columbus 视图模式
  enableDistanceLegend: true, // 默认为 true
  // 是否显示“我的位置”按钮，该按钮将视图重置到用户当前位置
  enableMyLocation: true, // 默认为 true
  // 是否显示重置视图到默认视图的按钮
  enableLook: true, // 默认为 true
  // 是否显示方位角度和俯仰角度
  enableRotation: true, // 默认为 true

  // 自定义指南针外观和行为
  compass: {
    // 指南针的大小
    size: 115 // 默认为 115
  },

  // 自定义缩放控制器的外观和行为
  zoomControls: {
    // 缩放按钮大小
    buttonSize: 30, // 默认为 30
    // 缩放按钮之间的距离
    buttonPadding: 7 // 默认为 7
  },

  // 自定义距离图例的外观和行为
  distanceLegend: {
    // 距离图例显示的位置，单位为像素
    bottom: 5, // 默认为 5
    // 距离图例离左侧的距离，单位为像素
    left: 5 // 默认为 5
  },

  // 其他自定义选项...
});

使用

完成初始化后，导航控件应该就自动出现在 Cesium Viewer 的界面上，你可以通过它进行缩放、平移和旋转等操作。

实例演示地址

cesium启用指南罗盘和比例尺

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-cesium启用指南罗盘和比例尺-实践的学习笔记

实例代码下载

代码运行环境：vue3 + vite + js nodejs 14