地图调整

src/hooks/AMap/useAMap.ts

@@ -399,9 +399,6 @@ export function useAMap(options) {
   };
   let moveMarker, movePolyline, movePassedPolyline, timerId;
   const trackPlayback = (lineArr, speed = 1000) => {
-    if (!lineArr || lineArr.length === 0) {
-      return;
-    }
     if (timerId) {
       clearTimeout(timerId);
     }

src/utils/olMap/olMap.ts

@@ -309,7 +309,6 @@ export class olMap {
     // 继续编辑编辑
     this.drawGraphics(this.drawOptions.graphicsType);
   }
-
   // 绘制图形
   drawGraphics(newOptions: MouseTool) {
     const typeList = {
@@ -621,21 +620,46 @@ export class olMap {
         })
       ];
     }
-
-    return new Style({
+    const pointSize = originalFeature.get('size');
+    const originalWidth = originalFeature.get('originalWidth');
+    const originalHeight = originalFeature.get('originalHeight');
+    const icon = originalFeature.get('icon');
+    const name = originalFeature.get('name');
+    const showName = originalFeature.get('showName');
+    const scale = !!pointSize[0] ? pointSize[0] / originalWidth : 1;
+    const style = new Style({
       geometry: originalFeature.getGeometry(),
       image: new Icon({
+        src: icon,
+        scale: scale,
         anchor: [0.5, 0.5],
-        scale: 0.146,
         anchorXUnits: 'fraction',
-        anchorYUnits: 'pixels',
-        src: originalFeature.get('icon')
+        anchorYUnits: 'fraction'
       })
     });
+    if (!!showName) {
+      style.setText(
+        new Text({
+          text: name,
+          font: '12px sans-serif',
+          fill: new Fill({
+            color: '#000'
+          }),
+          stroke: new Stroke({
+            color: '#fff',
+            width: 3
+          }),
+          offsetY: (originalHeight / 2) * scale + 4
+        })
+      );
+    }
+    return style;
   }
   addMarker(points) {
     this.clearMarker();
-    const features = [];
+    const vectorSource = new VectorSource({
+      features: []
+    });
     points.forEach((point) => {
       // 创建标注点
       const feature = new Feature({
@@ -643,47 +667,27 @@ export class olMap {
         geometry: new Point([Number(point.longitude), Number(point.latitude)]),
         name: point.name,
         icon: point.icon,
+        image: point.icon,
         imageHover: point.imageHover,
         size: point.size,
+        showName: point.showName,
         pointer: true,
         extData: point
       });
       // 设置自定义属性
-      feature.set('pointer', true);
       const img = new Image();
       img.onload = () => {
         // 图片加载完成后，可以访问其 width 和 height 属性
         const width = img.width;
-        const height = img.height;
-        const style = new Style({
-          image: new Icon({
-            anchor: [0.5, 0.5],
-            anchorXUnits: 'fraction',
-            anchorYUnits: 'pixels',
-            src: point.icon,
-            size: [width, height],
-            scale: !!point.size[0] ? point.size[0] / width : 1
-          }),
-          text: new Text({
-            text: point.name,
-            fill: new Fill({
-              color: '#000'
-            }),
-            stroke: new Stroke({
-              color: '#fff',
-              width: 3
-            })
-          })
-        });
-        features.setStyle(style);
+        const height = img.width;
+        feature.set('originalWidth', width);
+        feature.set('originalHeight', height);
+        feature.set('img', img);
+        vectorSource.addFeature(feature);
       };
       img.src = point.icon; // 设置图片的 URL，触发加载
-      features.push(feature);
       this.markers.push(point);
     });
-    const vectorSource = new VectorSource({
-      features: features
-    });
     const clusterSource = new Cluster({
       distance: 30,
       source: vectorSource
@@ -1074,7 +1078,7 @@ export class olMap {
     this.traceFeature = new Feature({
       geometry: new LineString(lineArr)
     });
-    let route = new LineString(lineArr);
+    const route = new LineString(lineArr);
     this.carLayer = new VectorLayer({
       source: source,
       style: new Style({