Cesium【开端】Vue2中怎么使用cesium以及怎么配置Cesium全过程分享

black方块cxy

已于 2025-03-27 14:42:02 修改

阅读量907

点赞数 9

分类专栏： cesium开发教程文章标签： arcgis

于 2025-03-25 13:53:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41920758/article/details/146499414

版权

cesium开发教程专栏收录该内容

2 篇文章

订阅专栏

这篇文章主要介绍了Vue2中配置Cesium全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

基于Vue2配置Cesium

本文是关于基于Vue2，对Cesium，进行在线使用和离线（内网）使用配置

一、安装Cesium依赖

npm i Cesium

二、在线Cesimu配置（在vue.config.js文件中进行如下配置）

准备：首先你需要有一个vue2的项目，然后有一个干净的页面，这些准备好了以后就可以开始了。

第一步，安装插件；
npm install cesium --save
第二步，移动文件；
在node-modules中找到刚刚安装的cesium，在文件夹中里面有一个Build文件夹，把Build里面的Cesium复制出来丢到public中

第三步，在public/index.html中,引入cesium全局样式和cesium源码，这样前期工作就已经完成了

第四步，写一个页面，并给一点样式
<template>
<div id="my-map"></div>
</template>

<script>
export default {
data(){
return{

}
}
}
</script>

<style >
* {
padding: 0;
margin: 0;
}
#my-map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
}
</style>

第五步：需要在官网申请一个token
Cesium 官网：https://cesium.com/

步骤：

按要求填写信息

按照步骤来，创建一个token，然后最右边有token可以进行复制了

第六步：开始写代码
在刚刚的页面中写一个方法，并在mounted中使用。

mounted() {
this.init();
},

methods: {
init() {
this.viewer = new Cesium.Viewer("my-map", {
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false, // 影像切换
animation: true, // 是否显示动画控件
infoBox: false, // 是否显示点击要素之后显示的信息
selectionIndicator: false, // 要素选中框
geocoder: false, // 是否显示地名查找控件
timeline: true, // 是否显示时间线控件
fullscreenButton: false,
shouldAnimate: false,
navigationHelpButton: false, // 是否显示帮助信息控件
});
},
},
但是这里会遇到一个问题，会报错

解决：在package.json文件里面的eslintConfig添加这些，然后重启项目就可以了。

得到的结果就是这样的：

第七步：优化及其他方法
methods: {
init() {
(Cesium.Ion.defaultAccessToken = "你申请的cesium的token");

this.viewer = new Cesium.Viewer("my-map", {
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false, // 影像切换
animation: true, // 是否显示动画控件
infoBox: false, // 是否显示点击要素之后显示的信息
selectionIndicator: false, // 要素选中框
geocoder: false, // 是否显示地名查找控件
timeline: true, // 是否显示时间线控件
fullscreenButton: false,
shouldAnimate: false,
navigationHelpButton: false, // 是否显示帮助信息控件
});

// 优化第一步
//这是让你的画面以一个怎样的形式出现，相当于出场动画
this.viewer.camera.flyTo({
// fromDegrees()方法，将经纬度和高程转换为世界坐标，这里定位到中国
destination: Cesium.Cartesian3.fromDegrees(101.8, 33.74, 5000000),
orientation: {
// 指向
// heading:Cesium.Math.toRadians(90,0),
// 视角
// pitch:Cesium.Math.toRadians(-90),
roll: 0.0,
},
});

// 优化第二步
//显示标注
this.viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url:
"http://{s}.tianditu.gov.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=0a30a060a83ae06ba7a9dd5f70a3c203",
layer: "tdtCva",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
],
maximumLevel: 18,
show: false,
})
);
},
},