Vue加载cesium指南针插件cesium-navigation

1、安装cesium-navigation

npm i cesium-navigation-es6 -S

2、引入

import CesiumNavigation from 'cesium-navigation-es6'

3、配置全局变量

Vue.prototype.CesiumNavigation = CesiumNavigation

 4、使用

在初始化cesium界面时使用。

        let options = {};
        // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
        options.defaultResetView = 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= true;
        // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
        options.enableCompassOuterRing= true;
        new CesiumNavigation(viewer, options)
        // CesiumNavigation(viewer, options)

注意：如若写成 CesiumNavigation(viewer, options)则会报错：Cannot set properties of undefined (setting 'terria')，要将CesiumNavigation(viewer, options)实例化new CesiumNavigation(viewer, options)。