Scene Mapping GIS

外观

项目介绍 ​

在线文档：https://xincodingbreeze.github.io/scene-mapping-docs/

Scene Mapping GIS 是面向 Vue 3 项目的 2D/3D GIS 组件库。2D 模块建立在 Leaflet 与 Leaflet Draw 之上，3D 模块建立在 Cesium 之上；两者都提供声明式 Vue 组件，并保留原生 Map 或 Viewer 作为高级能力出口。

能力范围 ​

类别能力
底图天地图影像与中文注记、OpenStreetMap、自定义 XYZ
点位Marker 展示、拖拽、动态图标、命令式定位
区域多边形绘制、选择、编辑、删除、洞、岛、净面积
轨迹轨迹线、起终点、移动点位循环动画
图层额外天地图或自定义瓦片图层
定位setView、panTo、fitBounds、业务搜索结果定位
3D 场景Cesium Viewer、影像图层、Entity、Marker、动态围墙、3D Tiles
3D 控制相机飞行、屏幕拾取、实体批量管理
场景切换使用 SceneMap 在 2D 与 3D 容器之间切换

技术架构 ​

text
业务页面
├─ TMap（地图容器与底图）
│  ├─ TMapMarker
│  ├─ TMapPolygonEditor
│  └─ TMapTileLayer
└─ TrailMap（轨迹场景封装）
   └─ TMap + Leaflet 轨迹覆盖物

CesiumMap（3D Viewer 容器）
├─ CesiumImagery
├─ CesiumEntity / CesiumDropMarker
├─ CesiumDynamicWall
└─ Cesium3DTileset

TMap 通过 Vue provide/inject 向子组件提供同一个 Leaflet Map。覆盖物组件负责自己的创建、响应式更新和卸载，不请求任何业务 API。区域搜索、权限、保存策略和弹窗内容均由业务项目维护。

设计边界 ​

  • 组件库只处理通用地图交互，不内置行政区划搜索接口。
  • 天地图 Key 和其他密钥必须由业务侧注入。
  • properties 用于保存业务字段，组件编辑坐标时会保留这些字段。
  • 未覆盖的 Leaflet 高级能力可通过 TMap.getMap() 获取原生实例实现。
  • 未覆盖的 Cesium 高级能力可通过 CesiumMap.getViewer() 获取 Viewer 实现。

源码目录 ​

text
src/2d/
├─ components/       # 地图与覆盖物组件
├─ composables/      # 地图上下文 provide/inject
├─ types/            # 公共 TypeScript 类型
├─ utils/            # 坐标转换工具
└─ index.ts           # 2D 独立导出入口

src/3d/
├─ components/       # Viewer、影像、实体与场景图元
├─ composables/      # 相机、屏幕事件、实体管理
├─ types/            # 3D 坐标与组件类型
├─ utils/            # 坐标转换、相机和拾取工具
└─ index.ts           # 3D 独立导出入口