1. 安装 cesium-navigation-es6
E:\CesiumProject\world> npm i cesium-navigation-es6@1.0.9 -S
2. 修改源码
-
打开
node_modules/cesium-navigation-es6/
,将所有.js
内的import Cesium from 'cesium/Cesium'
替换为如下
var Cesium = require('cesium/Cesium')
-
涉及到
defineProperties
函数的地方,将defineProperties
替换为
Object.defineProperties
上述两处改动是为了解决如下两个问题
TypeError: Cannot read properties of undefined (reading 'defined')
at eval (UserInterfaceControl.js?209a:3:1)
at Module../node_modules/cesium-navigation-es6/viewModels/UserInterfaceControl.js (0.js:226:1)
at __webpack_require__ (app.js:854:30)
at fn (app.js:151:20)
at eval (NavigationControl.js?a2e5:1:1)
at Module../node_modules/cesium-navigation-es6/viewModels/NavigationControl.js (0.js:190:1)
at __webpack_require__ (app.js:854:30)
at fn (app.js:151:20)
at eval (ResetViewNavigationControl.js?8f94:1:1)
at Module../node_modules/cesium-navigation-es6/viewModels/ResetViewNavigationControl.js (0.js:214:1)
TypeError: defineProperties is not a function
at eval (UserInterfaceControl.js?209a:71:1)
at Module../node_modules/cesium-navigation-es6/viewModels/UserInterfaceControl.js (0.js:226:1)
at __webpack_require__ (app.js:854:30)
at fn (app.js:151:20)
at eval (NavigationControl.js?a2e5:1:1)
at Module../node_modules/cesium-navigation-es6/viewModels/NavigationControl.js (0.js:190:1)
at __webpack_require__ (app.js:854:30)
at fn (app.js:151:20)
at eval (ResetViewNavigationControl.js?8f94:1:1)
at Module../node_modules/cesium-navigation-es6/viewModels/ResetViewNavigationControl.js (0.js:214:1)
3. 测试代码
index.vue
<template>
<div id="container"></div>
</template>
<script>
import * as Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";
import CesiumNavigation from "cesium-navigation-es6";
export default {
name: 'HelloCesium',
mounted () {
let viewer = new Cesium.Viewer("container");
var 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= true;
// 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
options.enableCompassOuterRing= true;
CesiumNavigation(viewer, options);
}
}
</script>
<style scoped lang="scss">
#container {
width: 100%;
height: 100%;
}
</style>
启动
E:\CesiumProject\world> npm run serve
访问
4. 参考
参考了如下博客
[1]. Vue+Cesium1.81+cesium-navigation-es6配置详解+问题解决
https://blog.csdn.net/qq_34504481/article/details/116789458
[2]. vue2.X cesium 1.89.0 使用 cesium-navigation-es6 详细教程
https://blog.csdn.net/apgk1/article/details/122667840?spm=1001.2014.3001.5501
[3]. Vue+Cesium1.81环境配置
https://www.it610.com/article/1394434032460189696.htm
.
.
.
.
.
.
桃花仙人种桃树,又摘桃花换酒钱_