@bitalltech-maplibre/core 1.0.2 → 1.0.4

package/dist/index.esm.js

@@ -320,7 +320,7 @@ const setLayersVisibility = (map, layerIds, visible) => {
     }
   });
 };
-const isStyleNotReadyError = (error) => error instanceof Error && error.message === "Style is not done loading.";
+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`;
@@ -414,7 +414,7 @@ const createManagedEffect = (map, initialOptions, renderEffect) => {
       renderNow();
       stopWaitingForStyle();
     } catch (error) {
-      if (!isStyleNotReadyError(error)) {
+      if (!isStyleNotReadyError$1(error)) {
         throw error;
       }
       if (!waitingForStyle) {
@@ -717,7 +717,7 @@ const createBreathingCircleRender = (options) => {
     }
   };
 };
-const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+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);
@@ -735,9 +735,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;
@@ -753,7 +753,7 @@ 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) => [
@@ -1201,6 +1201,8 @@ const createRadarSweepData = (options, angleOffset = 0) => {
 const createRadarSweepRender = (options) => {
   const useGradient = hasRadarSweepGradient(options);
   const canvas = useGradient ? createRadarSweepCanvas() : void 0;
+  const rotationSpeed = options.rotationSpeed ?? 36;
+  const animated = rotationSpeed !== 0;
   if (canvas) {
     drawRadarSweepCanvas(canvas, options);
   }
@@ -1232,7 +1234,7 @@ const createRadarSweepRender = (options) => {
             options.center,
             options.radius
           ),
-          animate: true
+          animate: animated
         }
       }
     ] : void 0,
@@ -1277,7 +1279,7 @@ const createRadarSweepRender = (options) => {
         }
       }
     ],
-    startAnimation({ getOptions, setData }) {
+    startAnimation: animated ? ({ getOptions, setData }) => {
       const startTime = performance.now();
       let frameId = 0;
       const tick = (timestamp) => {
@@ -1286,14 +1288,16 @@ const createRadarSweepRender = (options) => {
         if (canvas) {
           drawRadarSweepCanvas(canvas, currentOptions, angleOffset);
         }
-        setData(createRadarSweepData(currentOptions, angleOffset));
+        if (!useGradient) {
+          setData(createRadarSweepData(currentOptions, angleOffset));
+        }
         frameId = requestAnimationFrame(tick);
       };
       frameId = requestAnimationFrame(tick);
       return () => {
         cancelAnimationFrame(frameId);
       };
-    }
+    } : void 0
   };
 };
 const createDefenceCircleCanvas = () => {
@@ -2330,7 +2334,7 @@ const addBreachAlert = (map, initialOptions) => {
       waitingForStyle = false;
       map.off("styledata", handleStyleData);
     } catch (error) {
-      if (!isStyleNotReadyError(error)) {
+      if (!isStyleNotReadyError$1(error)) {
         throw error;
       }
       if (!waitingForStyle) {
@@ -2421,6 +2425,1457 @@ const addBreachAlert = (map, initialOptions) => {
     }
   };
 };
+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");
@@ -2454,7 +3909,9 @@ export {
   addRadarSweep,
   addRingPulseMarker,
   addSectorScan,
+  addStandardElectronicFenceLayer,
   addTargetLock,
+  addWebGLElectronicFenceLayer,
   createFenceCircle,
   createMap,
   createTiandituImageStyle,