@bitalltech-maplibre/core 1.0.0 → 1.0.3

package/dist/index.esm.js

@@ -45,7 +45,7 @@ const getOpenFreeMapStyle = (type = "openfreemap-liberty") => OPENFREEMAP_STYLES
 const TDT_SUBDOMAINS = ["0", "1", "2", "3", "4", "5", "6", "7"];
 const TDT_ATTRIBUTION = "© 天地图";
 const TDT_MAX_ZOOM = 18;
-const TDT_STYLE_TYPES = ["tdt-image", "tdt-image-label"];
+const TDT_STYLE_TYPES = ["tdt-image", "tdt-image-label", "tdt-mvt", "tdt-mvt-label"];
 const getToken = (token) => {
   const tdtToken = token || getMaplibreToolsConfig().tdtToken;
   if (!tdtToken) {
@@ -67,6 +67,14 @@ const createTiandituRasterSource = (tileType, options = {}) => ({
   maxzoom: TDT_MAX_ZOOM,
   attribution: TDT_ATTRIBUTION
 });
+const createTiandituMvtSource = (options = {}) => ({
+  type: "raster",
+  tiles: createTdtTileUrls("vec_w", options.token),
+  tileSize: 256,
+  minzoom: 0,
+  maxzoom: TDT_MAX_ZOOM,
+  attribution: TDT_ATTRIBUTION
+});
 const createTiandituImageStyle = (options = {}) => {
   const withLabel = options.label !== false;
   const sources = {
@@ -93,10 +101,38 @@ const createTiandituImageStyle = (options = {}) => {
     layers
   };
 };
+const createTiandituMvtStyle = (options = {}) => {
+  const withLabel = options.label !== false;
+  const sources = {
+    "tdt-mvt": createTiandituMvtSource(options)
+  };
+  const layers = [
+    {
+      id: "tdt-mvt",
+      type: "raster",
+      source: "tdt-mvt"
+    }
+  ];
+  if (withLabel) {
+    sources["tdt-mvt-label"] = createTiandituRasterSource("cva_w", options);
+    layers.push({
+      id: "tdt-mvt-label",
+      type: "raster",
+      source: "tdt-mvt-label"
+    });
+  }
+  return {
+    version: 8,
+    sources,
+    layers
+  };
+};
 const BASE_MAP_TYPES = [
   ...Object.keys(OPENFREEMAP_STYLES),
   "tdt-image",
-  "tdt-image-label"
+  "tdt-image-label",
+  "tdt-mvt",
+  "tdt-mvt-label"
 ];
 const isBaseMapType = (type) => BASE_MAP_TYPES.includes(type);
 const getBaseMapStyle = (type = "openfreemap-liberty", options = {}) => {
@@ -106,6 +142,12 @@ const getBaseMapStyle = (type = "openfreemap-liberty", options = {}) => {
   if (type === "tdt-image-label") {
     return createTiandituImageStyle({ ...options, label: true });
   }
+  if (type === "tdt-mvt") {
+    return createTiandituMvtStyle({ ...options, label: false });
+  }
+  if (type === "tdt-mvt-label") {
+    return createTiandituMvtStyle({ ...options, label: true });
+  }
   return getOpenFreeMapStyle(type);
 };
 const setBaseMap = (map, type, options = {}) => {
@@ -147,6 +189,22 @@ const getDestination = (center, distance, bearing) => {
     toDegrees(nextLatitude)
   ];
 };
+const getDistance = (start, end) => {
+  const latitudeDelta = toRadians(end[1] - start[1]);
+  const longitudeDelta = toRadians(end[0] - start[0]);
+  const startLatitude = toRadians(start[1]);
+  const endLatitude = toRadians(end[1]);
+  const a = Math.sin(latitudeDelta / 2) * Math.sin(latitudeDelta / 2) + Math.cos(startLatitude) * Math.cos(endLatitude) * Math.sin(longitudeDelta / 2) * Math.sin(longitudeDelta / 2);
+  return 2 * EARTH_RADIUS * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+};
+const getBearing = (start, end) => {
+  const startLatitude = toRadians(start[1]);
+  const endLatitude = toRadians(end[1]);
+  const longitudeDelta = toRadians(end[0] - start[0]);
+  const y = Math.sin(longitudeDelta) * Math.cos(endLatitude);
+  const x = Math.cos(startLatitude) * Math.sin(endLatitude) - Math.sin(startLatitude) * Math.cos(endLatitude) * Math.cos(longitudeDelta);
+  return normalizeAngle(toDegrees(Math.atan2(y, x)));
+};
 const createAngleStops = (startAngle, endAngle, segmentCount = DEFAULT_SEGMENTS) => {
   const sweep = getSweepAngle(startAngle, endAngle);
   const segments = Math.max(12, Math.ceil(segmentCount * sweep / 360));
@@ -201,6 +259,40 @@ const createRayLine = (center, radius, bearing) => ({
   type: "LineString",
   coordinates: [center, getDestination(center, radius, bearing)]
 });
+const createBeamGeometry = (options) => {
+  const endCenter = options.target || getDestination(
+    options.center,
+    options.distance || 0,
+    options.bearing || 0
+  );
+  const beamBearing = options.target !== void 0 ? getBearing(options.center, options.target) : normalizeAngle(options.bearing || 0);
+  const startLeft = getDestination(
+    options.center,
+    options.startWidth / 2,
+    beamBearing - 90
+  );
+  const startRight = getDestination(
+    options.center,
+    options.startWidth / 2,
+    beamBearing + 90
+  );
+  const endLeft = getDestination(endCenter, options.endWidth / 2, beamBearing - 90);
+  const endRight = getDestination(
+    endCenter,
+    options.endWidth / 2,
+    beamBearing + 90
+  );
+  return {
+    polygon: {
+      type: "Polygon",
+      coordinates: [[startLeft, endLeft, endRight, startRight, startLeft]]
+    },
+    centerLine: {
+      type: "LineString",
+      coordinates: [options.center, endCenter]
+    }
+  };
+};
 const createFeature = (geometry, properties) => ({
   type: "Feature",
   geometry,
@@ -228,6 +320,7 @@ const setLayersVisibility = (map, layerIds, visible) => {
     }
   });
 };
+const isStyleNotReadyError$1 = (error) => error instanceof Error && error.message === "Style is not done loading.";
 const createManagedEffect = (map, initialOptions, renderEffect) => {
   const effectId = initialOptions.id;
   const sourceId = `${effectId}-source`;
@@ -259,7 +352,7 @@ const createManagedEffect = (map, initialOptions, renderEffect) => {
     }
   };
   const renderNow = () => {
-    var _a, _b;
+    var _a, _b, _c;
     if (removed) {
       return;
     }
@@ -289,6 +382,19 @@ const createManagedEffect = (map, initialOptions, renderEffect) => {
       );
     });
     setLayersVisibility(map, layerIds, options.visible !== false);
+    (_c = nextRender.canvasSources) == null ? void 0 : _c.forEach((canvasSource) => {
+      var _a2;
+      const styleAny = map.style;
+      const tileManager = (_a2 = styleAny == null ? void 0 : styleAny.tileManagers) == null ? void 0 : _a2[canvasSource.id];
+      if (!tileManager || !tileManager._sourceLoaded) {
+        return;
+      }
+      const prevUsed = tileManager.used;
+      tileManager.used = true;
+      const mapAny = map;
+      tileManager.update(mapAny.transform, mapAny.terrain);
+      tileManager.used = prevUsed;
+    });
     if (nextRender.startAnimation) {
       disposeAnimation = nextRender.startAnimation({
         getOptions: () => options,
@@ -296,30 +402,38 @@ const createManagedEffect = (map, initialOptions, renderEffect) => {
       }) || void 0;
     }
   };
-  const handleStyleData = () => {
-    if (!waitingForStyle || removed || !map.isStyleLoaded()) {
+  const stopWaitingForStyle = () => {
+    if (!waitingForStyle) {
       return;
     }
     waitingForStyle = false;
     map.off("styledata", handleStyleData);
-    renderNow();
   };
-  const requestRender = () => {
-    if (removed) {
-      return;
-    }
-    if (!map.isStyleLoaded()) {
+  const ensureRender = () => {
+    try {
+      renderNow();
+      stopWaitingForStyle();
+    } catch (error) {
+      if (!isStyleNotReadyError$1(error)) {
+        throw error;
+      }
       if (!waitingForStyle) {
         waitingForStyle = true;
         map.on("styledata", handleStyleData);
       }
+    }
+  };
+  const handleStyleData = () => {
+    if (!waitingForStyle || removed) {
       return;
     }
-    if (waitingForStyle) {
-      waitingForStyle = false;
-      map.off("styledata", handleStyleData);
+    ensureRender();
+  };
+  const requestRender = () => {
+    if (removed) {
+      return;
     }
-    renderNow();
+    ensureRender();
   };
   requestRender();
   return {
@@ -435,27 +549,103 @@ const createPulseMarkerRender = (options) => {
     }
   };
 };
+const addPulseMarker = (map, options) => createManagedEffect(map, options, createPulseMarkerRender);
+const createBreathingCircleData = (options, phase = 0) => {
+  const baseRadius = Math.max(1, options.radius ?? 90);
+  const minRadius = Math.max(1, options.minRadius ?? baseRadius * 0.78);
+  const maxRadius = Math.max(
+    minRadius,
+    options.maxRadius ?? baseRadius * 1.22
+  );
+  const progress = (1 - Math.cos(phase * Math.PI * 2)) / 2;
+  const currentRadius = minRadius + (maxRadius - minRadius) * progress;
+  const fillOpacity = options.fillOpacity ?? 0.28;
+  const minFillOpacity = options.minFillOpacity ?? fillOpacity * 0.46;
+  const strokeOpacity = options.strokeOpacity ?? 0.82;
+  const minStrokeOpacity = options.minStrokeOpacity ?? strokeOpacity * 0.38;
+  const inverseProgress = 1 - progress;
+  const features = [
+    createFeature(createCirclePolygon(options.center, currentRadius), {
+      kind: "breathing-fill",
+      opacity: minFillOpacity + (fillOpacity - minFillOpacity) * inverseProgress
+    })
+  ];
+  if ((options.strokeWidth ?? 2) > 0) {
+    features.push(
+      createFeature(createCircleLine(options.center, currentRadius), {
+        kind: "breathing-stroke",
+        opacity: minStrokeOpacity + (strokeOpacity - minStrokeOpacity) * inverseProgress
+      })
+    );
+  }
+  return createFeatureCollection(features);
+};
+const createBreathingCircleRender = (options) => {
+  const color = options.color || "#1677ff";
+  const fillColor = options.fillColor || color;
+  const strokeColor = options.strokeColor || color;
+  const strokeWidth = Math.max(0, options.strokeWidth ?? 2);
+  return {
+    data: createBreathingCircleData(options),
+    layers: [
+      {
+        id: `${options.id}-breathing-fill`,
+        type: "fill",
+        filter: ["==", ["get", "kind"], "breathing-fill"],
+        paint: {
+          "fill-color": fillColor,
+          "fill-opacity": ["coalesce", ["get", "opacity"], options.fillOpacity ?? 0.28]
+        }
+      },
+      {
+        id: `${options.id}-breathing-stroke`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "breathing-stroke"],
+        layout: {
+          "line-cap": "round",
+          "line-join": "round"
+        },
+        paint: {
+          "line-color": strokeColor,
+          "line-opacity": ["coalesce", ["get", "opacity"], options.strokeOpacity ?? 0.82],
+          "line-width": strokeWidth
+        }
+      }
+    ],
+    startAnimation({ getOptions, setData }) {
+      const duration = Math.max(400, getOptions().duration ?? 1800);
+      const startTime = performance.now();
+      let frameId = 0;
+      const tick = (timestamp) => {
+        const currentOptions = getOptions();
+        const phase = (timestamp - startTime) % duration / duration;
+        setData(createBreathingCircleData(currentOptions, phase));
+        frameId = requestAnimationFrame(tick);
+      };
+      frameId = requestAnimationFrame(tick);
+      return () => {
+        cancelAnimationFrame(frameId);
+      };
+    }
+  };
+};
+const addBreathingCircle = (map, options) => createManagedEffect(map, options, createBreathingCircleRender);
 const createRingPulseEffectData = (options, phase = 0) => {
-  var _a, _b;
   const baseRadius = Math.max(16, options.radius ?? 110);
   const pulseScale = Math.max(0, options.pulseScale ?? 0.16);
   const pulseProgress = (1 - Math.cos(phase * Math.PI * 2)) / 2;
   const currentRadius = baseRadius * (1 + pulseScale * pulseProgress);
-  const haloRadius = currentRadius * 1.28;
-  const ringCount = Math.max(1, options.ringCount ?? ((_a = options.radii) == null ? void 0 : _a.length) ?? 3);
+  const ringCount = Math.max(1, options.ringCount ?? 3);
   const maxRadius = Math.max(
     currentRadius * 2.2,
-    options.maxRadius ?? (((_b = options.radii) == null ? void 0 : _b.length) ? Math.max(...options.radii) : baseRadius * (ringCount * 2.5))
+    options.maxRadius ?? baseRadius * (ringCount * 2.5)
   );
   const ringSpacing = maxRadius / ringCount;
+  const fillOpacity = options.fillOpacity ?? 0.28;
   const features = [
-    createFeature(createCirclePolygon(options.center, haloRadius), {
-      kind: "halo",
-      opacity: (options.haloOpacity ?? 0.16) * (0.75 + pulseProgress * 0.65)
-    }),
     createFeature(createCirclePolygon(options.center, currentRadius), {
       kind: "core",
-      opacity: (options.fillOpacity ?? 0.28) * (0.88 + pulseProgress * 0.2)
+      opacity: fillOpacity * (0.88 + pulseProgress * 0.2)
     }),
     createFeature(createCircleLine(options.center, currentRadius * 1.06), {
       kind: "core-ring",
@@ -488,15 +678,6 @@ const createRingPulseMarkerRender = (options) => {
   return {
     data: createRingPulseEffectData(options),
     layers: [
-      {
-        id: `${options.id}-halo`,
-        type: "fill",
-        filter: ["==", ["get", "kind"], "halo"],
-        paint: {
-          "fill-color": fillColor,
-          "fill-opacity": ["coalesce", ["get", "opacity"], options.haloOpacity ?? 0.16]
-        }
-      },
       {
         id: `${options.id}-core`,
         type: "fill",
@@ -538,7 +719,8 @@ const createRingPulseMarkerRender = (options) => {
     }
   };
 };
-const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const addRingPulseMarker = (map, options) => createManagedEffect(map, options, createRingPulseMarkerRender);
+const clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
 const parseColor = (color) => {
   const value = color.trim();
   const hex = value.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
@@ -556,9 +738,9 @@ const parseColor = (color) => {
   );
   if (rgb) {
     return [
-      clamp(Number(rgb[1]), 0, 255),
-      clamp(Number(rgb[2]), 0, 255),
-      clamp(Number(rgb[3]), 0, 255)
+      clamp$1(Number(rgb[1]), 0, 255),
+      clamp$1(Number(rgb[2]), 0, 255),
+      clamp$1(Number(rgb[3]), 0, 255)
     ];
   }
   return void 0;
@@ -574,7 +756,30 @@ const toRgbaColor = (color, opacity) => {
   if (!rgb) {
     return color;
   }
-  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamp(opacity, 0, 1)})`;
+  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamp$1(opacity, 0, 1)})`;
+};
+const easeOutQuad = (t) => t * (2 - t);
+const lerpRgb = (a, b, t) => [
+  Math.round(a[0] + (b[0] - a[0]) * t),
+  Math.round(a[1] + (b[1] - a[1]) * t),
+  Math.round(a[2] + (b[2] - a[2]) * t)
+];
+const lerpColorArray = (colors, t) => {
+  const last = colors.length - 1;
+  if (t <= 0) {
+    return colors[0];
+  }
+  if (t >= last) {
+    return colors[last];
+  }
+  const idx = Math.floor(t);
+  const frac = t - idx;
+  const [a, b] = [parseColor(colors[idx]), parseColor(colors[idx + 1])];
+  if (!a || !b) {
+    return colors[Math.round(t)];
+  }
+  const [r, g, b2] = lerpRgb(a, b, frac);
+  return `rgb(${r},${g},${b2})`;
 };
 const createSectorCanvasCoordinates = (center, radius) => {
   const north = getDestination(center, radius, 0)[1];
@@ -613,8 +818,8 @@ const drawSectorGradientCanvas = (canvas, options, angleOffset = 0) => {
   const startCanvasAngle = getCanvasArcAngle(startAngle);
   const endCanvasAngle = startCanvasAngle + sweep * Math.PI / 180;
   const baseOpacity = options.gradient.opacity ?? options.opacity ?? 0.28;
-  const centerOpacity = options.gradient.centerOpacity ?? options.gradient.tailOpacity ?? baseOpacity * 0.25;
-  const edgeOpacity = options.gradient.edgeOpacity ?? options.gradient.headOpacity ?? baseOpacity;
+  const centerOpacity = options.gradient.centerOpacity ?? baseOpacity * 0.25;
+  const edgeOpacity = options.gradient.edgeOpacity ?? baseOpacity;
   const gradient = context.createRadialGradient(
     center,
     center,
@@ -743,6 +948,7 @@ const createSectorScanRender = (options) => {
     } : void 0
   };
 };
+const addSectorScan = (map, options) => createManagedEffect(map, options, createSectorScanRender);
 const createDirectionalPulseData = (options, leadingDistance) => {
   const radius = Math.max(40, options.radius);
   const direction = options.direction ?? 270;
@@ -821,13 +1027,87 @@ const createDirectionalPulseRender = (options) => ({
     };
   } : void 0
 });
+const addDirectionalPulse = (map, options) => createManagedEffect(map, options, createDirectionalPulseRender);
+const hasRadarSweepGradient = (options) => {
+  var _a;
+  const colors = (_a = options.gradient) == null ? void 0 : _a.colors;
+  return Array.isArray(colors) && colors.length >= 2;
+};
+const createRadarSweepCanvasCoordinates = (center, radius) => {
+  const north = getDestination(center, radius, 0)[1];
+  const east = getDestination(center, radius, 90)[0];
+  const south = getDestination(center, radius, 180)[1];
+  const west = getDestination(center, radius, 270)[0];
+  return [
+    [west, north],
+    [east, north],
+    [east, south],
+    [west, south]
+  ];
+};
+const createRadarSweepCanvas = () => {
+  const canvas = document.createElement("canvas");
+  canvas.width = 768;
+  canvas.height = 768;
+  return canvas;
+};
+const drawRadarSweepCanvas = (canvas, options, angleOffset = 0) => {
+  const ctx = canvas.getContext("2d");
+  const gradient = options.gradient;
+  const colors = gradient == null ? void 0 : gradient.colors;
+  if (!ctx || !gradient || !colors || colors.length < 2) {
+    return;
+  }
+  const size = canvas.width;
+  const centerXY = size / 2;
+  const drawRadius = centerXY - 2;
+  const sweepAngle = Math.max(12, options.sweepAngle ?? 42);
+  const tailOpacity = options.tailOpacity ?? 0.04;
+  const headOpacity = Math.max(0.24, options.opacity ?? 0.3);
+  const sweepStartAngle = (options.sweepStartAngle ?? 0) + angleOffset;
+  const totalStartAngle = sweepStartAngle;
+  const totalEndAngle = sweepStartAngle + sweepAngle;
+  const totalSpan = sweepAngle;
+  ctx.clearRect(0, 0, size, size);
+  const conicGradient = ctx.createConicGradient(
+    getCanvasArcAngle(totalStartAngle),
+    centerXY,
+    centerXY
+  );
+  const normalizedSpan = totalSpan / 360;
+  const maxOpacity = Math.min(1, headOpacity + 0.08);
+  const stopCount = 128;
+  for (let i = 0; i <= stopCount; i++) {
+    const t = i / stopCount;
+    const eased = easeOutQuad(t);
+    const opacity = tailOpacity + (maxOpacity - tailOpacity) * eased;
+    const ci = t * (colors.length - 1);
+    const color = lerpColorArray(colors, ci);
+    conicGradient.addColorStop(
+      t * normalizedSpan,
+      toRgbaColor(color, Math.max(0, opacity))
+    );
+  }
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(centerXY, centerXY);
+  ctx.arc(
+    centerXY,
+    centerXY,
+    drawRadius,
+    getCanvasArcAngle(totalStartAngle),
+    getCanvasArcAngle(totalEndAngle),
+    false
+  );
+  ctx.closePath();
+  ctx.fillStyle = conicGradient;
+  ctx.fill();
+  ctx.restore();
+};
 const createRadarSweepData = (options, angleOffset = 0) => {
   var _a;
   const ringCount = Math.max(0, options.ringCount ?? 4);
-  const trailCount = Math.max(1, options.trailCount ?? 8);
   const sweepAngle = Math.max(12, options.sweepAngle ?? 42);
-  const trailGap = sweepAngle * 0.22;
-  const tailOpacity = options.tailOpacity ?? 0.04;
   const headOpacity = options.headOpacity ?? Math.max(0.24, options.opacity ?? 0.3);
   const sweepStartAngle = (options.sweepStartAngle ?? 0) + angleOffset;
   const showCrosshair = options.showCrosshair !== false;
@@ -836,6 +1116,7 @@ const createRadarSweepData = (options, angleOffset = 0) => {
     20,
     options.coreRadius ?? Math.min(160, options.radius * 0.035)
   );
+  const useGradient = hasRadarSweepGradient(options);
   const features = [];
   for (let index = ringCount; index >= 1; index -= 1) {
     const distance = options.radius * index / ringCount;
@@ -904,123 +1185,2714 @@ const createRadarSweepData = (options, angleOffset = 0) => {
       kind: "core"
     })
   );
-  for (let index = trailCount - 1; index >= 0; index -= 1) {
-    const startAngle = sweepStartAngle - trailGap * index;
-    const endAngle = startAngle + sweepAngle;
-    const progress = (trailCount - index) / trailCount;
-    const opacity = tailOpacity + (headOpacity - tailOpacity) * progress * progress;
+  if (!useGradient) {
     features.push(
       createFeature(
-        createSectorPolygon(options.center, options.radius, startAngle, endAngle),
+        createSectorPolygon(
+          options.center,
+          options.radius,
+          sweepStartAngle,
+          sweepStartAngle + sweepAngle
+        ),
         {
           kind: "sweep",
-          opacity
+          opacity: headOpacity
         }
       )
     );
   }
-  features.push(
-    createFeature(
-      createSectorPolygon(
-        options.center,
-        options.radius,
-        sweepStartAngle + sweepAngle * 0.42,
-        sweepStartAngle + sweepAngle
-      ),
-      {
-        kind: "head",
-        opacity: Math.min(1, headOpacity + 0.08)
-      }
-    )
-  );
   return createFeatureCollection(features);
 };
-const createRadarSweepRender = (options) => ({
-  data: createRadarSweepData(options),
-  layers: [
-    {
-      id: `${options.id}-radar-trail`,
-      type: "fill",
-      filter: ["==", ["get", "kind"], "sweep"],
-      paint: {
-        "fill-color": options.color || "#22c55e",
-        "fill-opacity": ["coalesce", ["get", "opacity"], options.opacity ?? 0.32]
-      }
-    },
-    {
-      id: `${options.id}-radar-rings`,
-      type: "line",
-      filter: ["==", ["get", "kind"], "ring"],
-      paint: {
-        "line-color": options.ringColor || options.color || "#22c55e",
-        "line-opacity": options.ringOpacity ?? 0.95,
-        "line-width": options.ringWidth ?? 2
-      }
-    },
-    {
-      id: `${options.id}-radar-crosshair`,
-      type: "line",
-      filter: ["==", ["get", "kind"], "crosshair"],
-      paint: {
-        "line-color": options.crosshairColor || options.ringColor || options.color || "#22c55e",
-        "line-opacity": options.crosshairOpacity ?? 0.5,
-        "line-width": options.crosshairWidth ?? 1.4
+const createRadarSweepRender = (options) => {
+  const useGradient = hasRadarSweepGradient(options);
+  const canvas = useGradient ? createRadarSweepCanvas() : void 0;
+  if (canvas) {
+    drawRadarSweepCanvas(canvas, options);
+  }
+  const sweepLayer = canvas ? {
+    id: `${options.id}-radar-trail`,
+    type: "raster",
+    paint: {
+      "raster-opacity": 1,
+      "raster-fade-duration": 0
+    }
+  } : {
+    id: `${options.id}-radar-trail`,
+    type: "fill",
+    filter: ["==", ["get", "kind"], "sweep"],
+    paint: {
+      "fill-color": options.color || "#22c55e",
+      "fill-opacity": ["coalesce", ["get", "opacity"], options.opacity ?? 0.32]
+    }
+  };
+  return {
+    data: createRadarSweepData(options),
+    canvasSources: canvas ? [
+      {
+        id: `${options.id}-canvas-source`,
+        source: {
+          type: "canvas",
+          canvas,
+          coordinates: createRadarSweepCanvasCoordinates(
+            options.center,
+            options.radius
+          ),
+          animate: true
+        }
       }
-    },
-    {
-      id: `${options.id}-radar-distance-labels`,
-      type: "symbol",
-      filter: ["==", ["get", "kind"], "distance-label"],
-      layout: {
-        "text-field": ["get", "text"],
-        "text-size": options.distanceLabelSize ?? 12,
-        "text-anchor": ["get", "textAnchor"],
-        "text-allow-overlap": true,
-        "text-ignore-placement": true
+    ] : void 0,
+    layers: [
+      sweepLayer,
+      {
+        id: `${options.id}-radar-rings`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "ring"],
+        paint: {
+          "line-color": options.ringColor || options.color || "#22c55e",
+          "line-opacity": options.ringOpacity ?? 0.95,
+          "line-width": options.ringWidth ?? 2
+        }
       },
-      paint: {
-        "text-color": options.distanceLabelColor || options.ringColor || options.color || "#22c55e",
-        "text-opacity": options.distanceLabelOpacity ?? 0.92,
-        "text-halo-color": options.distanceLabelHaloColor || "rgba(15, 23, 42, 0.42)",
-        "text-halo-width": 1
+      {
+        id: `${options.id}-radar-crosshair`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "crosshair"],
+        paint: {
+          "line-color": options.crosshairColor || options.ringColor || options.color || "#22c55e",
+          "line-opacity": options.crosshairOpacity ?? 0.5,
+          "line-width": options.crosshairWidth ?? 1.4
+        }
+      },
+      {
+        id: `${options.id}-radar-distance-labels`,
+        type: "symbol",
+        filter: ["==", ["get", "kind"], "distance-label"],
+        layout: {
+          "text-field": ["get", "text"],
+          "text-size": options.distanceLabelSize ?? 12,
+          "text-anchor": ["get", "textAnchor"],
+          "text-allow-overlap": true,
+          "text-ignore-placement": true
+        },
+        paint: {
+          "text-color": options.distanceLabelColor || options.ringColor || options.color || "#22c55e",
+          "text-opacity": options.distanceLabelOpacity ?? 0.92,
+          "text-halo-color": options.distanceLabelHaloColor || "rgba(15, 23, 42, 0.42)",
+          "text-halo-width": 1
+        }
       }
-    }
-  ],
-  startAnimation({ getOptions, setData }) {
-    const startTime = performance.now();
-    let frameId = 0;
-    const tick = (timestamp) => {
-      const currentOptions = getOptions();
-      const angleOffset = (timestamp - startTime) / 1e3 * (currentOptions.rotationSpeed ?? 36);
-      setData(createRadarSweepData(currentOptions, angleOffset));
+    ],
+    startAnimation({ getOptions, setData }) {
+      const startTime = performance.now();
+      let frameId = 0;
+      const tick = (timestamp) => {
+        const currentOptions = getOptions();
+        const angleOffset = (timestamp - startTime) / 1e3 * (currentOptions.rotationSpeed ?? 36);
+        if (canvas) {
+          drawRadarSweepCanvas(canvas, currentOptions, angleOffset);
+        }
+        setData(createRadarSweepData(currentOptions, angleOffset));
+        frameId = requestAnimationFrame(tick);
+      };
       frameId = requestAnimationFrame(tick);
-    };
-    frameId = requestAnimationFrame(tick);
-    return () => {
-      cancelAnimationFrame(frameId);
-    };
-  }
-});
-const addPulseMarker = (map, options) => createManagedEffect(map, options, createPulseMarkerRender);
-const addRingPulseMarker = (map, options) => createManagedEffect(map, options, createRingPulseMarkerRender);
-const addSectorScan = (map, options) => createManagedEffect(map, options, createSectorScanRender);
-const addDirectionalPulse = (map, options) => createManagedEffect(map, options, createDirectionalPulseRender);
+      return () => {
+        cancelAnimationFrame(frameId);
+      };
+    }
+  };
+};
 const addRadarSweep = (map, options) => createManagedEffect(map, options, createRadarSweepRender);
-const resolveStyle = (style, tdtToken) => {
-  if (!style) {
-    return getBaseMapStyle("openfreemap-liberty");
-  }
-  if (typeof style === "string" && isBaseMapType(style)) {
-    return getBaseMapStyle(style, { token: tdtToken });
-  }
+const createDefenceCircleCanvas = () => {
+  const canvas = document.createElement("canvas");
+  canvas.width = 512;
+  canvas.height = 512;
+  return canvas;
+};
+const createDefenceCircleCanvasCoordinates = (center, radius) => {
+  const north = getDestination(center, radius, 0)[1];
+  const east = getDestination(center, radius, 90)[0];
+  const south = getDestination(center, radius, 180)[1];
+  const west = getDestination(center, radius, 270)[0];
+  return [
+    [west, north],
+    [east, north],
+    [east, south],
+    [west, south]
+  ];
+};
+const drawDefenceCircleCanvas = (canvas, options) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  const size = canvas.width;
+  const centerXY = size / 2;
+  const drawRadius = centerXY - 1;
+  const color = options.color || "#06c536";
+  const fillColor = options.fillColor || color;
+  const borderColor = options.borderColor || color;
+  const fillOpacity = options.fillOpacity ?? 0.06;
+  const borderOpacity = options.borderOpacity ?? 0.92;
+  ctx.clearRect(0, 0, size, size);
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(centerXY, centerXY, drawRadius, 0, Math.PI * 2);
+  ctx.clip();
+  const gradient = ctx.createRadialGradient(
+    centerXY,
+    centerXY,
+    0,
+    centerXY,
+    centerXY,
+    drawRadius
+  );
+  const edgeGlowOpacity = Math.min(0.8, fillOpacity + (borderOpacity - fillOpacity) * 0.85);
+  gradient.addColorStop(0, toRgbaColor(fillColor, fillOpacity));
+  gradient.addColorStop(0.85, toRgbaColor(fillColor, fillOpacity));
+  gradient.addColorStop(0.92, toRgbaColor(borderColor, fillOpacity + (edgeGlowOpacity - fillOpacity) * 0.3));
+  gradient.addColorStop(0.96, toRgbaColor(borderColor, fillOpacity + (edgeGlowOpacity - fillOpacity) * 0.7));
+  gradient.addColorStop(1, toRgbaColor(borderColor, edgeGlowOpacity));
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, size, size);
+  ctx.restore();
+};
+const createDefenceCircleRender = (options) => {
+  const canvas = createDefenceCircleCanvas();
+  drawDefenceCircleCanvas(canvas, options);
+  const borderColor = options.borderColor || options.color || "#06c536";
+  return {
+    data: createFeatureCollection([
+      createFeature(createCircleLine(options.center, options.radius), {
+        kind: "defence-border"
+      })
+    ]),
+    canvasSources: [
+      {
+        id: `${options.id}-canvas-source`,
+        source: {
+          type: "canvas",
+          canvas,
+          coordinates: createDefenceCircleCanvasCoordinates(
+            options.center,
+            options.radius
+          ),
+          animate: true
+        }
+      }
+    ],
+    layers: [
+      {
+        id: `${options.id}-defence-circle`,
+        type: "raster",
+        paint: {
+          "raster-opacity": 1,
+          "raster-fade-duration": 0
+        }
+      },
+      {
+        id: `${options.id}-defence-border`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "defence-border"],
+        paint: {
+          "line-color": borderColor,
+          "line-opacity": options.borderOpacity ?? 0.92,
+          "line-width": options.borderWidth ?? 2
+        }
+      }
+    ]
+  };
+};
+const addDefenceCircle = (map, options) => createManagedEffect(map, options, createDefenceCircleRender);
+const createCountermeasureBeamData = (options, elapsed = 0) => {
+  const sourceWidth = Math.max(1, options.sourceWidth ?? 220);
+  const targetWidth = Math.max(1, options.targetWidth ?? 45);
+  const beam = createBeamGeometry({
+    center: options.center,
+    target: options.target,
+    startWidth: sourceWidth,
+    endWidth: targetWidth
+  });
+  const features = [
+    createFeature(beam.polygon, { kind: "countermeasure-channel" }),
+    createFeature(beam.centerLine, { kind: "countermeasure-line" })
+  ];
+  const distance = getDistance(options.center, options.target);
+  const bearing = getBearing(options.center, options.target);
+  const particleCount = Math.max(0, Math.floor(options.particleCount ?? 18));
+  const particleDuration = Math.max(300, options.particleDuration ?? 1200);
+  const particlePhase = elapsed % particleDuration / particleDuration;
+  const particleRadius = Math.max(1, options.particleRadius ?? 2.8);
+  if (distance > 0) {
+    for (let index = 0; index < particleCount; index += 1) {
+      const progress = (particlePhase + index / particleCount) % 1;
+      features.push(
+        createFeature(
+          {
+            type: "Point",
+            coordinates: getDestination(
+              options.center,
+              distance * progress,
+              bearing
+            )
+          },
+          {
+            kind: "countermeasure-particle",
+            opacity: 0.25 + progress * 0.75,
+            radius: particleRadius * (0.7 + progress * 0.3)
+          }
+        )
+      );
+    }
+  }
+  if (options.targetRipple !== false) {
+    const rippleCount = Math.max(1, Math.floor(options.targetRippleCount ?? 2));
+    const rippleRadius = Math.max(10, options.targetRippleRadius ?? 120);
+    const rippleDuration = Math.max(300, options.targetRippleDuration ?? 900);
+    const ripplePhase = elapsed % rippleDuration / rippleDuration;
+    for (let index = 0; index < rippleCount; index += 1) {
+      const progress = (ripplePhase + index / rippleCount) % 1;
+      const radiusProgress = options.mode === "forcedLanding" ? 1 - progress : progress;
+      features.push(
+        createFeature(
+          createCircleLine(
+            options.target,
+            Math.max(2, rippleRadius * radiusProgress)
+          ),
+          {
+            kind: "countermeasure-target-ripple",
+            opacity: Math.sin(Math.PI * progress) * 0.9
+          }
+        )
+      );
+    }
+  }
+  return createFeatureCollection(features);
+};
+const createCountermeasureBeamRender = (options) => {
+  const color = options.color ?? "#a855f7";
+  const lineColor = options.lineColor ?? "#f0abfc";
+  const lineWidth = Math.max(1, options.lineWidth ?? 2.5);
+  return {
+    data: createCountermeasureBeamData(options),
+    layers: [
+      {
+        id: `${options.id}-countermeasure-channel`,
+        type: "fill",
+        filter: ["==", ["get", "kind"], "countermeasure-channel"],
+        paint: {
+          "fill-color": options.channelColor ?? color,
+          "fill-opacity": options.channelOpacity ?? 0.16
+        }
+      },
+      {
+        id: `${options.id}-countermeasure-glow`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "countermeasure-line"],
+        layout: {
+          "line-cap": "round"
+        },
+        paint: {
+          "line-color": lineColor,
+          "line-opacity": (options.lineOpacity ?? 0.92) * 0.28,
+          "line-width": lineWidth * 4,
+          "line-blur": lineWidth * 1.4
+        }
+      },
+      {
+        id: `${options.id}-countermeasure-line`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "countermeasure-line"],
+        layout: {
+          "line-cap": "round"
+        },
+        paint: {
+          "line-color": lineColor,
+          "line-opacity": options.lineOpacity ?? 0.92,
+          "line-width": lineWidth
+        }
+      },
+      {
+        id: `${options.id}-countermeasure-target-ripple`,
+        type: "line",
+        filter: [
+          "==",
+          ["get", "kind"],
+          "countermeasure-target-ripple"
+        ],
+        paint: {
+          "line-color": color,
+          "line-opacity": ["coalesce", ["get", "opacity"], 0.9],
+          "line-width": Math.max(1, options.targetRippleWidth ?? 2.5)
+        }
+      },
+      {
+        id: `${options.id}-countermeasure-particle`,
+        type: "circle",
+        filter: ["==", ["get", "kind"], "countermeasure-particle"],
+        paint: {
+          "circle-color": options.particleColor ?? lineColor,
+          "circle-opacity": ["coalesce", ["get", "opacity"], 1],
+          "circle-radius": ["coalesce", ["get", "radius"], 2.8],
+          "circle-blur": 0.18,
+          "circle-stroke-color": "#ffffff",
+          "circle-stroke-opacity": 0.45,
+          "circle-stroke-width": 0.5
+        }
+      }
+    ],
+    startAnimation: ({ getOptions, setData }) => {
+      let frameId = 0;
+      const startTime = performance.now();
+      const tick = (timestamp) => {
+        setData(createCountermeasureBeamData(getOptions(), timestamp - startTime));
+        frameId = requestAnimationFrame(tick);
+      };
+      frameId = requestAnimationFrame(tick);
+      return () => cancelAnimationFrame(frameId);
+    }
+  };
+};
+const addCountermeasureBeam = (map, options) => createManagedEffect(map, options, createCountermeasureBeamRender);
+const getCoordinationColor = (type) => {
+  if (type === "detection") return "#38bdf8";
+  if (type === "command") return "#22d3ee";
+  return "#f97316";
+};
+const createCoordinatedCountermeasureData = (options, elapsed = 0) => {
+  const features = [];
+  const nodeKeys = /* @__PURE__ */ new Set();
+  const particleCount = Math.max(0, Math.floor(options.particleCount ?? 5));
+  const particleDuration = Math.max(300, options.particleDuration ?? 1600);
+  const phase = elapsed % particleDuration / particleDuration;
+  const particleRadius = Math.max(1, options.particleRadius ?? 2.5);
+  options.links.forEach((link, linkIndex) => {
+    const color = link.color ?? getCoordinationColor(link.type);
+    const distance = getDistance(link.from, link.to);
+    const bearing = getBearing(link.from, link.to);
+    features.push(
+      createFeature(
+        {
+          type: "LineString",
+          coordinates: [link.from, link.to]
+        },
+        {
+          kind: "coordination-link",
+          linkType: link.type,
+          color
+        }
+      )
+    );
+    if (options.showNodes !== false) {
+      [link.from, link.to].forEach((coordinate) => {
+        const key = `${coordinate[0]},${coordinate[1]}`;
+        if (nodeKeys.has(key)) return;
+        nodeKeys.add(key);
+        features.push(
+          createFeature(
+            { type: "Point", coordinates: coordinate },
+            { kind: "coordination-node", color }
+          )
+        );
+      });
+    }
+    if (distance <= 0) return;
+    for (let index = 0; index < particleCount; index += 1) {
+      const progress = (phase + index / particleCount + linkIndex / options.links.length) % 1;
+      features.push(
+        createFeature(
+          {
+            type: "Point",
+            coordinates: getDestination(link.from, distance * progress, bearing)
+          },
+          {
+            kind: "coordination-particle",
+            color,
+            opacity: 0.35 + progress * 0.65,
+            radius: particleRadius
+          }
+        )
+      );
+    }
+  });
+  if (options.targetRipple !== false) {
+    const duration = Math.max(300, options.targetRippleDuration ?? 1200);
+    const progress = elapsed % duration / duration;
+    const radius = Math.max(10, options.targetRippleRadius ?? 100) * progress;
+    features.push(
+      createFeature(createCircleLine(options.center, Math.max(2, radius)), {
+        kind: "coordination-target-ripple",
+        opacity: (1 - progress) * 0.9
+      })
+    );
+  }
+  return createFeatureCollection(features);
+};
+const createCoordinatedCountermeasureRender = (options) => {
+  const lineWidth = Math.max(1, options.lineWidth ?? 2.2);
+  const lineOpacity = options.lineOpacity ?? 0.9;
+  return {
+    data: createCoordinatedCountermeasureData(options),
+    layers: [
+      {
+        id: `${options.id}-coordination-detection`,
+        type: "line",
+        filter: ["==", ["get", "linkType"], "detection"],
+        paint: {
+          "line-color": ["coalesce", ["get", "color"], "#38bdf8"],
+          "line-opacity": lineOpacity,
+          "line-width": lineWidth,
+          "line-dasharray": [2, 2]
+        }
+      },
+      {
+        id: `${options.id}-coordination-command`,
+        type: "line",
+        filter: ["==", ["get", "linkType"], "command"],
+        paint: {
+          "line-color": ["coalesce", ["get", "color"], "#22d3ee"],
+          "line-opacity": lineOpacity,
+          "line-width": lineWidth,
+          "line-dasharray": [0.5, 1.8]
+        }
+      },
+      {
+        id: `${options.id}-coordination-countermeasure`,
+        type: "line",
+        filter: ["==", ["get", "linkType"], "countermeasure"],
+        paint: {
+          "line-color": ["coalesce", ["get", "color"], "#f97316"],
+          "line-opacity": lineOpacity,
+          "line-width": lineWidth + 0.8
+        }
+      },
+      {
+        id: `${options.id}-coordination-target-ripple`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "coordination-target-ripple"],
+        paint: {
+          "line-color": "#ff3b30",
+          "line-opacity": ["coalesce", ["get", "opacity"], 0.9],
+          "line-width": 2.5
+        }
+      },
+      {
+        id: `${options.id}-coordination-node`,
+        type: "circle",
+        filter: ["==", ["get", "kind"], "coordination-node"],
+        paint: {
+          "circle-color": ["coalesce", ["get", "color"], "#ffffff"],
+          "circle-radius": Math.max(2, options.nodeRadius ?? 5),
+          "circle-stroke-color": "#ffffff",
+          "circle-stroke-width": 1.5
+        }
+      },
+      {
+        id: `${options.id}-coordination-particle`,
+        type: "circle",
+        filter: ["==", ["get", "kind"], "coordination-particle"],
+        paint: {
+          "circle-color": ["coalesce", ["get", "color"], "#ffffff"],
+          "circle-opacity": ["coalesce", ["get", "opacity"], 1],
+          "circle-radius": ["coalesce", ["get", "radius"], 2.5],
+          "circle-blur": 0.1
+        }
+      }
+    ],
+    startAnimation: ({ getOptions, setData }) => {
+      let frameId = 0;
+      const startTime = performance.now();
+      const tick = (timestamp) => {
+        setData(
+          createCoordinatedCountermeasureData(
+            getOptions(),
+            timestamp - startTime
+          )
+        );
+        frameId = requestAnimationFrame(tick);
+      };
+      frameId = requestAnimationFrame(tick);
+      return () => cancelAnimationFrame(frameId);
+    }
+  };
+};
+const addCoordinatedCountermeasure = (map, options) => createManagedEffect(map, options, createCoordinatedCountermeasureRender);
+const createNavigationSpoofingData = (options, elapsed = 0) => {
+  const features = [
+    createFeature(
+      {
+        type: "LineString",
+        coordinates: [options.center, options.spoofedPosition]
+      },
+      { kind: "spoofing-offset" }
+    )
+  ];
+  const distance = getDistance(options.center, options.spoofedPosition);
+  const bearing = getBearing(options.center, options.spoofedPosition);
+  const particleCount = Math.max(0, Math.floor(options.particleCount ?? 10));
+  const particleDuration = Math.max(300, options.particleDuration ?? 1800);
+  const phase = elapsed % particleDuration / particleDuration;
+  if (options.showTruePosition !== false) {
+    features.push(
+      createFeature(
+        { type: "Point", coordinates: options.center },
+        { kind: "spoofing-true-position" }
+      )
+    );
+  }
+  if (options.showSpoofedPosition !== false) {
+    features.push(
+      createFeature(
+        { type: "Point", coordinates: options.spoofedPosition },
+        { kind: "spoofing-ghost" }
+      )
+    );
+  }
+  if (distance > 0) {
+    for (let index = 0; index < particleCount; index += 1) {
+      const progress = (phase + index / particleCount) % 1;
+      features.push(
+        createFeature(
+          {
+            type: "Point",
+            coordinates: getDestination(
+              options.center,
+              distance * progress,
+              bearing
+            )
+          },
+          {
+            kind: "spoofing-particle",
+            opacity: 0.25 + progress * 0.75
+          }
+        )
+      );
+    }
+  }
+  if (options.ripple !== false) {
+    const count = Math.max(1, Math.floor(options.rippleCount ?? 2));
+    const duration = Math.max(300, options.rippleDuration ?? 1200);
+    const radius = Math.max(10, options.rippleRadius ?? 120);
+    const ripplePhase = elapsed % duration / duration;
+    for (let index = 0; index < count; index += 1) {
+      const progress = (ripplePhase + index / count) % 1;
+      features.push(
+        createFeature(
+          createCircleLine(
+            options.spoofedPosition,
+            Math.max(2, radius * progress)
+          ),
+          {
+            kind: "spoofing-ripple",
+            opacity: (1 - progress) * 0.75
+          }
+        )
+      );
+    }
+  }
+  return createFeatureCollection(features);
+};
+const createNavigationSpoofingRender = (options) => {
+  const color = options.color ?? "#8b5cf6";
+  return {
+    data: createNavigationSpoofingData(options),
+    layers: [
+      {
+        id: `${options.id}-spoofing-offset`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "spoofing-offset"],
+        layout: { "line-cap": "round" },
+        paint: {
+          "line-color": options.lineColor ?? color,
+          "line-opacity": options.lineOpacity ?? 0.82,
+          "line-width": Math.max(1, options.lineWidth ?? 2),
+          "line-dasharray": [1.2, 2]
+        }
+      },
+      {
+        id: `${options.id}-spoofing-ripple`,
+        type: "line",
+        filter: ["==", ["get", "kind"], "spoofing-ripple"],
+        paint: {
+          "line-color": color,
+          "line-opacity": ["coalesce", ["get", "opacity"], 0.75],
+          "line-width": 2
+        }
+      },
+      {
+        id: `${options.id}-spoofing-true-position`,
+        type: "circle",
+        filter: ["==", ["get", "kind"], "spoofing-true-position"],
+        paint: {
+          "circle-color": "#ffffff",
+          "circle-radius": 5,
+          "circle-stroke-color": color,
+          "circle-stroke-width": 2
+        }
+      },
+      {
+        id: `${options.id}-spoofing-ghost`,
+        type: "circle",
+        filter: ["==", ["get", "kind"], "spoofing-ghost"],
+        paint: {
+          "circle-color": color,
+          "circle-opacity": options.ghostOpacity ?? 0.42,
+          "circle-radius": Math.max(2, options.ghostRadius ?? 8),
+          "circle-stroke-color": "#ffffff",
+          "circle-stroke-opacity": 0.8,
+          "circle-stroke-width": 1.5
+        }
+      },
+      {
+        id: `${options.id}-spoofing-particle`,
+        type: "circle",
+        filter: ["==", ["get", "kind"], "spoofing-particle"],
+        paint: {
+          "circle-color": color,
+          "circle-opacity": ["coalesce", ["get", "opacity"], 1],
+          "circle-radius": Math.max(1, options.particleRadius ?? 2.5),
+          "circle-blur": 0.12
+        }
+      }
+    ],
+    startAnimation: ({ getOptions, setData }) => {
+      let frameId = 0;
+      const startTime = performance.now();
+      const tick = (timestamp) => {
+        setData(createNavigationSpoofingData(getOptions(), timestamp - startTime));
+        frameId = requestAnimationFrame(tick);
+      };
+      frameId = requestAnimationFrame(tick);
+      return () => cancelAnimationFrame(frameId);
+    }
+  };
+};
+const addNavigationSpoofing = (map, options) => createManagedEffect(map, options, createNavigationSpoofingRender);
+const addTargetLock = (map, initialOptions) => {
+  const effectId = initialOptions.id;
+  let options = { ...initialOptions };
+  let removed = false;
+  let rotationAnimation;
+  const element = document.createElement("div");
+  const frame = document.createElement("div");
+  const corners = Array.from(
+    { length: 4 },
+    () => document.createElement("div")
+  );
+  const crosshairArms = Array.from(
+    { length: 4 },
+    () => document.createElement("div")
+  );
+  element.dataset.effectId = effectId;
+  element.setAttribute("aria-hidden", "true");
+  element.style.position = "absolute";
+  element.style.pointerEvents = "none";
+  frame.style.position = "absolute";
+  frame.style.inset = "0";
+  element.appendChild(frame);
+  corners.forEach((corner) => {
+    corner.style.position = "absolute";
+    corner.style.boxSizing = "border-box";
+    frame.appendChild(corner);
+  });
+  crosshairArms.forEach((arm) => {
+    arm.style.position = "absolute";
+    element.appendChild(arm);
+  });
+  const marker = new maplibregl.Marker({ element, anchor: "center" }).setLngLat(options.center).addTo(map);
+  const render = () => {
+    const color = options.color ?? "#ff3b30";
+    const size = Math.max(24, options.size ?? 72);
+    const lineWidth = Math.max(1, options.lineWidth ?? 2);
+    const cornerLength = Math.min(
+      size / 2,
+      Math.max(lineWidth * 2, options.cornerLength ?? 18)
+    );
+    const crosshairLength = Math.max(2, options.crosshairLength ?? 10);
+    const crosshairGap = Math.max(0, options.crosshairGap ?? 5);
+    marker.setLngLat(options.center);
+    element.style.width = `${size}px`;
+    element.style.height = `${size}px`;
+    element.style.display = options.visible === false ? "none" : "block";
+    element.style.opacity = `${Math.min(1, Math.max(0, options.opacity ?? 1))}`;
+    corners.forEach((corner) => {
+      corner.style.width = `${cornerLength}px`;
+      corner.style.height = `${cornerLength}px`;
+      corner.style.border = "0";
+    });
+    Object.assign(corners[0].style, {
+      left: "0",
+      top: "0",
+      borderLeft: `${lineWidth}px solid ${color}`,
+      borderTop: `${lineWidth}px solid ${color}`
+    });
+    Object.assign(corners[1].style, {
+      right: "0",
+      top: "0",
+      borderRight: `${lineWidth}px solid ${color}`,
+      borderTop: `${lineWidth}px solid ${color}`
+    });
+    Object.assign(corners[2].style, {
+      right: "0",
+      bottom: "0",
+      borderRight: `${lineWidth}px solid ${color}`,
+      borderBottom: `${lineWidth}px solid ${color}`
+    });
+    Object.assign(corners[3].style, {
+      left: "0",
+      bottom: "0",
+      borderLeft: `${lineWidth}px solid ${color}`,
+      borderBottom: `${lineWidth}px solid ${color}`
+    });
+    crosshairArms.forEach((arm) => {
+      arm.style.display = options.showCrosshair === false ? "none" : "block";
+      arm.style.background = color;
+    });
+    Object.assign(crosshairArms[0].style, {
+      width: `${lineWidth}px`,
+      height: `${crosshairLength}px`,
+      left: "50%",
+      bottom: `calc(50% + ${crosshairGap}px)`,
+      transform: "translateX(-50%)"
+    });
+    Object.assign(crosshairArms[1].style, {
+      width: `${lineWidth}px`,
+      height: `${crosshairLength}px`,
+      left: "50%",
+      top: `calc(50% + ${crosshairGap}px)`,
+      transform: "translateX(-50%)"
+    });
+    Object.assign(crosshairArms[2].style, {
+      width: `${crosshairLength}px`,
+      height: `${lineWidth}px`,
+      right: `calc(50% + ${crosshairGap}px)`,
+      top: "50%",
+      transform: "translateY(-50%)"
+    });
+    Object.assign(crosshairArms[3].style, {
+      width: `${crosshairLength}px`,
+      height: `${lineWidth}px`,
+      left: `calc(50% + ${crosshairGap}px)`,
+      top: "50%",
+      transform: "translateY(-50%)"
+    });
+    rotationAnimation == null ? void 0 : rotationAnimation.cancel();
+    rotationAnimation = void 0;
+    frame.style.transform = "rotate(0deg)";
+    if (options.rotate !== false) {
+      rotationAnimation = frame.animate(
+        [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+        {
+          duration: Math.max(300, options.rotationDuration ?? 2400),
+          iterations: Infinity
+        }
+      );
+    }
+  };
+  render();
+  return {
+    id: effectId,
+    update(nextOptions) {
+      if (removed) return;
+      options = {
+        ...options,
+        ...nextOptions,
+        id: effectId
+      };
+      render();
+    },
+    show() {
+      if (removed) return;
+      options = { ...options, visible: true };
+      element.style.display = "block";
+    },
+    hide() {
+      if (removed) return;
+      options = { ...options, visible: false };
+      element.style.display = "none";
+    },
+    remove() {
+      if (removed) return;
+      removed = true;
+      rotationAnimation == null ? void 0 : rotationAnimation.cancel();
+      rotationAnimation = void 0;
+      marker.remove();
+    }
+  };
+};
+const toFencePolygons = (fence) => {
+  if (!fence) {
+    return [];
+  }
+  if (Array.isArray(fence)) {
+    return [{ type: "Polygon", coordinates: fence }];
+  }
+  switch (fence.type) {
+    case "Polygon":
+      return [fence];
+    case "MultiPolygon":
+      return fence.coordinates.map((coordinates) => ({
+        type: "Polygon",
+        coordinates
+      }));
+    case "Feature": {
+      const geometry = fence.geometry;
+      if ((geometry == null ? void 0 : geometry.type) === "Polygon") {
+        return [geometry];
+      }
+      if ((geometry == null ? void 0 : geometry.type) === "MultiPolygon") {
+        return geometry.coordinates.map((coordinates) => ({
+          type: "Polygon",
+          coordinates
+        }));
+      }
+      return [];
+    }
+    case "FeatureCollection": {
+      const polygons = [];
+      for (const feature of fence.features) {
+        const geometry = feature.geometry;
+        if ((geometry == null ? void 0 : geometry.type) === "Polygon") {
+          polygons.push(geometry);
+        } else if ((geometry == null ? void 0 : geometry.type) === "MultiPolygon") {
+          polygons.push(
+            ...geometry.coordinates.map((coordinates) => ({
+              type: "Polygon",
+              coordinates
+            }))
+          );
+        }
+      }
+      return polygons;
+    }
+    default:
+      return [];
+  }
+};
+const createFenceCircle = (center, radius, segmentCount) => createCirclePolygon(center, radius, segmentCount);
+const createRippleData = (center, radius, count, duration, width, elapsed) => {
+  const baseOpacity = 0.95;
+  const features = [];
+  for (let index = 0; index < count; index += 1) {
+    const phase = (elapsed / duration + index / count) % 1;
+    const currentRadius = phase * radius;
+    if (currentRadius < 1) {
+      continue;
+    }
+    features.push(
+      createFeature(createCircleLine(center, currentRadius), {
+        kind: "ring",
+        opacity: baseOpacity * (1 - phase),
+        width: width * (1 - phase * 0.3)
+      })
+    );
+  }
+  return createFeatureCollection(features);
+};
+const addBreachAlert = (map, initialOptions) => {
+  const effectId = initialOptions.id;
+  const fenceSourceId = `${effectId}-fence-source`;
+  const fenceFillId = `${effectId}-fence-fill`;
+  const fenceLineId = `${effectId}-fence-line`;
+  const rippleSourceId = `${effectId}-ripple-source`;
+  const rippleLineId = `${effectId}-ripple-line`;
+  let options = { ...initialOptions };
+  let removed = false;
+  let waitingForStyle = false;
+  let fenceReady = false;
+  let active = false;
+  let fenceFlashTimer;
+  let rippleFrameId = 0;
+  let tacticalTimer;
+  let tacticalBox;
+  const resolveFenceColor = () => options.fenceColor ?? "#1677ff";
+  const resolveFenceFillColor = () => options.fenceFillColor ?? resolveFenceColor();
+  const resolveFenceFillOpacity = () => options.fenceFillOpacity ?? 0.1;
+  const resolveFenceBorderWidth = () => options.fenceBorderWidth ?? 2;
+  const resolveFenceBorderOpacity = () => options.fenceBorderOpacity ?? 0.9;
+  const resolveAlertColor = () => options.fenceAlertColor ?? "#ff3b30";
+  const resolveRippleColor = () => options.rippleColor ?? resolveAlertColor();
+  const resolveTacticalColor = () => options.tacticalColor ?? resolveAlertColor();
+  const setRippleData = (data) => {
+    const source = map.getSource(rippleSourceId);
+    if (source) {
+      source.setData(data);
+    }
+  };
+  const clearRipple = () => {
+    if (rippleFrameId) {
+      cancelAnimationFrame(rippleFrameId);
+      rippleFrameId = 0;
+    }
+    setRippleData(createFeatureCollection([]));
+  };
+  const startRipple = (center) => {
+    const radius = Math.max(20, options.rippleRadius ?? 800);
+    const count = Math.max(1, options.rippleCount ?? 3);
+    const duration = Math.max(400, options.rippleDuration ?? 1500);
+    const width = Math.max(1, options.rippleLineWidth ?? 3);
+    const startTime = performance.now();
+    const tick = (timestamp) => {
+      const elapsed = timestamp - startTime;
+      setRippleData(
+        createRippleData(center, radius, count, duration, width, elapsed)
+      );
+      rippleFrameId = requestAnimationFrame(tick);
+    };
+    rippleFrameId = requestAnimationFrame(tick);
+  };
+  const restoreFencePaint = () => {
+    if (!fenceReady) {
+      return;
+    }
+    const color = resolveFenceColor();
+    const fillColor = resolveFenceFillColor();
+    if (map.getLayer(fenceFillId)) {
+      map.setPaintProperty(fenceFillId, "fill-color", fillColor);
+      map.setPaintProperty(fenceFillId, "fill-opacity", resolveFenceFillOpacity());
+    }
+    if (map.getLayer(fenceLineId)) {
+      map.setPaintProperty(fenceLineId, "line-color", color);
+      map.setPaintProperty(fenceLineId, "line-width", resolveFenceBorderWidth());
+      map.setPaintProperty(
+        fenceLineId,
+        "line-opacity",
+        resolveFenceBorderOpacity()
+      );
+    }
+  };
+  const stopFenceFlash = () => {
+    if (fenceFlashTimer) {
+      clearInterval(fenceFlashTimer);
+      fenceFlashTimer = void 0;
+    }
+  };
+  const startFenceFlash = () => {
+    if (!fenceReady) {
+      return;
+    }
+    const alertColor = resolveAlertColor();
+    const interval = Math.max(60, options.fenceFlashInterval ?? 200);
+    let on = true;
+    if (map.getLayer(fenceFillId)) {
+      map.setPaintProperty(fenceFillId, "fill-color", alertColor);
+      map.setPaintProperty(fenceFillId, "fill-opacity", 0.42);
+    }
+    if (map.getLayer(fenceLineId)) {
+      map.setPaintProperty(fenceLineId, "line-color", alertColor);
+      map.setPaintProperty(fenceLineId, "line-opacity", 1);
+    }
+    fenceFlashTimer = setInterval(() => {
+      on = !on;
+      const fillOpacity = on ? 0.42 : 0.08;
+      const lineOpacity = on ? 1 : 0.4;
+      if (map.getLayer(fenceFillId)) {
+        map.setPaintProperty(fenceFillId, "fill-opacity", fillOpacity);
+      }
+      if (map.getLayer(fenceLineId)) {
+        map.setPaintProperty(fenceLineId, "line-opacity", lineOpacity);
+      }
+    }, interval);
+  };
+  const removeTacticalBox = () => {
+    if (tacticalTimer) {
+      clearInterval(tacticalTimer);
+      tacticalTimer = void 0;
+    }
+    if (tacticalBox) {
+      tacticalBox.remove();
+      tacticalBox = void 0;
+    }
+  };
+  const startTactical = () => {
+    const color = resolveTacticalColor();
+    const width = Math.max(1, options.tacticalBorderWidth ?? 4);
+    const inset = options.tacticalScope === "viewport" ? 12 : 0;
+    const interval = Math.max(60, options.fenceFlashInterval ?? 200);
+    const container = map.getContainer();
+    const box = document.createElement("div");
+    box.style.position = "absolute";
+    box.style.inset = `${inset}px`;
+    box.style.border = `${width}px solid ${color}`;
+    box.style.boxShadow = `inset 0 0 ${width * 6}px ${color}`;
+    box.style.pointerEvents = "none";
+    box.style.zIndex = "5";
+    box.style.opacity = "1";
+    container.appendChild(box);
+    tacticalBox = box;
+    let on = true;
+    tacticalTimer = setInterval(() => {
+      on = !on;
+      box.style.opacity = on ? "1" : "0.15";
+    }, interval);
+  };
+  const ensureFenceLayers = () => {
+    const polygons = toFencePolygons(options.fence);
+    if (polygons.length === 0) {
+      return;
+    }
+    const data = createFeatureCollection(
+      polygons.map((polygon) => createFeature(polygon, { kind: "fence" }))
+    );
+    if (!fenceReady) {
+      if (!map.getSource(fenceSourceId)) {
+        map.addSource(fenceSourceId, {
+          type: "geojson",
+          data
+        });
+      } else {
+        map.getSource(fenceSourceId).setData(data);
+      }
+      if (!map.getLayer(fenceFillId)) {
+        map.addLayer(
+          {
+            id: fenceFillId,
+            type: "fill",
+            source: fenceSourceId,
+            filter: ["==", ["get", "kind"], "fence"],
+            paint: {
+              "fill-color": resolveFenceFillColor(),
+              "fill-opacity": resolveFenceFillOpacity()
+            }
+          },
+          options.beforeId
+        );
+      }
+      if (!map.getLayer(fenceLineId)) {
+        map.addLayer(
+          {
+            id: fenceLineId,
+            type: "line",
+            source: fenceSourceId,
+            filter: ["==", ["get", "kind"], "fence"],
+            paint: {
+              "line-color": resolveFenceColor(),
+              "line-width": resolveFenceBorderWidth(),
+              "line-opacity": resolveFenceBorderOpacity()
+            }
+          },
+          options.beforeId
+        );
+      }
+      fenceReady = true;
+      setLayersVisibility(
+        map,
+        [fenceFillId, fenceLineId],
+        options.visible !== false
+      );
+    } else {
+      const source = map.getSource(fenceSourceId);
+      if (source) {
+        source.setData(data);
+      }
+      restoreFencePaint();
+    }
+  };
+  const ensureRippleSource = () => {
+    if (!map.getSource(rippleSourceId)) {
+      map.addSource(rippleSourceId, {
+        type: "geojson",
+        data: createFeatureCollection([])
+      });
+    }
+    if (!map.getLayer(rippleLineId)) {
+      map.addLayer(
+        {
+          id: rippleLineId,
+          type: "line",
+          source: rippleSourceId,
+          filter: ["==", ["get", "kind"], "ring"],
+          paint: {
+            "line-color": resolveRippleColor(),
+            "line-opacity": ["coalesce", ["get", "opacity"], 0.9],
+            "line-width": ["coalesce", ["get", "width"], 3]
+          }
+        },
+        options.beforeId
+      );
+      setLayersVisibility(map, [rippleLineId], options.visible !== false);
+    } else if (map.getLayer(rippleLineId)) {
+      map.setPaintProperty(rippleLineId, "line-color", resolveRippleColor());
+    }
+  };
+  const handleStyleData = () => {
+    if (!waitingForStyle || removed) {
+      return;
+    }
+    renderNow();
+  };
+  const renderNow = () => {
+    if (removed) {
+      return;
+    }
+    try {
+      ensureFenceLayers();
+      ensureRippleSource();
+      waitingForStyle = false;
+      map.off("styledata", handleStyleData);
+    } catch (error) {
+      if (!isStyleNotReadyError$1(error)) {
+        throw error;
+      }
+      if (!waitingForStyle) {
+        waitingForStyle = true;
+        map.on("styledata", handleStyleData);
+      }
+    }
+  };
+  const stopAll = () => {
+    stopFenceFlash();
+    clearRipple();
+    removeTacticalBox();
+    restoreFencePaint();
+  };
+  renderNow();
+  return {
+    id: effectId,
+    update(nextOptions) {
+      if (removed) {
+        return;
+      }
+      options = {
+        ...options,
+        ...nextOptions,
+        id: effectId
+      };
+      renderNow();
+    },
+    show() {
+      if (removed) {
+        return;
+      }
+      options = { ...options, visible: true };
+      setLayersVisibility(map, [fenceFillId, fenceLineId, rippleLineId], true);
+    },
+    hide() {
+      if (removed) {
+        return;
+      }
+      options = { ...options, visible: false };
+      setLayersVisibility(map, [fenceFillId, fenceLineId, rippleLineId], false);
+    },
+    remove() {
+      if (removed) {
+        return;
+      }
+      removed = true;
+      if (waitingForStyle) {
+        waitingForStyle = false;
+        map.off("styledata", handleStyleData);
+      }
+      stopAll();
+      removeLayerIfExists(map, rippleLineId);
+      removeLayerIfExists(map, fenceLineId);
+      removeLayerIfExists(map, fenceFillId);
+      removeSourceIfExists(map, rippleSourceId);
+      removeSourceIfExists(map, fenceSourceId);
+      fenceReady = false;
+    },
+    trigger(point) {
+      if (removed) {
+        return;
+      }
+      if (active) {
+        stopAll();
+      }
+      const center = point ?? options.center;
+      active = true;
+      if (options.fenceFlash !== false) {
+        startFenceFlash();
+      }
+      if (options.ripple !== false) {
+        startRipple(center);
+      }
+      if (options.tacticalFlash) {
+        startTactical();
+      }
+    },
+    reset() {
+      if (removed) {
+        return;
+      }
+      stopAll();
+      active = false;
+    },
+    isActive() {
+      return active;
+    }
+  };
+};
+const FENCE_ID_PROPERTY = "__electronic_fence_id";
+const clone = (value) => JSON.parse(JSON.stringify(value));
+const isSamePosition = (a, b) => a[0] === b[0] && a[1] === b[1];
+const normalizeRing = (ring) => {
+  const coordinates = ring.map((position) => {
+    const lng = Number(position[0]);
+    const lat = Number(position[1]);
+    if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
+      throw new Error("电子围栏坐标必须是有限数字。");
+    }
+    return [lng, lat];
+  });
+  if (coordinates.length < 3) {
+    throw new Error("电子围栏的每个环至少需要 3 个不同坐标。");
+  }
+  if (!isSamePosition(coordinates[0], coordinates[coordinates.length - 1])) {
+    coordinates.push([...coordinates[0]]);
+  }
+  if (coordinates.length < 4) {
+    throw new Error("电子围栏 Polygon 环无效。");
+  }
+  return coordinates;
+};
+const normalizeFeature = (feature) => {
+  if (typeof feature.id !== "string" || !feature.id.trim()) {
+    throw new Error("电子围栏必须提供非空字符串 id。");
+  }
+  if (!feature.geometry || feature.geometry.type !== "Polygon") {
+    throw new Error(`电子围栏 ${feature.id} 仅支持 Polygon geometry。`);
+  }
+  const properties = clone(feature.properties || {});
+  return {
+    type: "Feature",
+    id: feature.id,
+    geometry: {
+      type: "Polygon",
+      coordinates: feature.geometry.coordinates.map(normalizeRing)
+    },
+    properties
+  };
+};
+const mergeFeaturePatch = (feature, patch) => {
+  const currentProperties = feature.properties || {};
+  const nextProperties = patch.properties || {};
+  const nextStyle = nextProperties.style ? {
+    ...currentProperties.style || {},
+    ...nextProperties.style
+  } : currentProperties.style;
+  return normalizeFeature({
+    ...clone(feature),
+    geometry: patch.geometry ? clone(patch.geometry) : clone(feature.geometry),
+    properties: {
+      ...clone(currentProperties),
+      ...clone(nextProperties),
+      ...nextStyle ? { style: nextStyle } : {}
+    }
+  });
+};
+class ElectronicFenceStore {
+  constructor() {
+    this.features = /* @__PURE__ */ new Map();
+    this.states = /* @__PURE__ */ new Map();
+    this.activeIds = /* @__PURE__ */ new Set();
+    this.hiddenIds = /* @__PURE__ */ new Set();
+  }
+  setData(data) {
+    const nextFeatures = /* @__PURE__ */ new Map();
+    data.features.forEach((feature) => {
+      const normalized = normalizeFeature(
+        feature
+      );
+      if (nextFeatures.has(normalized.id)) {
+        throw new Error(`电子围栏 id 重复：${normalized.id}`);
+      }
+      nextFeatures.set(normalized.id, normalized);
+    });
+    this.features = nextFeatures;
+    this.states.clear();
+    this.activeIds.clear();
+    this.hiddenIds.clear();
+  }
+  add(feature) {
+    const normalized = normalizeFeature(feature);
+    if (this.features.has(normalized.id)) {
+      throw new Error(`电子围栏 id 已存在：${normalized.id}`);
+    }
+    this.features.set(normalized.id, normalized);
+    return normalized.id;
+  }
+  update(id, patch) {
+    const feature = this.requireFeature(id);
+    this.features.set(id, mergeFeaturePatch(feature, patch));
+  }
+  remove(id) {
+    this.requireFeature(id);
+    this.features.delete(id);
+    this.states.delete(id);
+    this.activeIds.delete(id);
+    this.hiddenIds.delete(id);
+  }
+  clear() {
+    this.features.clear();
+    this.states.clear();
+    this.activeIds.clear();
+    this.hiddenIds.clear();
+  }
+  setActive(id, active) {
+    this.requireFeature(id);
+    if (active) {
+      this.activeIds.add(id);
+    } else {
+      this.activeIds.delete(id);
+    }
+  }
+  setState(id, state) {
+    this.requireFeature(id);
+    if (state !== "normal" && state !== "warning" && state !== "alarm" && state !== "disabled") {
+      throw new Error(`电子围栏 ${id} 的渲染状态无效。`);
+    }
+    if (state === "normal") {
+      this.states.delete(id);
+    } else {
+      this.states.set(id, state);
+    }
+  }
+  setVisible(id, visible) {
+    this.requireFeature(id);
+    if (visible) {
+      this.hiddenIds.delete(id);
+    } else {
+      this.hiddenIds.add(id);
+    }
+  }
+  isActive(id) {
+    return this.activeIds.has(id);
+  }
+  getState(id) {
+    this.requireFeature(id);
+    return this.states.get(id) || "normal";
+  }
+  get(id) {
+    const feature = this.features.get(id);
+    return feature ? clone(feature) : void 0;
+  }
+  values() {
+    return Array.from(this.features.values());
+  }
+  visibleValues() {
+    return this.values().filter((feature) => !this.hiddenIds.has(feature.id));
+  }
+  requireFeature(id) {
+    const feature = this.features.get(id);
+    if (!feature) {
+      throw new Error(`电子围栏不存在：${id}`);
+    }
+    return feature;
+  }
+}
+const resolveFiniteNumber = (value, fallback, name, positive = false) => {
+  const resolved = value === void 0 ? fallback : Number(value);
+  if (!Number.isFinite(resolved) || positive && resolved <= 0) {
+    throw new Error(`${name} 必须是${positive ? "大于 0 的" : "有限"}数字。`);
+  }
+  return resolved;
+};
+const validateFenceDefaults = (id, defaults) => {
+  if (!id.trim()) {
+    throw new Error("电子围栏插件 id 不能为空。");
+  }
+  resolveFiniteNumber(defaults.baseHeight, 0, "defaults.baseHeight");
+  resolveFiniteNumber(defaults.height, 0, "defaults.height", true);
+  resolveFiniteNumber(defaults.thickness, 1, "defaults.thickness", true);
+};
+const resolveFenceDimensions = (defaults) => ({
+  baseHeight: resolveFiniteNumber(
+    defaults.baseHeight,
+    0,
+    "defaults.baseHeight"
+  ),
+  height: resolveFiniteNumber(
+    defaults.height,
+    0,
+    "defaults.height",
+    true
+  ),
+  thickness: resolveFiniteNumber(
+    defaults.thickness,
+    1,
+    "defaults.thickness",
+    true
+  )
+});
+const resolveFenceVisualState = (status, active) => {
+  if (status !== "normal") {
+    return status;
+  }
+  return active ? "active" : "normal";
+};
+const resolveFenceStyle = (options) => {
+  var _a, _b;
+  const normal = {
+    ...options.defaults.normal,
+    ...((_a = options.overrides) == null ? void 0 : _a.normal) || {}
+  };
+  const stateStyle = options.state === "normal" ? {} : {
+    ...options.defaults[options.state],
+    ...((_b = options.overrides) == null ? void 0 : _b[options.state]) || {}
+  };
+  return {
+    ...normal,
+    ...stateStyle
+  };
+};
+const createFenceSegments = (geometry, thickness) => {
+  const halfThickness = thickness / 2;
+  const segments = [];
+  geometry.coordinates.forEach((ring) => {
+    const rawSegments = [];
+    for (let index = 0; index < ring.length - 1; index += 1) {
+      const start = [ring[index][0], ring[index][1]];
+      const end = [ring[index + 1][0], ring[index + 1][1]];
+      const length = getDistance(start, end);
+      if (length < 0.01) {
+        continue;
+      }
+      rawSegments.push({
+        start,
+        end,
+        length,
+        bearing: getBearing(start, end)
+      });
+    }
+    const totalLength = rawSegments.reduce(
+      (sum, segment) => sum + segment.length,
+      0
+    );
+    let travelled = 0;
+    rawSegments.forEach((segment) => {
+      const extendedStart = getDestination(
+        segment.start,
+        halfThickness,
+        segment.bearing + 180
+      );
+      const extendedEnd = getDestination(
+        segment.end,
+        halfThickness,
+        segment.bearing
+      );
+      segments.push({
+        startLeft: getDestination(
+          extendedStart,
+          halfThickness,
+          segment.bearing - 90
+        ),
+        startRight: getDestination(
+          extendedStart,
+          halfThickness,
+          segment.bearing + 90
+        ),
+        endLeft: getDestination(
+          extendedEnd,
+          halfThickness,
+          segment.bearing - 90
+        ),
+        endRight: getDestination(
+          extendedEnd,
+          halfThickness,
+          segment.bearing + 90
+        ),
+        startProgress: totalLength ? travelled / totalLength : 0,
+        endProgress: totalLength ? (travelled + segment.length) / totalLength : 1
+      });
+      travelled += segment.length;
+    });
+  });
+  return segments;
+};
+const createFenceWallMultiPolygon = (segments) => ({
+  type: "MultiPolygon",
+  coordinates: segments.map((segment) => [
+    [
+      segment.startLeft,
+      segment.endLeft,
+      segment.endRight,
+      segment.startRight,
+      segment.startLeft
+    ]
+  ])
+});
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const parseFenceColor = (value) => {
+  const color = value.trim().toLowerCase();
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    const expanded = hex.length === 3 || hex.length === 4 ? hex.split("").map((character) => character + character).join("") : hex;
+    if (expanded.length === 6 || expanded.length === 8) {
+      const number = Number.parseInt(expanded, 16);
+      if (Number.isFinite(number)) {
+        return [
+          (number >> (expanded.length === 8 ? 24 : 16) & 255) / 255,
+          (number >> (expanded.length === 8 ? 16 : 8) & 255) / 255,
+          (number >> (expanded.length === 8 ? 8 : 0) & 255) / 255,
+          expanded.length === 8 ? (number & 255) / 255 : 1
+        ];
+      }
+    }
+  }
+  const rgbMatch = color.match(/^rgba?\(([^)]+)\)$/);
+  if (rgbMatch) {
+    const parts = rgbMatch[1].split(",").map((part) => Number(part.trim()));
+    if (parts.length >= 3 && parts.every((part) => Number.isFinite(part))) {
+      return [
+        clamp(parts[0] / 255, 0, 1),
+        clamp(parts[1] / 255, 0, 1),
+        clamp(parts[2] / 255, 0, 1),
+        clamp(parts[3] ?? 1, 0, 1)
+      ];
+    }
+  }
+  throw new Error(`暂不支持的围栏颜色格式：${value}`);
+};
+const toFenceRgbaCss = (value, opacity = 1) => {
+  const [red, green, blue, alpha] = parseFenceColor(value);
+  return `rgba(${Math.round(red * 255)}, ${Math.round(green * 255)}, ${Math.round(
+    blue * 255
+  )}, ${clamp(alpha * opacity, 0, 1)})`;
+};
+const clampFenceNumber = clamp;
+const createFenceInteractionData = (store) => ({
+  type: "FeatureCollection",
+  features: store.visibleValues().map((feature) => ({
+    type: "Feature",
+    id: `${feature.id}:interaction`,
+    geometry: clone(feature.geometry),
+    properties: {
+      [FENCE_ID_PROPERTY]: feature.id
+    }
+  }))
+});
+const bindFenceInteractions = (options) => {
+  let hoveredId;
+  const getHitId = (event) => {
+    var _a;
+    if (!options.map.getLayer(options.layerId)) {
+      return void 0;
+    }
+    const feature = options.map.queryRenderedFeatures(event.point, {
+      layers: [options.layerId]
+    })[0];
+    const id = (_a = feature == null ? void 0 : feature.properties) == null ? void 0 : _a[FENCE_ID_PROPERTY];
+    return typeof id === "string" ? id : void 0;
+  };
+  const fire = (type, id, event) => {
+    const feature = options.store.get(id);
+    if (!feature) {
+      return;
+    }
+    options.map.fire(`fence.${type}`, {
+      instanceId: options.instanceId,
+      renderer: options.renderer,
+      id,
+      feature,
+      originalEvent: event
+    });
+  };
+  const handleClick = (event) => {
+    const id = getHitId(event);
+    if (id) {
+      fire("click", id, event);
+    }
+  };
+  const handleMouseMove = (event) => {
+    const nextId = getHitId(event);
+    if (nextId === hoveredId) {
+      return;
+    }
+    if (hoveredId) {
+      fire("mouseleave", hoveredId, event);
+    }
+    hoveredId = nextId;
+    if (hoveredId) {
+      fire("mouseenter", hoveredId, event);
+    }
+  };
+  const handleMouseOut = (event) => {
+    if (!hoveredId) {
+      return;
+    }
+    fire("mouseleave", hoveredId, event);
+    hoveredId = void 0;
+  };
+  options.map.on("click", handleClick);
+  options.map.on("mousemove", handleMouseMove);
+  options.map.on("mouseout", handleMouseOut);
+  return () => {
+    options.map.off("click", handleClick);
+    options.map.off("mousemove", handleMouseMove);
+    options.map.off("mouseout", handleMouseOut);
+  };
+};
+const isStyleNotReadyError = (error) => error instanceof Error && error.message === "Style is not done loading.";
+const setFenceLayerVisibility = (map, layerIds, visible) => {
+  layerIds.forEach((layerId) => {
+    if (map.getLayer(layerId)) {
+      map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+    }
+  });
+};
+const createElectronicFenceController = (options) => {
+  let destroyed = false;
+  const assertAlive = () => {
+    if (destroyed) {
+      throw new Error(`电子围栏插件 ${options.id} 已销毁。`);
+    }
+  };
+  return {
+    id: options.id,
+    renderer: options.renderer,
+    setData(data) {
+      assertAlive();
+      options.store.setData(data);
+      options.refresh();
+    },
+    add(feature) {
+      assertAlive();
+      const id = options.store.add(feature);
+      options.refresh();
+      return id;
+    },
+    update(id, patch) {
+      assertAlive();
+      options.store.update(id, patch);
+      options.refresh();
+    },
+    removeFeature(id) {
+      assertAlive();
+      options.store.remove(id);
+      options.refresh();
+    },
+    clear() {
+      assertAlive();
+      options.store.clear();
+      options.refresh();
+    },
+    setFeatureState(id, state) {
+      assertAlive();
+      options.store.setState(id, state);
+      options.refresh();
+    },
+    setFeatureActive(id, active) {
+      assertAlive();
+      options.store.setActive(id, active);
+      options.refresh();
+    },
+    setFeatureVisible(id, visible) {
+      assertAlive();
+      options.store.setVisible(id, visible);
+      options.refresh();
+    },
+    show() {
+      assertAlive();
+      options.setPluginVisible(true);
+    },
+    hide() {
+      assertAlive();
+      options.setPluginVisible(false);
+    },
+    destroy() {
+      if (destroyed) {
+        return;
+      }
+      destroyed = true;
+      options.destroy();
+    }
+  };
+};
+const KIND_PROPERTY = "__electronic_fence_kind";
+const COLOR_PROPERTY = "__electronic_fence_color";
+const OUTLINE_COLOR_PROPERTY = "__electronic_fence_outline_color";
+const OUTLINE_WIDTH_PROPERTY = "__electronic_fence_outline_width";
+const BASE_PROPERTY = "__electronic_fence_base";
+const TOP_PROPERTY = "__electronic_fence_top";
+const DEFAULT_STYLES$1 = {
+  normal: {
+    color: "#d8b4fe",
+    opacity: 0.28,
+    outlineColor: "#f5e9ff",
+    outlineWidth: 1.5
+  },
+  active: {
+    color: "#c084fc",
+    opacity: 0.42,
+    outlineColor: "#ffffff",
+    outlineWidth: 2.5
+  },
+  warning: {
+    color: "#f59e0b",
+    opacity: 0.38,
+    outlineColor: "#fde68a",
+    outlineWidth: 2
+  },
+  alarm: {
+    color: "#ef4444",
+    opacity: 0.48,
+    outlineColor: "#ffffff",
+    outlineWidth: 2.5
+  },
+  disabled: {
+    color: "#94a3b8",
+    opacity: 0.16,
+    outlineColor: "#cbd5e1",
+    outlineWidth: 1
+  }
+};
+const buildStandardFenceData = (store, options) => {
+  const features = [];
+  const dimensions = resolveFenceDimensions(options.defaults);
+  store.visibleValues().forEach((feature) => {
+    const state = resolveFenceVisualState(
+      store.getState(feature.id),
+      store.isActive(feature.id)
+    );
+    const style = resolveFenceStyle({
+      defaults: DEFAULT_STYLES$1,
+      overrides: options.styles,
+      state
+    });
+    const segments = createFenceSegments(feature.geometry, dimensions.thickness);
+    const commonProperties = {
+      [FENCE_ID_PROPERTY]: feature.id,
+      [COLOR_PROPERTY]: toFenceRgbaCss(
+        style.color,
+        clampFenceNumber(style.opacity, 0, 1)
+      ),
+      [OUTLINE_COLOR_PROPERTY]: toFenceRgbaCss(style.outlineColor),
+      [OUTLINE_WIDTH_PROPERTY]: Math.max(0, style.outlineWidth),
+      [BASE_PROPERTY]: dimensions.baseHeight,
+      [TOP_PROPERTY]: dimensions.baseHeight + dimensions.height
+    };
+    if (segments.length) {
+      features.push({
+        type: "Feature",
+        id: `${feature.id}:wall`,
+        geometry: createFenceWallMultiPolygon(segments),
+        properties: {
+          ...commonProperties,
+          [KIND_PROPERTY]: "wall"
+        }
+      });
+    }
+    features.push({
+      type: "Feature",
+      id: `${feature.id}:boundary`,
+      geometry: feature.geometry,
+      properties: {
+        ...commonProperties,
+        [KIND_PROPERTY]: "boundary"
+      }
+    });
+  });
+  return {
+    type: "FeatureCollection",
+    features
+  };
+};
+const addStandardElectronicFenceLayer = (map, options) => {
+  validateFenceDefaults(options.id, options.defaults);
+  const store = new ElectronicFenceStore();
+  const sourceId = `${options.id}-standard-source`;
+  const extrusionLayerId = `${options.id}-standard-extrusion`;
+  const outlineLayerId = `${options.id}-standard-outline`;
+  const interactionLayerId = `${options.id}-standard-interaction`;
+  const layerIds = [
+    extrusionLayerId,
+    outlineLayerId,
+    ...options.interactive === false ? [] : [interactionLayerId]
+  ];
+  let data = buildStandardFenceData(store, options);
+  let visible = options.visible !== false;
+  let destroyed = false;
+  const ensureLayers = () => {
+    if (destroyed) {
+      return;
+    }
+    try {
+      if (!map.getSource(sourceId)) {
+        map.addSource(sourceId, {
+          type: "geojson",
+          data
+        });
+      }
+      if (!map.getLayer(extrusionLayerId)) {
+        map.addLayer(
+          {
+            id: extrusionLayerId,
+            type: "fill-extrusion",
+            source: sourceId,
+            filter: ["==", ["get", KIND_PROPERTY], "wall"],
+            paint: {
+              "fill-extrusion-color": ["get", COLOR_PROPERTY],
+              "fill-extrusion-opacity": 1,
+              "fill-extrusion-base": ["get", BASE_PROPERTY],
+              "fill-extrusion-height": ["get", TOP_PROPERTY],
+              "fill-extrusion-vertical-gradient": true
+            }
+          },
+          options.beforeId
+        );
+      }
+      if (!map.getLayer(outlineLayerId)) {
+        map.addLayer(
+          {
+            id: outlineLayerId,
+            type: "line",
+            source: sourceId,
+            filter: ["==", ["get", KIND_PROPERTY], "boundary"],
+            paint: {
+              "line-color": ["get", OUTLINE_COLOR_PROPERTY],
+              "line-width": ["get", OUTLINE_WIDTH_PROPERTY],
+              "line-opacity": 1
+            }
+          },
+          options.beforeId
+        );
+      }
+      if (options.interactive !== false && !map.getLayer(interactionLayerId)) {
+        map.addLayer(
+          {
+            id: interactionLayerId,
+            type: "fill",
+            source: sourceId,
+            filter: ["==", ["get", KIND_PROPERTY], "boundary"],
+            paint: {
+              "fill-color": "#000000",
+              "fill-opacity": 0
+            }
+          },
+          options.beforeId
+        );
+      }
+      setFenceLayerVisibility(map, layerIds, visible);
+    } catch (error) {
+      if (!isStyleNotReadyError(error)) {
+        throw error;
+      }
+    }
+  };
+  const refresh = () => {
+    data = buildStandardFenceData(store, options);
+    const source = map.getSource(sourceId);
+    if (source) {
+      source.setData(data);
+    } else {
+      ensureLayers();
+    }
+  };
+  const handleStyleData = () => {
+    ensureLayers();
+  };
+  map.on("styledata", handleStyleData);
+  ensureLayers();
+  const unbindInteractions = options.interactive === false ? () => void 0 : bindFenceInteractions({
+    map,
+    instanceId: options.id,
+    renderer: "standard",
+    layerId: interactionLayerId,
+    store
+  });
+  return createElectronicFenceController({
+    id: options.id,
+    renderer: "standard",
+    store,
+    refresh,
+    setPluginVisible(nextVisible) {
+      visible = nextVisible;
+      ensureLayers();
+      setFenceLayerVisibility(map, layerIds, visible);
+    },
+    destroy() {
+      destroyed = true;
+      map.off("styledata", handleStyleData);
+      unbindInteractions();
+      [...layerIds].reverse().forEach((layerId) => {
+        if (map.getLayer(layerId)) {
+          map.removeLayer(layerId);
+        }
+      });
+      if (map.getSource(sourceId)) {
+        map.removeSource(sourceId);
+      }
+    }
+  });
+};
+const FLOATS_PER_VERTEX = 19;
+const GLOW_LAYERS = [
+  { thicknessScale: 0.08, opacity: 1 },
+  { thicknessScale: 0.22, opacity: 0.56 },
+  { thicknessScale: 0.45, opacity: 0.28 },
+  { thicknessScale: 0.8, opacity: 0.12 },
+  { thicknessScale: 1.3, opacity: 0.045 }
+];
+const DEFAULT_STYLES = {
+  normal: {
+    color: "#d8b4fe",
+    opacity: 0.2,
+    outlineColor: "#f5e9ff",
+    outlineWidth: 1.5,
+    glowStrength: 1,
+    flowColor: "#ffffff",
+    flowCount: 3,
+    flowLineStyle: "dashed",
+    flowWidth: 0.18
+  },
+  active: {
+    color: "#e9d5ff",
+    opacity: 0.28,
+    outlineColor: "#ffffff",
+    outlineWidth: 2.5,
+    glowStrength: 1.25,
+    flowColor: "#ffffff",
+    flowCount: 3,
+    flowLineStyle: "dashed",
+    flowWidth: 0.2
+  },
+  warning: {
+    color: "#f59e0b",
+    opacity: 0.25,
+    outlineColor: "#fde68a",
+    outlineWidth: 2,
+    glowStrength: 1.1,
+    flowColor: "#ffffff",
+    flowCount: 4,
+    flowLineStyle: "dashed",
+    flowWidth: 0.18
+  },
+  alarm: {
+    color: "#ef4444",
+    opacity: 0.3,
+    outlineColor: "#ffffff",
+    outlineWidth: 2.5,
+    glowStrength: 1.35,
+    flowColor: "#ffffff",
+    flowCount: 4,
+    flowLineStyle: "dashed",
+    flowWidth: 0.2
+  },
+  disabled: {
+    color: "#94a3b8",
+    opacity: 0.12,
+    outlineColor: "#cbd5e1",
+    outlineWidth: 1,
+    glowStrength: 0,
+    flowColor: "#ffffff",
+    flowCount: 0,
+    flowLineStyle: "dashed",
+    flowWidth: 0
+  }
+};
+const resolveAnimationOptions = (options) => ({
+  enabled: (options == null ? void 0 : options.enabled) ?? true,
+  fps: Math.round(clampFenceNumber((options == null ? void 0 : options.fps) ?? 30, 1, 60)),
+  speed: Math.max(0, (options == null ? void 0 : options.speed) ?? 0.35),
+  scope: (options == null ? void 0 : options.scope) ?? "all"
+});
+const toMercator = (lngLat, altitude) => {
+  const coordinate = maplibregl.MercatorCoordinate.fromLngLat(lngLat, altitude);
+  return [coordinate.x, coordinate.y, coordinate.z];
+};
+const subtract = (a, b) => [
+  a[0] - b[0],
+  a[1] - b[1],
+  a[2] - b[2]
+];
+const normalize = (vector) => {
+  const length = Math.hypot(vector[0], vector[1], vector[2]) || 1;
+  return [vector[0] / length, vector[1] / length, vector[2] / length];
+};
+const getNormal = (a, b, c) => {
+  const ab = subtract(b, a);
+  const ac = subtract(c, a);
+  return normalize([
+    ab[1] * ac[2] - ab[2] * ac[1],
+    ab[2] * ac[0] - ab[0] * ac[2],
+    ab[0] * ac[1] - ab[1] * ac[0]
+  ]);
+};
+const pushVertex = (target, position, normal, heightRatio, pathProgress, style) => {
+  target.push(
+    ...position,
+    ...normal,
+    heightRatio,
+    pathProgress,
+    ...style.color,
+    style.flowColor[0],
+    style.flowColor[1],
+    style.flowColor[2],
+    style.glowStrength,
+    style.flowWidth,
+    style.flowCount,
+    style.flowLineStyle
+  );
+};
+const pushQuad = (target, positions, heightRatios, pathProgresses, style) => {
+  const normal = getNormal(positions[0], positions[1], positions[2]);
+  const indices = [0, 1, 2, 0, 2, 3];
+  indices.forEach((index) => {
+    pushVertex(
+      target,
+      positions[index],
+      normal,
+      heightRatios[index],
+      pathProgresses[index],
+      style
+    );
+  });
+};
+const appendSegmentPrism = (target, segment, baseHeight, height, style) => {
+  const topHeight = baseHeight + height;
+  const startLeftBottom = toMercator(segment.startLeft, baseHeight);
+  const startRightBottom = toMercator(segment.startRight, baseHeight);
+  const endLeftBottom = toMercator(segment.endLeft, baseHeight);
+  const endRightBottom = toMercator(segment.endRight, baseHeight);
+  const startLeftTop = toMercator(segment.startLeft, topHeight);
+  const startRightTop = toMercator(segment.startRight, topHeight);
+  const endLeftTop = toMercator(segment.endLeft, topHeight);
+  const endRightTop = toMercator(segment.endRight, topHeight);
+  pushQuad(
+    target,
+    [startLeftTop, endLeftTop, endRightTop, startRightTop],
+    [1, 1, 1, 1],
+    [
+      segment.startProgress,
+      segment.endProgress,
+      segment.endProgress,
+      segment.startProgress
+    ],
+    style
+  );
+  pushQuad(
+    target,
+    [startLeftBottom, endLeftBottom, endLeftTop, startLeftTop],
+    [0, 0, 1, 1],
+    [
+      segment.startProgress,
+      segment.endProgress,
+      segment.endProgress,
+      segment.startProgress
+    ],
+    style
+  );
+  pushQuad(
+    target,
+    [endRightBottom, startRightBottom, startRightTop, endRightTop],
+    [0, 0, 1, 1],
+    [
+      segment.endProgress,
+      segment.startProgress,
+      segment.startProgress,
+      segment.endProgress
+    ],
+    style
+  );
+};
+const isHighlighted = (state) => state === "active" || state === "warning" || state === "alarm";
+const createVertexStyle = (style, flowEnabled) => {
+  const color = parseFenceColor(style.color);
+  const flowColor = parseFenceColor(style.flowColor);
+  const flowCount = flowEnabled && style.flowCount > 0 ? Math.round(clampFenceNumber(style.flowCount, 1, 8)) : 0;
+  return {
+    color: [
+      color[0],
+      color[1],
+      color[2],
+      clampFenceNumber(color[3] * style.opacity, 0, 1)
+    ],
+    flowColor,
+    glowStrength: clampFenceNumber(style.glowStrength, 0, 4),
+    flowCount,
+    flowLineStyle: style.flowLineStyle === "solid" ? 0 : 1,
+    flowWidth: flowCount > 0 ? clampFenceNumber(style.flowWidth, 0.01, 0.49) : 0
+  };
+};
+const buildWebGLFenceGeometry = (store, options, animation) => {
+  const glowVertexLayers = GLOW_LAYERS.map(() => []);
+  const bodyVertices = [];
+  const dimensions = resolveFenceDimensions(options.defaults);
+  let animated = false;
+  store.visibleValues().forEach((feature) => {
+    const active = store.isActive(feature.id);
+    const state = resolveFenceVisualState(store.getState(feature.id), active);
+    const style = resolveFenceStyle({
+      defaults: DEFAULT_STYLES,
+      overrides: options.styles,
+      state
+    });
+    const flowEnabled = animation.enabled && (animation.scope === "all" || isHighlighted(state));
+    const vertexStyle = createVertexStyle(style, flowEnabled);
+    const bodySegments = createFenceSegments(
+      feature.geometry,
+      dimensions.thickness
+    );
+    bodySegments.forEach((segment) => {
+      appendSegmentPrism(
+        bodyVertices,
+        segment,
+        dimensions.baseHeight,
+        dimensions.height,
+        vertexStyle
+      );
+    });
+    if (vertexStyle.glowStrength > 0) {
+      GLOW_LAYERS.forEach((glowLayer, index) => {
+        const glowThickness = dimensions.thickness * (1 + Math.min(vertexStyle.glowStrength, 2) * glowLayer.thicknessScale);
+        const glowSegments = createFenceSegments(
+          feature.geometry,
+          glowThickness
+        );
+        glowSegments.forEach((segment) => {
+          appendSegmentPrism(
+            glowVertexLayers[index],
+            segment,
+            dimensions.baseHeight,
+            dimensions.height,
+            vertexStyle
+          );
+        });
+      });
+    }
+    animated || (animated = vertexStyle.flowCount > 0 && vertexStyle.flowWidth > 0);
+  });
+  const glowFloatCount = glowVertexLayers.reduce(
+    (sum, layerVertices) => sum + layerVertices.length,
+    0
+  );
+  const vertices = new Float32Array(glowFloatCount + bodyVertices.length);
+  const glowPasses = [];
+  let floatOffset = 0;
+  glowVertexLayers.forEach((layerVertices, index) => {
+    const count = layerVertices.length / FLOATS_PER_VERTEX;
+    if (count > 0) {
+      glowPasses.push({
+        first: floatOffset / FLOATS_PER_VERTEX,
+        count,
+        opacity: GLOW_LAYERS[index].opacity
+      });
+    }
+    vertices.set(layerVertices, floatOffset);
+    floatOffset += layerVertices.length;
+  });
+  const bodyFirst = floatOffset / FLOATS_PER_VERTEX;
+  vertices.set(bodyVertices, floatOffset);
+  return {
+    vertices,
+    glowPasses,
+    bodyFirst,
+    bodyVertexCount: bodyVertices.length / FLOATS_PER_VERTEX,
+    animated
+  };
+};
+const createShader = (gl, type, source) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("无法创建电子围栏 WebGL shader。");
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const message = gl.getShaderInfoLog(shader) || "未知 shader 编译错误";
+    gl.deleteShader(shader);
+    throw new Error(`电子围栏 WebGL shader 编译失败：${message}`);
+  }
+  return shader;
+};
+const createProgram = (gl) => {
+  const isWebGL2 = typeof WebGL2RenderingContext !== "undefined" && gl instanceof WebGL2RenderingContext;
+  const vertexSource = isWebGL2 ? `#version 300 es
+      precision highp float;
+      in vec3 a_position;
+      in vec3 a_normal;
+      in float a_height_ratio;
+      in float a_path_progress;
+      in vec4 a_color;
+      in vec3 a_flow_color;
+      in float a_glow_strength;
+      in float a_flow_width;
+      in float a_flow_count;
+      in float a_flow_line_style;
+      uniform mat4 u_matrix;
+      out vec3 v_normal;
+      out float v_height_ratio;
+      out float v_path_progress;
+      out vec4 v_color;
+      out vec3 v_flow_color;
+      out float v_glow_strength;
+      out float v_flow_width;
+      out float v_flow_count;
+      out float v_flow_line_style;
+      void main() {
+        gl_Position = u_matrix * vec4(a_position, 1.0);
+        v_normal = a_normal;
+        v_height_ratio = a_height_ratio;
+        v_path_progress = a_path_progress;
+        v_color = a_color;
+        v_flow_color = a_flow_color;
+        v_glow_strength = a_glow_strength;
+        v_flow_width = a_flow_width;
+        v_flow_count = a_flow_count;
+        v_flow_line_style = a_flow_line_style;
+      }
+    ` : `
+      precision highp float;
+      attribute vec3 a_position;
+      attribute vec3 a_normal;
+      attribute float a_height_ratio;
+      attribute float a_path_progress;
+      attribute vec4 a_color;
+      attribute vec3 a_flow_color;
+      attribute float a_glow_strength;
+      attribute float a_flow_width;
+      attribute float a_flow_count;
+      attribute float a_flow_line_style;
+      uniform mat4 u_matrix;
+      varying vec3 v_normal;
+      varying float v_height_ratio;
+      varying float v_path_progress;
+      varying vec4 v_color;
+      varying vec3 v_flow_color;
+      varying float v_glow_strength;
+      varying float v_flow_width;
+      varying float v_flow_count;
+      varying float v_flow_line_style;
+      void main() {
+        gl_Position = u_matrix * vec4(a_position, 1.0);
+        v_normal = a_normal;
+        v_height_ratio = a_height_ratio;
+        v_path_progress = a_path_progress;
+        v_color = a_color;
+        v_flow_color = a_flow_color;
+        v_glow_strength = a_glow_strength;
+        v_flow_width = a_flow_width;
+        v_flow_count = a_flow_count;
+        v_flow_line_style = a_flow_line_style;
+      }
+    `;
+  const fragmentBody = `
+      precision highp float;
+      uniform float u_time;
+      uniform float u_speed;
+      uniform float u_animation_enabled;
+      uniform float u_glow_pass;
+      uniform float u_glow_opacity;
+      VARYING vec3 v_normal;
+      VARYING float v_height_ratio;
+      VARYING float v_path_progress;
+      VARYING vec4 v_color;
+      VARYING vec3 v_flow_color;
+      VARYING float v_glow_strength;
+      VARYING float v_flow_width;
+      VARYING float v_flow_count;
+      VARYING float v_flow_line_style;
+      void main() {
+        float bandCore = 0.0;
+        float bandGlow = 0.0;
+        float verticalFace = 1.0 - smoothstep(
+          0.82,
+          0.98,
+          abs(normalize(v_normal).z)
+        );
+
+        if (
+          u_animation_enabled > 0.5 &&
+          v_flow_count > 0.5 &&
+          v_flow_width > 0.0001
+        ) {
+          float count = max(v_flow_count, 1.0);
+          float phase = fract(
+            v_height_ratio * count + u_time * u_speed * count
+          );
+          float bandDistance = abs(phase - 0.5);
+          float dashPhase = fract(
+            v_path_progress * 36.0 - u_time * u_speed * 2.4
+          );
+          float dash = smoothstep(0.02, 0.1, dashPhase) *
+            (1.0 - smoothstep(0.62, 0.74, dashPhase));
+          float linePattern = v_flow_line_style > 0.5 ? dash : 1.0;
+
+          bandCore = 1.0 - smoothstep(
+            max(v_flow_width * 0.08, 0.001),
+            max(v_flow_width * 0.42, 0.003),
+            bandDistance
+          );
+          float glowDistance = bandDistance / max(v_flow_width, 0.001);
+          bandGlow = exp(
+            -glowDistance * glowDistance * 2.6
+          );
+          bandCore *= linePattern * verticalFace;
+          bandGlow *= verticalFace;
+        }
+
+        if (u_glow_pass > 0.5) {
+          float glowAlpha = clamp(
+            (v_color.a * 0.003 + bandGlow * 0.085) *
+              v_glow_strength * u_glow_opacity,
+            0.0,
+            0.14
+          );
+          OUTPUT_COLOR = vec4(v_color.rgb, glowAlpha);
+          return;
+        }
+
+        float faceLight = 0.88 + 0.12 * abs(normalize(v_normal).z);
+        vec3 bodyColor = v_color.rgb * faceLight;
+        vec3 color = mix(bodyColor, v_flow_color, bandCore);
+        float alpha = clamp(
+          v_color.a + bandCore * 0.68,
+          0.0,
+          1.0
+        );
+        OUTPUT_COLOR = vec4(color, alpha);
+      }
+    `;
+  const replaceShaderToken = (source, token, value) => source.split(token).join(value);
+  const fragmentSource = isWebGL2 ? `#version 300 es
+      ${replaceShaderToken(
+    replaceShaderToken(fragmentBody, "VARYING", "in"),
+    "OUTPUT_COLOR",
+    "fragmentColor"
+  ).replace(
+    "precision highp float;",
+    "precision highp float;\n      out vec4 fragmentColor;"
+  )}
+    ` : replaceShaderToken(
+    replaceShaderToken(fragmentBody, "VARYING", "varying"),
+    "OUTPUT_COLOR",
+    "gl_FragColor"
+  );
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
+  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  const program = gl.createProgram();
+  if (!program) {
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    throw new Error("无法创建电子围栏 WebGL program。");
+  }
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const message = gl.getProgramInfoLog(program) || "未知 program 链接错误";
+    gl.deleteProgram(program);
+    throw new Error(`电子围栏 WebGL program 链接失败：${message}`);
+  }
+  return program;
+};
+const requireUniform = (gl, program, name) => {
+  const location = gl.getUniformLocation(program, name);
+  if (!location) {
+    throw new Error(`电子围栏 WebGL uniform 不存在：${name}`);
+  }
+  return location;
+};
+const createLocations = (gl, program) => ({
+  position: gl.getAttribLocation(program, "a_position"),
+  normal: gl.getAttribLocation(program, "a_normal"),
+  heightRatio: gl.getAttribLocation(program, "a_height_ratio"),
+  pathProgress: gl.getAttribLocation(program, "a_path_progress"),
+  color: gl.getAttribLocation(program, "a_color"),
+  flowColor: gl.getAttribLocation(program, "a_flow_color"),
+  glowStrength: gl.getAttribLocation(program, "a_glow_strength"),
+  flowWidth: gl.getAttribLocation(program, "a_flow_width"),
+  flowCount: gl.getAttribLocation(program, "a_flow_count"),
+  flowLineStyle: gl.getAttribLocation(program, "a_flow_line_style"),
+  matrix: requireUniform(gl, program, "u_matrix"),
+  time: requireUniform(gl, program, "u_time"),
+  speed: requireUniform(gl, program, "u_speed"),
+  animationEnabled: requireUniform(gl, program, "u_animation_enabled"),
+  glowPass: requireUniform(gl, program, "u_glow_pass"),
+  glowOpacity: requireUniform(gl, program, "u_glow_opacity")
+});
+class WebGLElectronicFenceCustomLayer {
+  constructor(id, animation) {
+    this.type = "custom";
+    this.renderingMode = "3d";
+    this.geometry = {
+      vertices: new Float32Array(),
+      glowPasses: [],
+      bodyFirst: 0,
+      bodyVertexCount: 0,
+      animated: false
+    };
+    this.visible = true;
+    this.id = id;
+    this.animation = animation;
+  }
+  setGeometry(geometry) {
+    var _a;
+    this.geometry = geometry;
+    this.uploadGeometry();
+    (_a = this.map) == null ? void 0 : _a.triggerRepaint();
+  }
+  setVisible(visible) {
+    var _a;
+    this.visible = visible;
+    (_a = this.map) == null ? void 0 : _a.triggerRepaint();
+  }
+  onAdd(map, gl) {
+    this.map = map;
+    this.gl = gl;
+    this.program = createProgram(gl);
+    this.locations = createLocations(gl, this.program);
+    this.buffer = gl.createBuffer() || void 0;
+    if (!this.buffer) {
+      throw new Error("无法创建电子围栏 WebGL 顶点缓冲。");
+    }
+    this.uploadGeometry(gl);
+  }
+  render(gl, input) {
+    if (!this.visible || !this.program || !this.buffer || !this.locations || !this.geometry.glowPasses.length && !this.geometry.bodyVertexCount) {
+      return;
+    }
+    const stride = FLOATS_PER_VERTEX * Float32Array.BYTES_PER_ELEMENT;
+    const pointer = (location, size, offset) => {
+      gl.enableVertexAttribArray(location);
+      gl.vertexAttribPointer(
+        location,
+        size,
+        gl.FLOAT,
+        false,
+        stride,
+        offset * Float32Array.BYTES_PER_ELEMENT
+      );
+    };
+    gl.useProgram(this.program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    pointer(this.locations.position, 3, 0);
+    pointer(this.locations.normal, 3, 3);
+    pointer(this.locations.heightRatio, 1, 6);
+    pointer(this.locations.pathProgress, 1, 7);
+    pointer(this.locations.color, 4, 8);
+    pointer(this.locations.flowColor, 3, 12);
+    pointer(this.locations.glowStrength, 1, 15);
+    pointer(this.locations.flowWidth, 1, 16);
+    pointer(this.locations.flowCount, 1, 17);
+    pointer(this.locations.flowLineStyle, 1, 18);
+    gl.uniformMatrix4fv(
+      this.locations.matrix,
+      false,
+      input.defaultProjectionData.mainMatrix
+    );
+    gl.uniform1f(this.locations.time, performance.now() / 1e3);
+    gl.uniform1f(this.locations.speed, this.animation.speed);
+    gl.uniform1f(
+      this.locations.animationEnabled,
+      this.animation.enabled ? 1 : 0
+    );
+    gl.enable(gl.BLEND);
+    gl.enable(gl.DEPTH_TEST);
+    gl.disable(gl.CULL_FACE);
+    gl.depthMask(false);
+    if (this.geometry.glowPasses.length) {
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+      gl.uniform1f(this.locations.glowPass, 1);
+      this.geometry.glowPasses.forEach((glowPass) => {
+        gl.uniform1f(this.locations.glowOpacity, glowPass.opacity);
+        gl.drawArrays(gl.TRIANGLES, glowPass.first, glowPass.count);
+      });
+    }
+    if (this.geometry.bodyVertexCount) {
+      gl.blendFuncSeparate(
+        gl.SRC_ALPHA,
+        gl.ONE_MINUS_SRC_ALPHA,
+        gl.ONE,
+        gl.ONE_MINUS_SRC_ALPHA
+      );
+      gl.uniform1f(this.locations.glowPass, 0);
+      gl.uniform1f(this.locations.glowOpacity, 0);
+      gl.drawArrays(
+        gl.TRIANGLES,
+        this.geometry.bodyFirst,
+        this.geometry.bodyVertexCount
+      );
+    }
+    gl.depthMask(true);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+  }
+  onRemove(_map, gl) {
+    if (this.buffer) {
+      gl.deleteBuffer(this.buffer);
+    }
+    if (this.program) {
+      gl.deleteProgram(this.program);
+    }
+    this.map = void 0;
+    this.gl = void 0;
+    this.buffer = void 0;
+    this.program = void 0;
+    this.locations = void 0;
+  }
+  uploadGeometry(providedGl) {
+    const gl = providedGl || this.gl;
+    if (!gl || !this.buffer) {
+      return;
+    }
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.geometry.vertices, gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+  }
+}
+const addWebGLElectronicFenceLayer = (map, options) => {
+  validateFenceDefaults(options.id, options.defaults);
+  const animation = resolveAnimationOptions(options.animation);
+  const store = new ElectronicFenceStore();
+  const customLayerId = `${options.id}-webgl`;
+  const interactionSourceId = `${options.id}-webgl-interaction-source`;
+  const interactionLayerId = `${options.id}-webgl-interaction`;
+  const customLayer = new WebGLElectronicFenceCustomLayer(
+    customLayerId,
+    animation
+  );
+  let interactionData = createFenceInteractionData(store);
+  let geometry = buildWebGLFenceGeometry(store, options, animation);
+  let visible = options.visible !== false;
+  let destroyed = false;
+  let animationFrame = 0;
+  let lastRepaintTime = 0;
+  const stopAnimation = () => {
+    if (animationFrame) {
+      cancelAnimationFrame(animationFrame);
+      animationFrame = 0;
+    }
+  };
+  const tick = (timestamp) => {
+    if (destroyed || !visible || !geometry.animated) {
+      animationFrame = 0;
+      return;
+    }
+    if ((typeof document === "undefined" || !document.hidden) && timestamp - lastRepaintTime >= 1e3 / animation.fps) {
+      lastRepaintTime = timestamp;
+      map.triggerRepaint();
+    }
+    animationFrame = requestAnimationFrame(tick);
+  };
+  const updateAnimation = () => {
+    const shouldAnimate = animation.enabled && visible && geometry.animated && !!map.getLayer(customLayerId);
+    if (shouldAnimate && !animationFrame) {
+      lastRepaintTime = 0;
+      animationFrame = requestAnimationFrame(tick);
+    } else if (!shouldAnimate) {
+      stopAnimation();
+    }
+  };
+  const ensureLayers = () => {
+    if (destroyed) {
+      return;
+    }
+    try {
+      if (options.interactive !== false && !map.getSource(interactionSourceId)) {
+        map.addSource(interactionSourceId, {
+          type: "geojson",
+          data: interactionData
+        });
+      }
+      if (!map.getLayer(customLayerId)) {
+        map.addLayer(customLayer, options.beforeId);
+      }
+      if (options.interactive !== false && !map.getLayer(interactionLayerId)) {
+        map.addLayer(
+          {
+            id: interactionLayerId,
+            type: "fill",
+            source: interactionSourceId,
+            paint: {
+              "fill-color": "#000000",
+              "fill-opacity": 0
+            }
+          },
+          options.beforeId
+        );
+      }
+      customLayer.setVisible(visible);
+      setFenceLayerVisibility(
+        map,
+        options.interactive === false ? [] : [interactionLayerId],
+        visible
+      );
+      updateAnimation();
+    } catch (error) {
+      if (!isStyleNotReadyError(error)) {
+        throw error;
+      }
+    }
+  };
+  const refresh = () => {
+    geometry = buildWebGLFenceGeometry(store, options, animation);
+    interactionData = createFenceInteractionData(store);
+    customLayer.setGeometry(geometry);
+    const source = map.getSource(interactionSourceId);
+    if (source) {
+      source.setData(interactionData);
+    }
+    ensureLayers();
+    updateAnimation();
+  };
+  const handleStyleData = () => {
+    ensureLayers();
+  };
+  customLayer.setGeometry(geometry);
+  map.on("styledata", handleStyleData);
+  ensureLayers();
+  const unbindInteractions = options.interactive === false ? () => void 0 : bindFenceInteractions({
+    map,
+    instanceId: options.id,
+    renderer: "webgl",
+    layerId: interactionLayerId,
+    store
+  });
+  return createElectronicFenceController({
+    id: options.id,
+    renderer: "webgl",
+    store,
+    refresh,
+    setPluginVisible(nextVisible) {
+      visible = nextVisible;
+      customLayer.setVisible(visible);
+      ensureLayers();
+      setFenceLayerVisibility(
+        map,
+        options.interactive === false ? [] : [interactionLayerId],
+        visible
+      );
+      updateAnimation();
+    },
+    destroy() {
+      destroyed = true;
+      stopAnimation();
+      map.off("styledata", handleStyleData);
+      unbindInteractions();
+      if (map.getLayer(interactionLayerId)) {
+        map.removeLayer(interactionLayerId);
+      }
+      if (map.getLayer(customLayerId)) {
+        map.removeLayer(customLayerId);
+      }
+      if (map.getSource(interactionSourceId)) {
+        map.removeSource(interactionSourceId);
+      }
+    }
+  });
+};
+const resolveStyle = (style, tdtToken) => {
+  if (!style) {
+    return getBaseMapStyle("openfreemap-liberty");
+  }
+  if (typeof style === "string" && isBaseMapType(style)) {
+    return getBaseMapStyle(style, { token: tdtToken });
+  }
   return style;
 };
 const createMap = (options) => {
-  const { style, tdtToken, ...mapOptions } = options;
-  return new maplibregl.Map({
+  const { style, tdtToken, projection, ...mapOptions } = options;
+  const map = new maplibregl.Map({
     ...mapOptions,
     style: resolveStyle(style, tdtToken)
   });
+  if (projection) {
+    map.on("style.load", () => {
+      map.setProjection({ type: projection });
+    });
+  }
+  return map;
 };
 export {
   BASE_MAP_TYPES,
@@ -1028,11 +3900,21 @@ export {
   OPENFREEMAP_STYLE_BASE_URL,
   OPENFREEMAP_STYLE_TYPES,
   TDT_STYLE_TYPES,
+  addBreachAlert,
+  addBreathingCircle,
+  addCoordinatedCountermeasure,
+  addCountermeasureBeam,
+  addDefenceCircle,
   addDirectionalPulse,
+  addNavigationSpoofing,
   addPulseMarker,
   addRadarSweep,
   addRingPulseMarker,
   addSectorScan,
+  addStandardElectronicFenceLayer,
+  addTargetLock,
+  addWebGLElectronicFenceLayer,
+  createFenceCircle,
   createMap,
   createTiandituImageStyle,
   createTiandituRasterSource,