@bitalltech-maplibre/core 1.0.4 → 1.0.6

package/dist/index.esm.js

@@ -293,6 +293,273 @@ const createBeamGeometry = (options) => {
     }
   };
 };
+const EMPTY_FEATURE_COLLECTION = {
+  type: "FeatureCollection",
+  features: []
+};
+const createFeature$1 = (geometry, properties) => ({
+  type: "Feature",
+  geometry,
+  properties
+});
+const asOpacity = (value, fallback) => Math.max(0, Math.min(1, value ?? fallback));
+const createRadarPowerFeatures = (radar) => {
+  var _a;
+  if (radar.visible === false) {
+    return [];
+  }
+  const color = radar.color ?? "#38ff4a";
+  const ringColor = radar.ringColor ?? color;
+  const ringCount = Math.max(0, Math.floor(radar.ringCount ?? 4));
+  const coreRadius = Math.max(20, radar.coreRadius ?? Math.min(160, radar.radius * 0.035));
+  const features = [];
+  if (radar.fillOpacity && radar.fillOpacity > 0) {
+    features.push(
+      createFeature$1(createCirclePolygon(radar.center, radar.radius), {
+        radarId: radar.id,
+        kind: "fill",
+        color: radar.fillColor ?? color,
+        opacity: asOpacity(radar.fillOpacity, 0)
+      })
+    );
+  }
+  for (let index = ringCount; index >= 1; index -= 1) {
+    const distance = radar.radius * index / ringCount;
+    features.push(
+      createFeature$1(createCircleLine(radar.center, distance), {
+        radarId: radar.id,
+        kind: "ring",
+        color: ringColor,
+        opacity: asOpacity(radar.ringOpacity, 0.95),
+        width: Math.max(0, radar.ringWidth ?? 2)
+      })
+    );
+    if (radar.showDistanceLabels !== false) {
+      const text = ((_a = radar.distanceLabelFormatter) == null ? void 0 : _a.call(radar, distance, index)) ?? `${Math.round(distance)}`;
+      [
+        { bearing: 0, textAnchor: "bottom" },
+        { bearing: 90, textAnchor: "left" },
+        { bearing: 180, textAnchor: "top" },
+        { bearing: 270, textAnchor: "right" }
+      ].forEach((label) => {
+        features.push(
+          createFeature$1(
+            {
+              type: "Point",
+              coordinates: getDestination(radar.center, distance, label.bearing)
+            },
+            {
+              radarId: radar.id,
+              kind: "distance-label",
+              text,
+              textAnchor: label.textAnchor,
+              color: radar.distanceLabelColor ?? ringColor,
+              opacity: asOpacity(radar.distanceLabelOpacity, 0.92),
+              haloColor: radar.distanceLabelHaloColor ?? "rgba(15, 23, 42, 0.42)",
+              size: radar.distanceLabelSize ?? 12
+            }
+          )
+        );
+      });
+    }
+  }
+  if (radar.showCrosshair !== false) {
+    features.push(
+      createFeature$1(
+        {
+          type: "LineString",
+          coordinates: [
+            getDestination(radar.center, radar.radius, 180),
+            getDestination(radar.center, radar.radius, 0)
+          ]
+        },
+        {
+          radarId: radar.id,
+          kind: "crosshair",
+          color: radar.crosshairColor ?? ringColor,
+          opacity: asOpacity(radar.crosshairOpacity, 0.5),
+          width: Math.max(0, radar.crosshairWidth ?? 1.4)
+        }
+      ),
+      createFeature$1(
+        {
+          type: "LineString",
+          coordinates: [
+            getDestination(radar.center, radar.radius, 270),
+            getDestination(radar.center, radar.radius, 90)
+          ]
+        },
+        {
+          radarId: radar.id,
+          kind: "crosshair",
+          color: radar.crosshairColor ?? ringColor,
+          opacity: asOpacity(radar.crosshairOpacity, 0.5),
+          width: Math.max(0, radar.crosshairWidth ?? 1.4)
+        }
+      )
+    );
+  }
+  features.push(
+    createFeature$1(createCirclePolygon(radar.center, coreRadius), {
+      radarId: radar.id,
+      kind: "core",
+      color: radar.coreColor ?? color,
+      opacity: asOpacity(radar.fillOpacity, 0)
+    })
+  );
+  return features;
+};
+const createRadarPowerData = (radars) => ({
+  type: "FeatureCollection",
+  features: radars.flatMap(createRadarPowerFeatures)
+});
+const createLayerDefinitions = (id) => {
+  const source = `${id}-source`;
+  const layers = [
+    {
+      id: `${id}-fill`,
+      type: "fill",
+      source,
+      filter: ["==", ["get", "kind"], "fill"],
+      paint: {
+        "fill-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "fill-opacity": ["coalesce", ["get", "opacity"], 0]
+      }
+    },
+    {
+      id: `${id}-core`,
+      type: "fill",
+      source,
+      filter: ["==", ["get", "kind"], "core"],
+      paint: {
+        "fill-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "fill-opacity": ["coalesce", ["get", "opacity"], 0]
+      }
+    },
+    {
+      id: `${id}-ring`,
+      type: "line",
+      source,
+      filter: ["==", ["get", "kind"], "ring"],
+      paint: {
+        "line-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "line-opacity": ["coalesce", ["get", "opacity"], 0.95],
+        "line-width": ["coalesce", ["get", "width"], 2]
+      }
+    },
+    {
+      id: `${id}-crosshair`,
+      type: "line",
+      source,
+      filter: ["==", ["get", "kind"], "crosshair"],
+      paint: {
+        "line-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "line-opacity": ["coalesce", ["get", "opacity"], 0.5],
+        "line-width": ["coalesce", ["get", "width"], 1.4]
+      }
+    },
+    {
+      id: `${id}-labels`,
+      type: "symbol",
+      source,
+      filter: ["==", ["get", "kind"], "distance-label"],
+      layout: {
+        "text-field": ["get", "text"],
+        "text-size": ["coalesce", ["get", "size"], 12],
+        "text-anchor": ["get", "textAnchor"],
+        "text-allow-overlap": true,
+        "text-ignore-placement": true
+      },
+      paint: {
+        "text-color": ["coalesce", ["get", "color"], "#38ff4a"],
+        "text-opacity": ["coalesce", ["get", "opacity"], 0.92],
+        "text-halo-color": ["coalesce", ["get", "haloColor"], "rgba(15, 23, 42, 0.42)"],
+        "text-halo-width": 1
+      }
+    }
+  ];
+  return {
+    source,
+    layers
+  };
+};
+const removeLayerIfExists$1 = (map, id) => {
+  if (map.getLayer(id)) {
+    map.removeLayer(id);
+  }
+};
+const removeSourceIfExists$1 = (map, id) => {
+  if (map.getSource(id)) {
+    map.removeSource(id);
+  }
+};
+const addRadarPowerGroup = (map, options) => {
+  const { source, layers } = createLayerDefinitions(options.id);
+  let radars = [...options.radars ?? []];
+  let removed = false;
+  map.addSource(source, {
+    type: "geojson",
+    data: EMPTY_FEATURE_COLLECTION
+  });
+  layers.forEach((layer) => {
+    map.addLayer(layer, options.beforeId);
+  });
+  const sourceRef = map.getSource(source);
+  const layerIds = layers.map((layer) => layer.id);
+  const setGroupVisibility = (visible) => {
+    layerIds.forEach((layerId) => {
+      if (map.getLayer(layerId)) {
+        map.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none");
+      }
+    });
+  };
+  const setData = (nextRadars) => {
+    if (removed) return;
+    radars = nextRadars.map((radar) => ({ ...radar }));
+    sourceRef.setData(createRadarPowerData(radars));
+  };
+  if (radars.length > 0) {
+    setData(radars);
+  }
+  if (options.visible === false) {
+    setGroupVisibility(false);
+  }
+  return {
+    id: options.id,
+    sourceId: source,
+    layerIds,
+    setData,
+    updateRadar(id, nextOptions) {
+      const index = radars.findIndex((radar) => radar.id === id);
+      if (index < 0 || removed) return;
+      radars[index] = { ...radars[index], ...nextOptions, id };
+      sourceRef.setData(createRadarPowerData(radars));
+    },
+    setRadarVisible(id, visible) {
+      const radar = radars.find((item) => item.id === id);
+      if (!radar || removed) return;
+      radar.visible = visible;
+      sourceRef.setData(createRadarPowerData(radars));
+    },
+    removeRadar(id) {
+      if (removed) return;
+      radars = radars.filter((radar) => radar.id !== id);
+      sourceRef.setData(createRadarPowerData(radars));
+    },
+    show() {
+      if (!removed) setGroupVisibility(true);
+    },
+    hide() {
+      if (!removed) setGroupVisibility(false);
+    },
+    remove() {
+      if (removed) return;
+      removed = true;
+      [...layerIds].reverse().forEach((layerId) => removeLayerIfExists$1(map, layerId));
+      removeSourceIfExists$1(map, source);
+    }
+  };
+};
 const createFeature = (geometry, properties) => ({
   type: "Feature",
   geometry,
@@ -398,7 +665,8 @@ const createManagedEffect = (map, initialOptions, renderEffect) => {
     if (nextRender.startAnimation) {
       disposeAnimation = nextRender.startAnimation({
         getOptions: () => options,
-        setData
+        setData,
+        requestRender: () => map.triggerRepaint()
       }) || void 0;
     }
   };
@@ -909,7 +1177,8 @@ const createSectorScanRender = (options) => {
             options.center,
             options.radius
           ),
-          animate: Boolean(options.rotationSpeed && options.rotationSpeed !== 0)
+          // 动画由插件主动 triggerRepaint，避免 CanvasSource 自己持续刷新一整张地图。
+          animate: false
         }
       }
     ] : void 0,
