面向 React 的
实时三维
地图库

• 

  12 700 km 从地球到平面地图 椭球体回退，智能聚合

• 

  9 km 标记与聚合 复用的 DOM 节点，按类别拆分

• 

  3 km 天际线与地平线 无论俯仰角如何，标记都保持屏幕尺寸

• 

  900 m 坐标网格 贴合地面，屏幕线宽恒定

• 

  1,7 m 步行模式 视线高度、重力、碰撞

• 照片级三维，平面二维 cesiumIonToken 通过 Cesium Ion 接入 Google Photorealistic 3D Tiles；未设置令牌时退回椭球地球；二维底图可来自 Google，也可来自你自己的 XYZ 服务器。
• DOM 标记与聚合 markersLayer() 真实的 DOM 节点，原生 hover、焦点与 CSS 动画。节点复用，并在单次 translate3d 中写入；移动中的目标是滑动，而不是被重建。
• 绘图编辑器 draw 框选与套索选择、缩放与旋转手柄、按工具区分的样式、撤销与重做、GeoJSON 导入导出。
• 随视口加载的实时数据 useLiveData() 相机移动时按包围盒重新拉取，并支持实时更新。
• MIL-STD-2525D 军标 动态导入 9 MB 的军标 SDK 按需加载 —— 不显示军标的构建产物永远不会包含它。
• 带类型的主题与文案 theme · labels 明暗两套主题，遵循 prefers-reduced-motion，全部可翻译。代码中没有任何硬编码的文字或数值。

• 

  绘制与选择缩放与旋转手柄、实时选择面板、撤销与重做

• 

  MIL-STD-2525D 符号面板友军、敌军、中立、未知 —— SDK 按需加载

• 

  目录与数据源启用一个数据源，252 个点随即落位，聚合重新组合

• 

  浅色主题一个设置项 —— 整个界面随之切换，地图也不例外

import { Map, markersLayer, type MarkerData } from '@pasquelin/map3d'

type Alert = { title: string }

const alerts: MarkerData<Alert>[] = [
  { id: 1, type: 'critical', position: { lat: 48.8566, lng: 2.3522 }, title: 'Intrusion', data: { title: 'Intrusion' } },
  { id: 2, type: 'info', position: { lat: 48.8606, lng: 2.3376 }, title: 'Patrol', data: { title: 'Patrol' } },
]

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Map
        center={{ lat: 48.8566, lng: 2.3522 }}
        zoom={13}
        layers={[markersLayer<Alert>({ points: alerts, cluster: { enabled: true } })]}
      />
    </div>
  )
}

可选插件 —— IGN Géoplateforme、Windy、室内平面图 —— 位于独立仓库，你也可以用插件 API 编写自己的插件。