【cesium】vue2项目实战：从零搭建3D地理可视化应用

1. 环境准备与基础配置第一次在Vue2项目中集成Cesium时我踩了不少坑。最头疼的就是各种依赖冲突和路径配置问题。这里分享一个经过实战验证的配置方案保证你能顺利跑通第一个3D地球。先来个全家桶安装npm install cesium --save npm install vue-loader^15.9.8 --save-dev # 解决Cesium源码编译问题关键步骤来了——Cesium的静态资源处理。很多新手会卡在这里我当初也是反复试错才发现最优解从node_modules/cesium/Build文件夹复制整个Cesium目录到public目录在vue.config.js中添加关键配置const path require(path) const CopyWebpackPlugin require(copy-webpack-plugin) module.exports { configureWebpack: { plugins: [ new CopyWebpackPlugin({ patterns: [{ from: path.join(__dirname, node_modules/cesium/Build/Cesium/Workers), to: Cesium/Workers }] }) ] } }index.html的引入方式也有讲究。推荐这样写避免路径问题link relstylesheet href% BASE_URL %Cesium/Widgets/widgets.css script src% BASE_URL %Cesium/Cesium.js/script2. 地图初始化与基础功能2.1 最小化Viewer配置这个配置是我经过多个项目优化后的版本去掉了所有非必要控件this.viewer new Cesium.Viewer(map-container, { animation: false, // 隐藏动画控件 baseLayerPicker: false, // 隐藏图层选择器 fullscreenButton: false, // 隐藏全屏按钮 geocoder: false, // 隐藏地理编码搜索 homeButton: false, // 隐藏主页按钮 infoBox: false, // 隐藏信息框 sceneModePicker: false, // 隐藏场景模式选择器 selectionIndicator: false,// 隐藏选择指示器 timeline: false, // 隐藏时间线 navigationHelpButton: false, // 隐藏导航帮助 shouldAnimate: true, // 开启动画 creditContainer: document.createElement(div) // 隐藏版权信息 })2.2 天地图集成实战国内项目最常用的还是天地图这里给出完整接入方案。首先要去天地图官网申请key然后这样配置// 移除默认影像图层 this.viewer.imageryLayers.remove(this.viewer.imageryLayers.get(0)) // 天地图影像图层 const tdtImgLayer new Cesium.WebMapTileServiceImageryProvider({ url: http://t0.tianditu.com/img_w/wmts?tk${你的天地图key}, layer: img, style: default, tileMatrixSetID: w, maximumLevel: 18 }) // 天地图注记图层 const tdtAnnoLayer new Cesium.WebMapTileServiceImageryProvider({ url: http://t0.tianditu.com/cia_w/wmts?tk${你的天地图key}, layer: cia, style: default, tileMatrixSetID: w, maximumLevel: 18 }) this.viewer.imageryLayers.addImageryProvider(tdtImgLayer) this.viewer.imageryLayers.addImageryProvider(tdtAnnoLayer)3. 核心功能开发3.1 坐标转换解决方案处理过高德/百度地图与Cesium集成的开发者都知道坐标系差异导致的偏移问题有多烦人。我的解决方案是使用coordtransform库import { gcj02towgs84 } from coordtransform // 高德坐标转WGS84 function amapToWGS84(lng, lat) { const [wgsLng, wgsLat] gcj02towgs84(lng, lat) return { longitude: wgsLng, latitude: wgsLat } }3.2 POI搜索定位功能结合高德API实现的搜索定位组件关键代码结构如下template el-autocomplete v-modelsearchText :fetch-suggestionsquerySearch selecthandleSelect /el-autocomplete /template script export default { methods: { async querySearch(query, cb) { const res await fetch(https://restapi.amap.com/v3/place/text?key${你的高德key}keywords${query}) const data await res.json() cb(data.pois.map(item ({ value: item.name, address: item.address, location: item.location }))) }, handleSelect(item) { const [lng, lat] item.location.split(,) const { longitude, latitude } this.amapToWGS84(parseFloat(lng), parseFloat(lat)) this.viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, 2000) }) } } } /script4. 高级功能实现4.1 点聚合优化方案当需要展示大量点位时原生实现性能堪忧。这是我的优化方案// 创建数据源时启用聚类 const dataSource new Cesium.CustomDataSource() dataSource.clustering.enabled true dataSource.clustering.pixelRange 50 dataSource.clustering.minimumClusterSize 3 // 自定义聚合图标 const pinBuilder new Cesium.PinBuilder() dataSource.clustering.clusterEvent.addEventListener((entities, cluster) { cluster.billboard.image pinBuilder.fromText( entities.length.toString(), Cesium.Color.GREEN, 48 ).toDataURL() }) // 添加点位 points.forEach(point { dataSource.entities.add({ position: Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude), billboard: { image: path/to/icon.png, width: 32, height: 32 } }) }) this.viewer.dataSources.add(dataSource)4.2 区域掩膜动态控制实现区域高亮显示的核心代码function createMask(polygonCoords) { const hierarchy new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray(polygonCoords.flat()) ) return this.viewer.entities.add({ polygon: { hierarchy: hierarchy, material: new Cesium.ColorMaterialProperty( Cesium.Color.BLUE.withAlpha(0.5) ), outline: true, outlineColor: Cesium.Color.WHITE } }) } // 使用示例 const jinanCoords [ [116.8, 36.4], [117.3, 36.4], [117.3, 36.9], [116.8, 36.9] ] const maskEntity createMask(jinanCoords) // 动态显示/隐藏 function toggleMask() { maskEntity.show !maskEntity.show }