sctj-components 1.1.7 → 1.1.9

package/lib/sctj-components.es.js

@@ -5399,7 +5399,7 @@ const _sfc_main$8 = {
     };
   }
 };
-const index_vue_vue_type_style_index_0_scoped_6004966e_lang = "";
+const index_vue_vue_type_style_index_0_scoped_c98dea1e_lang = "";
 const _hoisted_1$6 = {
   key: 0,
   class: "action-container"
@@ -5491,8 +5491,8 @@ const _sfc_main$7 = {
   setup(__props, { expose, emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "6cd645c6": __props.width,
-      "14237927": __props.height
+      "0bc30804": __props.width,
+      "2fe209ef": __props.height
     }));
     const controlsPositionVars = computed$1(() => {
       const position = props.controlsPosition || {};
@@ -5519,6 +5519,7 @@ const _sfc_main$7 = {
     const circleInstances = shallowRef([]);
     const circleTextInstances = shallowRef([]);
     const polygonTextInstances = shallowRef([]);
+    const polylineTextInstances = shallowRef([]);
     const typeVisibility = shallowRef(/* @__PURE__ */ new Map());
     const overlayGroups = shallowRef(/* @__PURE__ */ new Map());
     const isMoreLegend = ref$1(false);
@@ -5682,10 +5683,8 @@ const _sfc_main$7 = {
       if (!map.value)
         return;
       map.value.on("zoomend", () => {
-        updateTextVisibility();
       });
       map.value.on("moveend", () => {
-        updateTextVisibility();
       });
     };
     const clearMapEvents = () => {
@@ -5753,6 +5752,7 @@ const _sfc_main$7 = {
       circleInstances.value = [];
       circleTextInstances.value = [];
       polygonTextInstances.value = [];
+      polylineTextInstances.value = [];
       typeVisibility.value.clear();
     });
     const initMap = async () => {
@@ -5760,7 +5760,7 @@ const _sfc_main$7 = {
         const AMap2 = await AMapLoader.load({
           key: props.amapKey,
           version: "2.0",
-          plugins: ["AMap.Marker", "AMap.Polyline", "AMap.Polygon", "AMap.BezierCurve", "AMap.Circle", "AMap.Text", "AMap.LabelMarker", "AMap.BezierCurveEditor", "AMap.TileLayer.Satellite", "AMap.ControlBar", "AMap.OverlayGroup", "AMap.ToolBar", "AMap.MapType"]
+          plugins: ["AMap.Marker", "AMap.Polyline", "AMap.Polygon", "AMap.BezierCurve", "AMap.Circle", "AMap.Text", "AMap.LabelMarker", "AMap.BezierCurveEditor", "AMap.TileLayer.Satellite", "AMap.ControlBar", "AMap.OverlayGroup", "AMap.ToolBar", "AMap.MapType", "AMap.GeometryUtil"]
         });
         const mapConfig = {
           viewMode: props.viewMode,
@@ -5909,6 +5909,41 @@ const _sfc_main$7 = {
       }
       return [sumX / path.length, sumY / path.length];
     };
+    const haversineDistance = (p1, p2) => {
+      const R = 6371e3;
+      const lat1 = p1[1] * Math.PI / 180;
+      const lat2 = p2[1] * Math.PI / 180;
+      const deltaLat = (p2[1] - p1[1]) * Math.PI / 180;
+      const deltaLng = (p2[0] - p1[0]) * Math.PI / 180;
+      const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltaLng / 2) * Math.sin(deltaLng / 2);
+      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+      return R * c;
+    };
+    const getPointOnPolylineByPercent = (path, percent = 0.5) => {
+      if (!path || path.length === 0)
+        return null;
+      if (path.length === 1)
+        return [path[0][0], path[0][1]];
+      let totalLength = 0;
+      const lengths = [];
+      for (let i = 0; i < path.length - 1; i++) {
+        const length = haversineDistance(path[i], path[i + 1]);
+        lengths.push(length);
+        totalLength += length;
+      }
+      const targetDistance = totalLength * percent;
+      let accumulatedDistance = 0;
+      for (let i = 0; i < lengths.length; i++) {
+        if (targetDistance <= accumulatedDistance + lengths[i]) {
+          const t = (targetDistance - accumulatedDistance) / lengths[i];
+          const lng = path[i][0] + (path[i + 1][0] - path[i][0]) * t;
+          const lat = path[i][1] + (path[i + 1][1] - path[i][1]) * t;
+          return [lng, lat];
+        }
+        accumulatedDistance += lengths[i];
+      }
+      return [path[path.length - 1][0], path[path.length - 1][1]];
+    };
     const setLegend = () => {
       legend.value = props.legendConfig.filter((item) => item.defaultVisible === void 0 || item.defaultVisible === true).map((item) => item.value);
       handleLegendChange(legend.value);
@@ -5938,13 +5973,15 @@ const _sfc_main$7 = {
             size: size ? new AMap.Size(size.width, size.height) : new AMap.Size(state.markerDefaultConfig.size.width, state.markerDefaultConfig.size.height),
             offset: size ? new AMap.Pixel(-(size.width / 2), -size.height) : new AMap.Pixel(-(state.markerDefaultConfig.size.width / 2), -state.markerDefaultConfig.size.height),
             map: map.value,
-            title
+            title,
+            zooms: [16, 25]
           });
           blink && markerInstance.dom && markerInstance.dom.querySelector(".amap-icon").classList.add("blinking-marker");
           label && markerInstance.setLabel({
             direction: "top",
             offset: new AMap.Pixel(0, -5),
-            content: `<div title="${label}" style="${objectToStyleString({ ...state.textLabelDefaultStyle, ...textLabelDefaultStyle })}" class='info'>${label}</div>`
+            content: `<div title="${label}" style="${objectToStyleString({ ...state.textLabelDefaultStyle, ...textLabelDefaultStyle })}" class='info'>${label}</div>`,
+            zooms: [16, 25]
           });
           markerInstance.on("click", () => {
             emit("overlay-click", { type: "staticMarker", data: marker });
@@ -5970,8 +6007,10 @@ const _sfc_main$7 = {
             offset: size ? new AMap.Pixel(-(size.width / 2), -size.height) : new AMap.Pixel(-(state.markerDefaultConfig.size.width / 2), -state.markerDefaultConfig.size.height),
             size: size ? new AMap.Size(size.width, size.height) : new AMap.Size(state.markerDefaultConfig.size.width, state.markerDefaultConfig.size.height),
             map: map.value,
-            title
+            title,
+            zooms: [16, 25]
           });
+          console.log("markerInstance", markerInstance);
           blink && markerInstance.dom && markerInstance.dom.querySelector(".amap-icon").classList.add("blinking-marker");
           label && markerInstance.setLabel({
             direction: "top",
@@ -6011,7 +6050,7 @@ const _sfc_main$7 = {
               },
               offset: new AMap.Pixel(0, 0),
               anchor: "center",
-              zooms: [1, 20]
+              zooms: [16, 25]
             });
             map.value.add(textInstance);
             circleTextInstances.value.push({
@@ -6056,6 +6095,29 @@ const _sfc_main$7 = {
             path: parsePath(polyline.path),
             map: map.value
           });
+          let textInstance = null;
+          if (polyline.label) {
+            const center = getPointOnPolylineByPercent(parsePath(polyline.path));
+            textInstance = new AMap.Text({
+              text: polyline.label,
+              position: center,
+              zIndex: 1,
+              style: {
+                ...state.textLabelDefaultStyle,
+                ...polyline.labelStyle || {}
+              },
+              offset: new AMap.Pixel(0, 0),
+              anchor: "center",
+              zooms: [16, 25]
+            });
+            map.value.add(textInstance);
+            polylineTextInstances.value.push({
+              instance: textInstance,
+              polygonId: parsePath(polyline.path).join("|"),
+              polygonInstance: polylineInstance,
+              path: parsePath(polyline.path)
+            });
+          }
           polylineInstance.on("click", () => {
             emit("overlay-click", { type: "polyline", data: polyline });
           });
@@ -6105,7 +6167,7 @@ const _sfc_main$7 = {
               },
               offset: new AMap.Pixel(0, 0),
               anchor: "center",
-              zooms: [1, 20]
+              zooms: [16, 25]
             });
             map.value.add(textInstance);
             polygonTextInstances.value.push({
@@ -6252,6 +6314,10 @@ const _sfc_main$7 = {
         polyline.setMap(null);
       });
       polylineInstances.value = [];
+      polylineTextInstances.value.forEach((textObj) => {
+        textObj.instance.setMap(null);
+      });
+      polylineTextInstances.value = [];
     };
     const clearPolygons = () => {
       polygonInstances.value.forEach((polygon) => {
@@ -6285,61 +6351,6 @@ const _sfc_main$7 = {
       });
       bezierCurveInstances.value = [];
     };
-    const updateTextVisibility = () => {
-      if (!map.value)
-        return;
-      circleTextInstances.value.forEach((textObj) => {
-        if (!textObj.circleInstance || !textObj.instance || !textObj.instance.dom)
-          return;
-        const center = textObj.circleInstance.getCenter();
-        const radius = textObj.radius;
-        const pixelRadius = getPixelDistance(center, radius);
-        console.log("pixelRadius", pixelRadius);
-        const labelWidth = textObj.instance.dom.getBoundingClientRect().width;
-        if (labelWidth > pixelRadius * 1.5) {
-          textObj.instance.dom.style.opacity = "0";
-        } else {
-          textObj.instance.dom.style.opacity = "1";
-        }
-      });
-      polygonTextInstances.value.forEach((textObj) => {
-        if (!textObj.polygonInstance || !textObj.instance || !textObj.instance.dom)
-          return;
-        const polygonPixelArea = getPolygonPixelArea(textObj.path);
-        const labelWidth = textObj.instance.dom.offsetWidth;
-        const labelHeight = textObj.instance.dom.offsetHeight;
-        const labelArea = labelWidth * labelHeight;
-        if (labelArea > polygonPixelArea * 0.3) {
-          textObj.instance.dom.style.opacity = "0";
-        } else {
-          textObj.instance.dom.style.opacity = "1";
-        }
-      });
-    };
-    const getPixelDistance = (center, radiusInMeters) => {
-      if (!map.value)
-        return 0;
-      const east = new AMap.LngLat(center.lng, center.lat).offset(radiusInMeters, 90);
-      const centerPx = map.value.lngLatToContainer(center);
-      const eastPx = map.value.lngLatToContainer(east);
-      const dx = eastPx.x - centerPx.x;
-      const dy = eastPx.y - centerPx.y;
-      return Math.sqrt(dx * dx + dy * dy);
-    };
-    const getPolygonPixelArea = (path) => {
-      if (!map.value || !path || path.length < 3)
-        return 0;
-      const pixelPath = path.map((point) => {
-        const lngLat = new AMap.LngLat(point[0], point[1]);
-        const pixel = map.value.lngLatToContainer(lngLat);
-        return [pixel.x, pixel.y];
-      });
-      let area = 0;
-      for (let i = 0, j = pixelPath.length - 1; i < pixelPath.length; j = i++) {
-        area += (pixelPath[j][0] + pixelPath[i][0]) * (pixelPath[j][1] - pixelPath[i][1]);
-      }
-      return Math.abs(area / 2);
-    };
     expose({
       fitView,
       updateCenter,
@@ -6397,7 +6408,7 @@ const _sfc_main$7 = {
     };
   }
 };
-const SCTJMapViewer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-6004966e"]]);
+const SCTJMapViewer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-c98dea1e"]]);
 const index_vue_vue_type_style_index_0_scoped_761d2ab4_lang = "";
 const _withScopeId$4 = (n) => (pushScopeId("data-v-761d2ab4"), n = n(), popScopeId(), n);
 const _hoisted_1$5 = {