@bitalltech-maplibre/core

BitAllTech MapLibre 核心工具包，封装地图初始化、内置底图和低空可视化特效。

安装

npm install @bitalltech-maplibre/core maplibre-gl

基础使用

import {
  createMap,
  maplibregl,
  setMaplibreToolsConfig,
} from "@bitalltech-maplibre/core";
import "maplibre-gl/dist/maplibre-gl.css";

setMaplibreToolsConfig({
  tdtToken: "你的天地图 token",
});

const map = createMap({
  container: "map",
  center: [116.39, 39.91],
  zoom: 10.5,
  style: "openfreemap-liberty",
  attributionControl: false,
});

map.addControl(new maplibregl.NavigationControl(), "top-right");

地图初始化

createMap(options) 是 new maplibregl.Map() 的轻量封装，额外支持内置底图类型：

• openfreemap-liberty
• openfreemap-bright
• openfreemap-positron
• openfreemap-dark
• openfreemap-fiord
• tdt-image
• tdt-image-label

如果 style 传入普通 URL 或完整 StyleSpecification，会原样交给 MapLibre。

底图

import { setBaseMap } from "@bitalltech-maplibre/core";

setBaseMap(map, "tdt-image-label", {
  token: "你的天地图 token",
  diff: false,
});

天地图 token 可以通过单次调用传入，也可以通过 setMaplibreToolsConfig({ tdtToken }) 设置全局默认值。

低空特效

import {
  addBreathingCircle,
  addRadarSweep,
  addPulseMarker,
  addTargetLock,
  addCountermeasureBeam,
} from "@bitalltech-maplibre/core";

const radar = addRadarSweep(map, {
  id: "radar",
  center: [116.39, 39.91],
  radius: 3000,
  color: "#22c55e",
});

const pulse = addPulseMarker(map, {
  id: "event-pulse",
  center: [116.41, 39.92],
  color: "#ef4444",
});

const breathing = addBreathingCircle(map, {
  id: "target-breathing",
  center: [116.405, 39.915],
  radius: 90,
  color: "#1677ff",
  duration: 1800,
});

const lock = addTargetLock(map, {
  id: "target-lock",
  center: [116.4, 39.918],
  color: "#ff3b30",
  size: 76,
});

const beam = addCountermeasureBeam(map, {
  id: "countermeasure-beam",
  center: [116.386, 39.906],
  target: [116.399, 39.912],
  mode: "expulsion",
  color: "#a855f7",
});

radar.update({ radius: 5000 });
pulse.hide();
breathing.show();
lock.update({ center: [116.402, 39.919] });
radar.remove();

扇形扫描支持从圆心到外缘的径向渐变：

addSectorScan(map, {
  id: "sector",
  center: [116.39, 39.91],
  radius: 1600,
  startAngle: 215,
  endAngle: 282,
  outlineColor: "#22c55e",
  gradient: {
    colors: ["#f97316", "#facc15", "#22c55e"],
    steps: 64,
    centerOpacity: 0.08,
    edgeOpacity: 0.34,
  },
});

当前提供：

• addBreathingCircle
• addPulseMarker
• addRingPulseMarker
• addSectorScan
• addDirectionalPulse
• addRadarSweep
• addDefenceCircle
• addTargetLock
• addCountermeasureBeam
• addCoordinatedCountermeasure
• addNavigationSpoofing
• addBreachAlert

这些方法都会返回控制器，支持 update()、show()、hide() 和 remove()。其中 addBreachAlert 额外提供 trigger(point)、reset() 和 isActive()：trigger 开始持续预警，reset 停止，开始与结束都由业务层决定。

围栏闯入预警

addBreachAlert 用于无人机闯入电子围栏时的复合预警，三段叠加且各自独立开关。trigger 后三段持续播放，直到业务层调用 reset() 才停止：

• 围栏高频闪烁：接触瞬间围栏由正常色（蓝/绿）切到高频闪烁警报红
• 接触点涟漪扩散：以接触点为中心持续向外扩散红色涟漪
• 战术框闪烁：全屏或局部 DOM 边框高频闪烁

import { addBreachAlert, createFenceCircle } from "@bitalltech-maplibre/core";

// fence 支持直接传入 edit 插件 getAll() 的 FeatureCollection，
// 或单个 Polygon / MultiPolygon / Feature；圆形用 createFenceCircle 构造。
const fence = createFenceCircle([116.39, 39.91], 1000);

const alert = addBreachAlert(map, {
  id: "breach-zone",
  center: [116.39, 39.91],
  fence,                         // 围栏几何
  fenceColor: "#1677ff",         // 正常态蓝
  fenceAlertColor: "#ff3b30",    // 警报红
  fenceFlash: true,              // 围栏闪烁：开
  ripple: true,                  // 涟漪：开
  tacticalFlash: false,          // 战术框：关
});

// 业务层判定闯入后触发（几何判定与目标分类归业务层）
detector.on("breach", ({ point }) => {
  alert.trigger(point);
});

alert.reset();   // 业务层判定解警后停止
alert.remove();  // 销毁（连 DOM 一起清理）

插件只负责视觉表现，不判定「是否闯入」「目标是否黑飞/未知」，也不决定警报持续多久——这些都由业务层完成，插件只暴露 trigger 与 reset。

常用导出

• createMap、maplibregl
• setMaplibreToolsConfig、getMaplibreToolsConfig
• getBaseMapStyle、setBaseMap
• 低空特效方法和对应类型