@@ -926,16 +1195,26 @@ const createSectorScanRender = (options) => {
         }
       }
     ],
-    startAnimation: options.rotationSpeed && options.rotationSpeed !== 0 ? ({ getOptions, setData }) => {
+    startAnimation: options.rotationSpeed && options.rotationSpeed !== 0 ? ({ getOptions, setData, requestRender }) => {
       const startTime = performance.now();
       let frameId = 0;
+      let lastFrameTime = -Infinity;
       const tick = (timestamp) => {
         const currentOptions = getOptions();
-        const angleOffset = (timestamp - startTime) / 1e3 * (currentOptions.rotationSpeed || 0);
-        if (canvas) {
-          drawSectorGradientCanvas(canvas, currentOptions, angleOffset);
+        const frameRate = currentOptions.frameRate ?? 30;
+        const minFrameInterval = frameRate > 0 ? 1e3 / frameRate : 0;
+        if (timestamp - lastFrameTime >= minFrameInterval) {
+          const angleOffset = (timestamp - startTime) / 1e3 * (currentOptions.rotationSpeed || 0);
+          const outlineVisible = (currentOptions.outlineOpacity ?? 0.95) > 0 && (currentOptions.outlineWidth ?? 2) > 0;
+          if (canvas) {
+            drawSectorGradientCanvas(canvas, currentOptions, angleOffset);
+            requestRender();
+          }
+          if (!canvas || outlineVisible) {
+            setData(createSectorScanData(currentOptions, angleOffset));
+          }
+          lastFrameTime = timestamp;
         }
-        setData(createSectorScanData(currentOptions, angleOffset));
         frameId = requestAnimationFrame(tick);
       };
       frameId = requestAnimationFrame(tick);
@@ -3906,6 +4185,7 @@ export {
   addDirectionalPulse,
   addNavigationSpoofing,
   addPulseMarker,
+  addRadarPowerGroup,
   addRadarSweep,
   addRingPulseMarker,
   addSectorScan,