#背景:由于后续项目可能会用到Cesium,所以暂时熟悉熟悉。
1.重启一个新项目:
npm install vue@3.3.0, 一路NO下去,暂时不选择配置
npm install vite-plugin-cesium ,安装插件,然后在vite.config.js里面引入插件
![在这里插入图片描述](https://img-blog.csdnimg.cn/4faa0b7538104e31a4243e9cc9b9da68.png
补充一下小插曲:
我安装的vue版本是3.3.0,但是package.json的依赖版本是3.2.27.。。。。补充一package下截图
e 这个问题后续再研究一下。。
2.渲染地图
首先需要把vue的默认显示样式删除掉,新建一个组件, 然后定义一个容器来存放这个地图组件,这里的wrap-map就是地图容器
<template>
<div id="wrap-map"></div>
</template>
然后在页面挂载完进行地图初始化
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium'; // 将cesium引入
onMounted(() => {
const viewer = new Cesium.Viewer('wrap-map'); //指定地图容器
});
</script>
就这么简单,npm run dev启动
顺利启动。
3.进行cesium token配置
cesium虽然跑起来了,但是地图底下会有一行文字来提示你注册一个token
首先,在这一步之前需要申请一个cesium Ion账号, 用邮箱注册就可以,进入https://ion.cesium.com/tokens?page=1 官网,申请一个token注册完拿到default Token
然后需要在渲染地图时将这个token设置给Cesium.Ion.defaultAccessToken
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium'; // 将cesium引入
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.' // 此处填写你申请的token
const viewer = new Cesium.Viewer('wrap-map'); //指定地图容器
});
然后地图里的文字就没了。
4.切换地图底图
cesium默认的底图为Bing Maps Aerial, 有时候需要我们更换底图,在这里就尝试更改一下
首先需要确认需要哪种底图,这里我们用另外一个Bing Maps Roads
可以在Cesium Ion 里面查到这个图层对应的ID
然后在渲染的时候把这个图层添加进去, 在之前需要把原来的底图移除掉remove, 不移除掉的话在南北极地区可能会有显示问题。 可以自行注释掉看下效果。
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(async () => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.e';
const viewer = new Cesium.Viewer('wrap-map');
// 删除底图图层 base layer 地图会变为一个蓝色的球
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// 一定要加await
viewer.imageryLayers.addImageryProvider(await Cesium.IonImageryProvider.fromAssetId(4));
});
</script>
这里有个小坑,之前没看官网,在网上搜的是用同步的方式进行图层加载的,但是我试了很多次都报错了,弄了很久才发现这个问题,所以还是以官网的例子优先吧,也可能是版本的问题,我现在用的是当前最新的版本。。
然后这里添加图层的话一定要用await 异步处理,我的理解是,图层渲染是异步的,如果不加await的话那么图层还没加载出来就被添加到地图上了, 会显示不出来。
先暂时到这里吧,后续有时间会接着更新!