vue2.X cesium 1.89.0 使用 cesium-navigation-es6 详细教程

ant degin vue pro 使用原生 cesium ，并且使用 cesium-navigation-es6 插件。

教程如下：

1.使用原生 cesium 教程如下

 直接查看文章vue 使用原生cesium 1.89.0

2.安装插件cesium-navigation-es6(当前版本3.0.5)

yarn add cesium-navigation-es6

3.找到插件目录下所有js文件,如下需更改地方

注意: 需要在以下文件中头部 import{......}from 'cesium' 更改为 import{......}from 'cesium/Cesium'

(1) dist/core下（loadView.js 、Utils.js）

(2)dist/viewModels下(DistanceLegendViewModel.js 、NavigationViewModel.js、ResetViewNavigationControl.js、UserInterfaceControl.js、ZoomNavigationControl.js)

(3)dist下(CesiumNavigation.js)

5.使用

在需要的位置引入

import CesiumNavigation from 'cesium-navigation-es6'

初始化

 let options = {}
        // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
        options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50)
        // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
        options.enableCompass = true
        // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
        options.enableZoomControls = true
        // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
        options.enableDistanceLegend = false
        // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
        options.enableCompassOuterRing = true
        //新版必须new  CesiumNavigation ,可以查看作者github
        new CesiumNavigation(viewer, options)

6.伪代码

.......伪代码
import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
import CesiumNavigation from 'cesium-navigation-es6'


let viewer=new Ceisum.Viewer(........)
let options = {}
        // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
        options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50)
        // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
        options.enableCompass = true
        // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
        options.enableZoomControls = true
        // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
        options.enableDistanceLegend = false
        // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
        options.enableCompassOuterRing = true
       new CesiumNavigation(viewer, options)

7.成功图片

 

参考链接

1.npmjs

2.Vue+Cesium1.81+cesium-navigation-es6配置详解+问题解决