Vue3 + Cesium 三维地理信息平台 Vue3+Cesium测量功能全解析（长度、面积、周长、三角测量等）Vue3+Cesium标绘编辑功能：编辑新增折点、删除折点、撤销上一控制点

智慧-vue3+Cesium系列
一、Vue3+Cesium测量功能全解析（长度、面积、周长、三角测量等）
二、Vue3+Cesium标绘编辑功能：编辑新增折点、删除折点、撤销上一控制点
三、基础功能
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 Vue	UI组件库，提供按钮、弹窗、菜单等交互组件
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/roll）
• GLB/GLTF：动态调整样式风格
• 离线地形：加载与删除本地地形数据
• 天气效果：云、雨、雪、雾（浓度/颜色）动态设置

5. 其他功能

• 点聚合：Entity/Primitive 点聚合效果
• 地名搜索：天地图地名查询
• 全局控制：大气环境参数、背景图切换（纯色/自定义图片）

---

三、核心代码示例

1. 项目结构

src/ ├── components/ # 标绘、测量、地图控制组件 ├── views/ │ └── MapView.vue # 主地图页面 ├── utils/ │ └── cesium.js # Cesium 初始化、工具函数 └── App.vue

---

2. Cesium 初始化（utils/cesium.js）

import*asCesiumfrom'cesium'import'cesium/Build/Cesium/Widgets/widgets.css'// 初始化Viewer，无需TokenexportfunctioninitCesium(container){Cesium.Ion.defaultAccessToken=''// 不使用Cesium Ion，留空即可constviewer=newCesium.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.vue）

<template> <div class="map-container" ref="cesiumContainer"></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; } </style>

---

4. 标绘工具组件（components/drawTool.js）

exportfunctionuseDrawTool(viewer){// 绘制多边形（可扩展点/线/矩形/圆形等）functiondrawPolygon(){consthandler=newCesium.ScreenSpaceEventHandler(viewer.canvas)constpositions=[]constentity=viewer.entities.add({polygon:{hierarchy:newCesium.ConstantProperty(),material:Cesium.Color.BLUE.withAlpha(0.5),outline:true,outlineColor:Cesium.Color.WHITE}})// 左键添加点handler.setInputAction((event)=>{constray=viewer.camera.getPickRay(event.position)constcartesian=viewer.scene.globe.pick(ray,viewer.scene)if(cartesian){positions.push(cartesian)entity.polygon.hierarchy=newCesium.ConstantProperty(newCesium.PolygonHierarchy(positions))}},Cesium.ScreenSpaceEventType.LEFT_CLICK)// 右键结束绘制handler.setInputAction(()=>{handler.destroy()},Cesium.ScreenSpaceEventType.RIGHT_CLICK)}return{drawPolygon}}

---

5. 测量工具组件（components/measureTool.js）

exportfunctionuseMeasureTool(viewer){// 距离测量functionmeasureDistance(){consthandler=newCesium.ScreenSpaceEventHandler(viewer.canvas)constpositions=[]constlineEntity=viewer.entities.add({polyline:{positions:newCesium.ConstantProperty(),material:Cesium.Color.ORANGE,width:3}})handler.setInputAction((event)=>{constray=viewer.camera.getPickRay(event.position)constcartesian=viewer.scene.globe.pick(ray,viewer.scene)if(cartesian){positions.push(cartesian)lineEntity.polyline.positions=newCesium.ConstantProperty(positions)// 计算并显示距离（水平/斜距/垂直/坡度）if(positions.length>=2){constdist=Cesium.Cartesian3.distance(positions[0],positions[1])console.log('空间距离：',(dist/1000).toFixed(3)+' km')}}},Cesium.ScreenSpaceEventType.LEFT_CLICK)}return{measureDistance}}

---

6. 天气效果示例（雾效果）

// 设置雾效果functionsetFog(density=0.0002,color=Cesium.Color.WHITE){viewer.scene.fog.enabled=trueviewer.scene.fog.density=density viewer.scene.fog.color=color}// 设置降雨效果（Cesium原生无直接雨效果，可使用自定义粒子系统）functionsetRainEffect(){// 示例：简单粒子效果实现降雨constrainParticleSystem=newCesium.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)}

---

四、部署与运行

1. 安装依赖：

   npminstallcesium vite vue@3

2. 配置 vite.config.js：

   import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{cesium:'cesium/Build/Cesium'}},server:{port:3000}})

3. 启动项目：

   npmrun dev

---