用途:该资料介绍如何在 React 应用中集成 MapLibre GL JS,用于战术地图显示,涵盖地图初始化、GeoJSON 数据源、点聚合、自定义图层与事件标记等主题。
主要能力:示例包含基础地图组件(TacticalMap),使用 useRef 保存地图实例、useEffect 初始化并清理;将业务数据转换为 GeoJSON FeatureCollection;通过 addSource 配置 cluster、clusterMaxZoom、clusterRadius 与 clusterProperties 实现聚合;用 addLayer 定义聚合圆、聚合数量标签、单点圆与关键事件脉冲层,并按 severity 映射颜色;通过 map.on 处理悬停光标、点击单点与点击聚合展开;用 maplibregl.Popup 配合 createRoot 渲染 React 弹窗;提供深色战术地图样式 JSON、fitBounds、flyTo 与获取可见范围等方法,并给出性能建议。
使用方式:需安装 maplibre-gl 并引入其 CSS,在客户端组件中创建地图实例,指定 container、style、center、zoom 等参数;数据更新时调用 GeoJSONSource 的 setData;样式文件可放在 public 目录通过 URL 引用。
适用场景:需要在地图上展示带位置的事件、告警或态势数据,并支持聚合、点击交互与弹窗的场景。
限制:资料未提供具体安装命令、依赖版本、收费与平台信息;示例中的样式路径、数据源与类型定义需按实际项目调整。