@bitalltech-maplibre/core 1.0.0 → 1.0.2

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 = (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(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 {
@@ -436,26 +550,21 @@ const createPulseMarkerRender = (options) => {
   };
 };
 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 +597,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,6 +638,85 @@ const createRingPulseMarkerRender = (options) => {
     }
   };
 };
+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 clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 const parseColor = (color) => {
   const value = color.trim();
@@ -576,6 +755,29 @@ const toRgbaColor = (color, opacity) => {
   }
   return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${clamp(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];
   const east = getDestination(center, radius, 90)[0];
@@ -613,8 +815,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,
@@ -821,13 +1023,86 @@ const createDirectionalPulseRender = (options) => ({
     };
   } : void 0
 });
+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 +1111,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,108 +1180,1247 @@ 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);
-    };
+      return () => {
+        cancelAnimationFrame(frameId);
+      };
+    }
+  };
+};
+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 addPulseMarker = (map, options) => createManagedEffect(map, options, createPulseMarkerRender);
-const addRingPulseMarker = (map, options) => createManagedEffect(map, options, createRingPulseMarkerRender);
-const addSectorScan = (map, options) => createManagedEffect(map, options, createSectorScanRender);
+  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 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 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 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 addPulseMarker = (map, options) => createManagedEffect(map, options, createPulseMarkerRender);
+const addBreathingCircle = (map, options) => createManagedEffect(map, options, createBreathingCircleRender);
+const addRingPulseMarker = (map, options) => createManagedEffect(map, options, createRingPulseMarkerRender);
+const addSectorScan = (map, options) => createManagedEffect(map, options, createSectorScanRender);
 const addDirectionalPulse = (map, options) => createManagedEffect(map, options, createDirectionalPulseRender);
 const addRadarSweep = (map, options) => createManagedEffect(map, options, createRadarSweepRender);
+const addDefenceCircle = (map, options) => createManagedEffect(map, options, createDefenceCircleRender);
+const addCountermeasureBeam = (map, options) => createManagedEffect(map, options, createCountermeasureBeamRender);
+const addCoordinatedCountermeasure = (map, options) => createManagedEffect(map, options, createCoordinatedCountermeasureRender);
+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(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 resolveStyle = (style, tdtToken) => {
   if (!style) {
     return getBaseMapStyle("openfreemap-liberty");
@@ -1028,11 +2443,19 @@ export {
   OPENFREEMAP_STYLE_BASE_URL,
   OPENFREEMAP_STYLE_TYPES,
   TDT_STYLE_TYPES,
+  addBreachAlert,
+  addBreathingCircle,
+  addCoordinatedCountermeasure,
+  addCountermeasureBeam,
+  addDefenceCircle,
   addDirectionalPulse,
+  addNavigationSpoofing,
   addPulseMarker,
   addRadarSweep,
   addRingPulseMarker,
   addSectorScan,
+  addTargetLock,
+  createFenceCircle,
   createMap,
   createTiandituImageStyle,
   createTiandituRasterSource,