四、加载罗盘与经纬度显示

vandh

已于 2022-12-27 13:46:42 修改

阅读量408

点赞数

分类专栏：数字孪生开发与实战文章标签： vue.js javascript 前端

于 2022-12-27 13:42:31 首次发布

本文链接：https://blog.csdn.net/vandh/article/details/128454720

版权

数字孪生开发与实战专栏收录该内容

12 篇文章 4 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

1、加载罗盘
安装以下开源插件，注意必须指定版本号，最新版本出不来。安装罗盘的好处是，有些鼠标不方便调整俯仰角，用罗盘插件就很方便。所有的Cesiumjs sdk 不包括罗盘，导航仪（放大/缩小）和距离刻度。罗盘可以重置航向为指向北部，重置轨道，并将视图重置为默认边界。

npm install cesium-navigation-es6@1.1.7

然后修改src/App.vue的scipt部分代码：

import CesiumNavigation from 'cesium-navigation-es6'
onMounted(() => {
  ......
  setCompass(viewer)
});

const setCompass = (viewer) => {
  const options = {}
  // 用于在使用重置导航重置地图视图时设置默认视图控制
  options.defaultResetView = new Cesium.Rectangle.fromDegrees(112.97,27.78, 112.98,27.77)
  // 用于启用或禁用罗盘
  options.enableCompass = true
  // 用于启用或禁用缩放控件
  options.enableZoomControls = true
  // 用于启用或禁用距离图例
  options.enableDistanceLegend = true
  // 用于启用或禁用指南针外环
  options.enableCompassOuterRing = true
  CesiumNavigation(viewer, options)
}

引入罗盘后的界面显示如下图：