智慧-vue3Cesium系列一、Vue3Cesium测量功能全解析长度、面积、周长、三角测量等二、Vue3Cesium标绘编辑功能编辑新增折点、删除折点、撤销上一控制点三、基础功能1、底图切换加载与切换bing影像、天地图影像、天地图-地图、天地图-注记;2、实时鼠标位置信息、相机姿态信息、相机高度信息3、geojson、kml、glb、3dtiles、czml数据加载与删除;4、普通标绘、编辑:点、线、多边形、矩形、圆形、扇形、两点法椭圆、三点法椭圆形的标绘与编辑;5、态势标绘、编辑:直箭头、细直线箭头、攻击箭头、燕尾攻击箭头、钳形攻击箭头的标绘与编辑;6、自定义数据图层:wms影像、wms矢量、wmts、xyz瓦片图层的加载与删除;7、Entity点聚合;rimitive点聚合;8、Primitive点聚合;9、天地图地名搜索10、实时动态调整3dtiles经度、纬度、高度、heading、pitch、roll;11、设置全局大气环境参数12、全局背景图切换纯色底图、自定义图片;13、动态设置glb/gltf样式风格离线地形加载与删除14、离线地形加载与删除15、无需token正确使用Cesium的方式;16、动态设置云效果;17、云代码封装及动态设置多片云参数18、动态设置降雨效果;19、动态设置降雪效果20、动态设置雾浓度、颜色Vue3 Cesium 三维地理信息平台源码说明 核心代码下面给你这套平台的核心技术栈说明、功能清单和关键代码可直接复制使用。一、技术栈说明技术/框架用途Vue 3前端主框架负责页面布局、组件化开发、状态管理CesiumJS三维地球渲染核心实现地图加载、标绘、测量、地形、天气效果Vite构建工具快速打包与开发热更新Element Plus / Ant Design VueUI组件库提供按钮、弹窗、菜单等交互组件Cesium 相关支持 Bing/天地图 底图、3D Tiles/GLB/GeoJSON/KML/CZML 数据格式二、核心功能清单1. 基础地图功能底图切换Bing影像、天地图影像/地图/注记实时信息鼠标经纬度、相机姿态heading/pitch/roll、相机高度多源数据加载GeoJSON、KML、GLB/GLTF、3D Tiles、CZML 数据的加载与删除自定义图层WMS/WMTS/XYZ 瓦片图层加载与删除2. 标绘与编辑功能普通标绘点、线、多边形、矩形、圆形、扇形、椭圆两点/三点法态势标绘直箭头、攻击箭头、燕尾/钳形箭头编辑操作新增/删除折点、拖拽控制点、撤销上一步、图形移动/删除3. 测量功能距离测量水平/斜距/垂直/坡度/空间距离三角测量三角形相关距离、角度计算面积周长测量面状区域面积、周长计算4. 三维模型与特效3D Tiles动态调整位置经纬度/高度、姿态heading/pitch/rollGLB/GLTF动态调整样式风格离线地形加载与删除本地地形数据天气效果云、雨、雪、雾浓度/颜色动态设置5. 其他功能点聚合Entity/Primitive 点聚合效果地名搜索天地图地名查询全局控制大气环境参数、背景图切换纯色/自定义图片三、核心代码示例1. 项目结构src/ ├── components/ # 标绘、测量、地图控制组件 ├── views/ │ └── MapView.vue # 主地图页面 ├── utils/ │ └── cesium.js # Cesium 初始化、工具函数 └── App.vue2. Cesium 初始化utils/cesium.jsimport*asCesiumfromcesiumimportcesium/Build/Cesium/Widgets/widgets.css// 初始化Viewer无需TokenexportfunctioninitCesium(container){Cesium.Ion.defaultAccessToken// 不使用Cesium Ion留空即可constviewernewCesium.Viewer(container,{animation:false,timeline:false,baseLayerPicker:false,geocoder:false,homeButton:false,sceneModePicker:false,navigationHelpButton:false,infoBox:false,selectionIndicator:false})// 初始视角定位可修改viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(116.33,40.46,3000),orientation:{heading:Cesium.Math.toRadians(46.695),pitch:Cesium.Math.toRadians(-17.832),roll:0}})returnviewer}3. 主地图页面views/MapView.vuetemplate div classmap-container refcesiumContainer/div /template script setup import { ref, onMounted } from vue import { initCesium } from /utils/cesium import { useDrawTool } from /components/drawTool.js import { useMeasureTool } from /components/measureTool.js const cesiumContainer ref(null) let viewer null let drawTool null let measureTool null onMounted(() { viewer initCesium(cesiumContainer.value) drawTool useDrawTool(viewer) measureTool useMeasureTool(viewer) }) /script style scoped .map-container { width: 100vw; height: 100vh; margin: 0; padding: 0; } /style4. 标绘工具组件components/drawTool.jsexportfunctionuseDrawTool(viewer){// 绘制多边形可扩展点/线/矩形/圆形等functiondrawPolygon(){consthandlernewCesium.ScreenSpaceEventHandler(viewer.canvas)constpositions[]constentityviewer.entities.add({polygon:{hierarchy:newCesium.ConstantProperty(),material:Cesium.Color.BLUE.withAlpha(0.5),outline:true,outlineColor:Cesium.Color.WHITE}})// 左键添加点handler.setInputAction((event){constrayviewer.camera.getPickRay(event.position)constcartesianviewer.scene.globe.pick(ray,viewer.scene)if(cartesian){positions.push(cartesian)entity.polygon.hierarchynewCesium.ConstantProperty(newCesium.PolygonHierarchy(positions))}},Cesium.ScreenSpaceEventType.LEFT_CLICK)// 右键结束绘制handler.setInputAction((){handler.destroy()},Cesium.ScreenSpaceEventType.RIGHT_CLICK)}return{drawPolygon}}5. 测量工具组件components/measureTool.jsexportfunctionuseMeasureTool(viewer){// 距离测量functionmeasureDistance(){consthandlernewCesium.ScreenSpaceEventHandler(viewer.canvas)constpositions[]constlineEntityviewer.entities.add({polyline:{positions:newCesium.ConstantProperty(),material:Cesium.Color.ORANGE,width:3}})handler.setInputAction((event){constrayviewer.camera.getPickRay(event.position)constcartesianviewer.scene.globe.pick(ray,viewer.scene)if(cartesian){positions.push(cartesian)lineEntity.polyline.positionsnewCesium.ConstantProperty(positions)// 计算并显示距离水平/斜距/垂直/坡度if(positions.length2){constdistCesium.Cartesian3.distance(positions[0],positions[1])console.log(空间距离,(dist/1000).toFixed(3) km)}}},Cesium.ScreenSpaceEventType.LEFT_CLICK)}return{measureDistance}}6. 天气效果示例雾效果// 设置雾效果functionsetFog(density0.0002,colorCesium.Color.WHITE){viewer.scene.fog.enabledtrueviewer.scene.fog.densitydensity viewer.scene.fog.colorcolor}// 设置降雨效果Cesium原生无直接雨效果可使用自定义粒子系统functionsetRainEffect(){// 示例简单粒子效果实现降雨constrainParticleSystemnewCesium.ParticleSystem({image:/rain.png,startColor:Cesium.Color.WHITE.withAlpha(0.7),endColor:Cesium.Color.WHITE.withAlpha(0.0),startScale:0.1,endScale:0.5,life:1.5,speed:10.0,emissionRate:5000,modelMatrix:Cesium.Matrix4.IDENTITY,emitter:newCesium.SphereEmitter(5000)})viewer.scene.primitives.add(rainParticleSystem)}四、部署与运行安装依赖npminstallcesium vite vue3配置 vite.config.jsimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{cesium:cesium/Build/Cesium}},server:{port:3000}})启动项目npmrun dev
