Vue3配置Cesium-navigation-es6

1. 安装 cesium-navigation-es6

E:\CesiumProject\world> npm i [email protected] -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

.
.
.
.
.
.

---

桃花仙人种桃树，又摘桃花换酒钱_