Vue项目实战：集成Cesium加载天地图与高德地图的完整指南

1. 环境准备与项目初始化在开始集成Cesium之前我们需要先搭建好Vue的开发环境。这里我推荐使用Vue 3的组合式API因为它的模块化特性与Cesium的集成更加契合。不过Vue 2的用户也不用担心大部分代码都是兼容的。首先创建一个新的Vue项目npm init vuelatest vue-cesium-demo cd vue-cesium-demo npm install接下来安装Cesium的核心依赖npm install cesium --save这里有个小技巧我建议同时安装cesium和vue-cesium这两个包。vue-cesium是一个专门为Vue优化的封装库能简化很多操作npm install vue-cesium --save安装完成后我们需要在vite.config.js或vue.config.js中添加Cesium的构建配置。这是很多教程容易忽略的关键步骤import { defineConfig } from vite import vue from vitejs/plugin-vue import cesium from vite-plugin-cesium export default defineConfig({ plugins: [vue(), cesium()] })2. 配置地图服务Token2.1 获取Cesium Ion TokenCesium需要有效的Token才能使用其基础服务。前往Cesium Ion官网注册账号并创建Token。这个Token相当于使用Cesium的通行证。在src目录下新建一个config.js文件存放Tokenexport const CESIUM_TOKEN 你的Cesium Ion Token2.2 申请天地图Key天地图是国家基础地理信息中心提供的服务需要先注册账号申请Key。申请时注意选择Web端JS API类型。在config.js中添加export const TIANDITU_KEY 你的天地图Key2.3 获取高德地图Key高德地图的Key可以通过高德开放平台申请。建议选择Web服务类型的Key这样既能用于地图显示也能调用API。config.js最终内容export const CESIUM_TOKEN 你的Cesium Ion Token export const TIANDITU_KEY 你的天地图Key export const GAODE_KEY 你的高德地图Key3. 初始化Cesium Viewer3.1 创建Cesium容器组件在components目录下新建CesiumViewer.vue文件template div idcesium-container classcesium-container/div /template script setup import { onMounted } from vue import { CESIUM_TOKEN } from ../config let viewer null onMounted(() { Cesium.Ion.defaultAccessToken CESIUM_TOKEN viewer new Cesium.Viewer(cesium-container, { animation: false, baseLayerPicker: false, fullscreenButton: false, vrButton: false, sceneModePicker: false, timeline: false, navigationHelpButton: false, homeButton: false, infoBox: false, selectionIndicator: false, shouldAnimate: true }) // 隐藏版权信息 viewer.cesiumWidget.creditContainer.style.display none }) /script style scoped .cesium-container { width: 100%; height: 100vh; } /style3.2 优化Viewer配置默认的Viewer会加载Cesium自带的Bing地图我们需要移除它并添加自定义底图// 移除默认底图 viewer.imageryLayers.remove(viewer.imageryLayers.get(0)) // 设置初始视角为中国区域 viewer.camera.flyTo({ destination: Cesium.Rectangle.fromDegrees( 75, 15, // 西南角经纬度 135, 55 // 东北角经纬度 ) })4. 集成天地图服务天地图提供了多种图层服务我们可以根据需要组合使用。这里我推荐使用影像注记的组合方案。4.1 添加天地图影像图层在CesiumViewer.vue的onMounted中添加import { TIANDITU_KEY } from ../config // 天地图影像 const tdtImgLayer new Cesium.WebMapTileServiceImageryProvider({ url: http://t0.tianditu.com/img_w/wmts?tk${TIANDITU_KEY}, layer: img, style: default, tileMatrixSetID: w, format: tiles, maximumLevel: 18 }) viewer.imageryLayers.addImageryProvider(tdtImgLayer)4.2 添加天地图注记图层影像图层只有卫星图需要叠加注记图层显示文字信息// 天地图注记 const tdtAnnoLayer new Cesium.WebMapTileServiceImageryProvider({ url: http://t0.tianditu.com/cia_w/wmts?tk${TIANDITU_KEY}, layer: cia, style: default, tileMatrixSetID: w, format: tiles, maximumLevel: 18 }) viewer.imageryLayers.addImageryProvider(tdtAnnoLayer)4.3 解决跨域问题开发环境下可能会遇到天地图的跨域问题需要在vite.config.js中配置代理export default defineConfig({ server: { proxy: { /tianditu: { target: http://t0.tianditu.com, changeOrigin: true, rewrite: path path.replace(/^\/tianditu/, ) } } } })然后修改天地图URL为url: /tianditu/img_w/wmts?tk${TIANDITU_KEY}5. 集成高德地图服务高德地图的集成方式与天地图略有不同它使用的是UrlTemplateImageryProvider。5.1 添加高德影像图层// 高德影像 const gaodeImgLayer new Cesium.UrlTemplateImageryProvider({ url: https://webst02.is.autonavi.com/appmaptile?style6x{x}y{y}z{z}, minimumLevel: 3, maximumLevel: 18 }) viewer.imageryLayers.addImageryProvider(gaodeImgLayer)5.2 添加高德路网图层// 高德路网 const gaodeRoadLayer new Cesium.UrlTemplateImageryProvider({ url: https://webst02.is.autonavi.com/appmaptile?style8x{x}y{y}z{z}, minimumLevel: 3, maximumLevel: 18 }) viewer.imageryLayers.addImageryProvider(gaodeRoadLayer)5.3 图层切换控制在实际项目中我们通常需要提供图层切换功能。可以创建一个图层管理器const layerManager { tdt: { img: tdtImgLayer, anno: tdtAnnoLayer }, gaode: { img: gaodeImgLayer, road: gaodeRoadLayer } } // 示例切换到高德地图 function switchToGaode() { layerManager.tdt.img.show false layerManager.tdt.anno.show false layerManager.gaode.img.show true layerManager.gaode.road.show true }6. 性能优化与常见问题6.1 按需加载CesiumCesium体积较大可以采用动态导入的方式减少首屏加载时间const initCesium async () { const Cesium await import(cesium) // 初始化代码... }6.2 地形数据优化如果需要显示地形可以使用Cesium Ion提供的地形服务viewer.terrainProvider await Cesium.createWorldTerrainAsync({ requestWaterMask: true, requestVertexNormals: true })6.3 内存管理Cesium容易造成内存泄漏需要在组件卸载时正确销毁import { onUnmounted } from vue onUnmounted(() { if (viewer) { viewer.destroy() viewer null } })6.4 移动端适配在移动设备上需要特别处理触摸事件viewer.scene.screenSpaceCameraController.enableTilt false viewer.scene.screenSpaceCameraController.enableRotate false7. 进阶功能扩展7.1 添加自定义标记// 添加点标记 function addPoint(lng, lat, title) { viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(lng, lat), point: { pixelSize: 10, color: Cesium.Color.RED }, label: { text: title, font: 14pt sans-serif, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -10) } }) }7.2 测量工具实现// 距离测量 function initMeasureTool() { const handler new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas) handler.setInputAction((movement) { const position viewer.scene.pickPosition(movement.position) // 测量逻辑... }, Cesium.ScreenSpaceEventType.LEFT_CLICK) }7.3 3D模型加载// 加载GLTF模型 function loadModel(lng, lat, modelUrl) { viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(lng, lat), model: { uri: modelUrl, minimumPixelSize: 128, maximumScale: 20000 } }) }在实际项目中集成Cesium时我发现最大的挑战不是技术实现而是性能优化。特别是在加载大量数据时需要合理使用Cesium的聚类、LOD等技术。另外Vue的响应式系统与Cesium的直接DOM操作有时会产生冲突这种情况下最好将Cesium相关的操作封装在独立的模块中通过事件与Vue组件通信。