vue中使用Cesium——第一个Cesium页面

最新推荐文章于 2025-03-17 16:17:18 发布

晨曦06

最新推荐文章于 2025-03-17 16:17:18 发布

阅读量3.4k

点赞数

文章标签：前端框架前端 gis

本文链接：https://blog.youkuaiyun.com/m0_53266704/article/details/121202565

版权

本文介绍如何在Vue项目中使用Cesium，重点是借助vue-cli-plugin-cesium插件简化配置。文章详细阐述了从前言、初始化Cesium容器、展示效果预览到注意事项的全过程，包括设置Cesium容器div、初始化方法以及提醒读者需注册Cesium账号以获取token用于后续高级功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

vue中使用Cesium——第一个Cesium页面

一前言

市面上的前端框架中，Vue+Cesium 可谓是最佳搭档，一般做 Cesium B 端产品的公司都会使用 Vue，所以后续内容都将基于 Vue。想要在Vue中使用Cesium，我推荐使用 vue-cli-plugin-cesium，原因就是配置简单。具体的安装过程可以点击链接查看。

二初始化

安装完vue-cli-plugin-cesium插件后，我们就可以写自己的cesium页面了。首先定义一个div，id为cesiumContainer

<div id="cesiumContainer" class="cesium-container"></div>

定义初始化方法

init(){
  //此处不想使用默认的谷歌地图影像，所以使用此url指定ArcGIS的在线影像地图
  let url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
  let geogle = new Cesium.ArcGisMapServerImageryProvider({url:url});
  //此处