系统信息
windows10 LTSC 21H2
vscode:1.77.1
nodejs:18.15.0
npm:9.5.0
版本信息
vue:3.2.47
vite:4.1.4
cesium:1.104.0
vue-router:4.1.6
默认在以上的js相关版本下构建环境,并包括创建vue项目,创建vue-router文件并构建路由,创建vue视图等等,以上内容不再赘述。
如环境和版本不同,则项目中可能会出现低概率的不可遇见异常,请适配相关内容后再尝试。
plus:本文所述项目引用了element-ui。
构建及应用
本文默认应用者已下载cesiumjs文件包并申请获取到Cesium的AccessToken。
cesiumjs文件包下载路径:https://cesium.com/downloads/
本文参考的CesiumJS官方文档:CesiumJS Quickstart – Cesium
构建完成的vue项目后,安装cesium,具体步骤如下:
步骤1:npm引入cesium
npm install cesium
步骤2:在main.js中设定cesium的基础url路径,这里将基础路径设置为cesium,同时在public文件夹新建文件夹cesium,将下载得到的Cesium-1.104.zip文件包下的Build\Cesium文件夹内的所有文件拷贝到刚刚新建立的cesium文件夹。
注意:一定不要在main.js文件中全局引用cesium,这种引用方式并不会生效。
步骤3:构建测试用的TestView.vue,配置好路由,引入cesiumJS,具体代码:
<template>
<div id="testCesium" class="ht10 wd10 cesiumBox"></div>
</template>
<script setup>
import { ref , onMounted } from 'vue'
import * as Cesium from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css";
const init = () => {
Cesium.Ion.defaultAccessToken = '你申请的cesiumAccessToken'
// Initialize the Cesium Viewer in the HTML element with the "你定义的元素id".
const viewer = new Cesium.Viewer('testCesium', {});
}
onMounted(()=>{
init()
})
</script>
<style lang="less" scoped>
.cesiumBox {}
</style>
编译运行,可见如下结果:
一些注意事项:
1)一定要在应用cesium组件元素的view中引入cesiumJS,不要在main.js中进行全局引用,cesium的全局引用不会生效。
2)代码复制时一定要注意使用申请的cesiumAccessToken,用它替换"你申请的cesiumAccessToken",同时注意不要弄丢两个英文引号。
3)cesium容器所在的dom元素(本例中为div)必须添加id同时明确指定height和width,示例中通过ht10和wd10的css类指定了具体值。
4)创建cesium时引用的容器id要和之前定义的dom元素id值一致,即本例中的testCesium,它可以修改,但要两处同时修改。
步骤4:添加cesium-navigation导航
npm install cesium-navigation-es6 --save
步骤5:配置cesium-navigation导航
在TestView中引入cesium-navigation,在cesium的引用代码后添加引用代码:
在定义的cesium viewer控件后添加配置项目:
最后启用导航:
完整代码:
<template>
<div id="testCesium" class="ht10 wd10 cesiumBox"></div>
</template>
<script setup>
import { ref , onMounted } from 'vue'
import * as Cesium from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css"
import CesiumNavigation from "cesium-navigation-es6"
const init = () => {
Cesium.Ion.defaultAccessToken = '你申请的cesiumAccessToken'
// Initialize the Cesium Viewer in the HTML element with the "你定义的元素id".
const viewer = new Cesium.Viewer('testCesium', {})
//定义对应的cesium-navigation的配置
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= false
// 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
options.enableDistanceLegend= false
// 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
options.enableCompassOuterRing= true
new CesiumNavigation(viewer,options)
}
onMounted(()=>{
init()
})
</script>
<style lang="less" scoped>
.cesiumBox {}
</style>
以上就是基础的cesium项目构建及插件的使用,之后将介绍如何配置cesium并引入其他影像。
标签:cesiumNavigation,vue,false,--,Cesium,cesium,import,true From: https://www.cnblogs.com/zjw1514/p/17310253.html