核心特性
强大的三维可视化能力
🌐 三维地球
基于 WebGL 的高性能三维地球渲染，支持多种地图服务和地形数据。
📍 空间测量
提供距离、面积、角度等多种空间测量工具，支持精确的地理计算。
✏️ 图形标绘
支持点、线、面、圆等多种几何图形的绘制和编辑功能。
🛣️ 路径分析
路径规划、轨迹回放、动态路径展示等高级路径分析功能。
功能模块
完整的三维可视化工具集
地图服务
- 天地图服务
- 高德地图
- OpenStreetMap
- 自定义瓦片
测量工具
- 距离测量
- 面积计算
- 角度测量
- 高度测量
标绘功能
- 点标记
- 线绘制
- 面绘制
- 文字标注
热力图
- 点密度热力
- 数值热力图
- 动态热力
- 自定义配色
3D模型
- 倾斜摄影
- 3D建筑
- 模型加载
- 动画效果
工具集
- 图层管理
- 视角控制
- 截图导出
- 坐标转换
技术架构
现代化的技术栈
应用层
现代化的前端框架
Vue 3
TypeScript
Vite
三维引擎
强大的渲染能力
CesiumJS
WebGL
Three.js
地理计算
精确的空间分析
Turf.js
Proj4js
Geojson
数据处理
高效的数据管理
Axios
File API
Web Workers
使用示例
快速上手指南
初始化 Cesium
// 创建 Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
baseLayerPicker: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
navigationHelpButton: false,
animation: false,
timeline: false
});添加标记点
// 添加点标记
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(116.391, 39.904),
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2
},
label: {
text: '北京',
font: '14pt sans-serif',
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE
}
});