Cesium搭配vue3的一些练习

最新推荐文章于 2025-04-02 15:59:35 发布

A ta and run

最新推荐文章于 2025-04-02 15:59:35 发布

阅读量141

点赞数

分类专栏： cesium个人练习文章标签： javascript vue.js 前端框架前端 webgl 3d

本文链接：https://blog.youkuaiyun.com/A_ta_and_run/article/details/132742711

版权

cesium个人练习专栏收录该内容

6 篇文章

订阅专栏

#背景：由于后续项目可能会用到Cesium，所以暂时熟悉熟悉。

1.重启一个新项目：

 npm install vue@3.3.0， 一路NO下去，暂时不选择配置
 npm install vite-plugin-cesium  ,安装插件，然后在vite.config.js里面引入插件
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4faa0b7538104e31a4243e9cc9b9da68.png

Alt
补充一下小插曲：
我安装的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的话那么图层还没加载出来就被添加到地图上了，会显示不出来。
先暂时到这里吧，后续有时间会接着更新！