实时标绘 粤政图 任意线

src/utils/index.ts

@@ -413,7 +413,8 @@ export const formatToTwoDecimalPlaces = (str) => {
   }
 };
 
-export const hexToRgba = (hex, alpha) => {
+export const hexToRgba = (hex, alpha = 1) => {
+  if (!hex) return '';
   // 确保输入是一个有效的十六进制颜色值，并以 # 开头
   hex = hex.replace(/^#/, '');
   // 如果十六进制颜色值是3位的简写形式（如 #f80），则扩展为6位

src/utils/olMap/olMap.ts

@@ -94,6 +94,9 @@ export class olMap {
   // 自定义绘制结束调用方法
   private drawEndMethod;
   private selectedFeature;
+  private drawing;
+  private path;
+  private anyLine;
 
   constructor(options) {
     this.options = options;
@@ -357,7 +360,8 @@ export class olMap {
         }
         this.closeDraw();
         if (newOptions.graphicsType === 'anyLine') {
-          this.drawAnyLine();
+          this.drawOptions.fillOpacity = 0;
+          this.drawAnyLine(this.drawOptions);
         } else {
           // 创建绘制交互
           let style = new Style({
@@ -485,74 +489,59 @@ export class olMap {
     data.id = id;
     return { text, data };
   }
-  drawAnyLine() {
-    document.addEventListener('touchend', this.handleTouchEnd);
-    this.map.on('pointerdown', this.handleTouchStart);
-    this.map.on('pointermove', this.handleTouchMove.bind(null, this.options));
-    document.addEventListener('mouseup', this.handleTouchEnd.bind(null, this.options));
-  }
-  handleTouchStart(e) {
-    this.drawing = true;
-    const interactions = this.map.getInteractions();
-    interactions.forEach((interaction) => {
-      if (interaction instanceof DragPan || interaction instanceof DoubleClickZoom) {
-        interaction.setActive(false); // 修改为需要的值，true或false
-      }
-    });
+  drawAnyLine(drawOptions) {
+    const handleTouchStart = (e) => {
+      this.drawing = true;
+      const interactions = this.map.getInteractions();
+      interactions.forEach((interaction) => {
+        if (interaction instanceof DragPan || interaction instanceof DoubleClickZoom) {
+          interaction.setActive(false); // 修改为需要的值，true或false
+        }
+      });
 
-    this.path = [e.lnglat];
-    // if (this.anyLine) {
-    //   map.remove(anyLine);
-    // }
-  }
-  handleTouchMove(options, e) {
-    if (!this.drawing) return;
-    this.path.push(e.lnglat);
-    // if (anyLine) {
-    //   map.remove(anyLine);
-    // }
-    this.anyLine = new Feature({
-      geometry: new LineString(this.path) // path为坐标数组，如[[x1,y1], [x2,y2]]
-    });
-    const lineStyle = new Style({
-      stroke: new Stroke({
-        color: hexToRgba(options.strokeColor, options.strokeOpacity), // 合并颜色与透明度
-        width: options.strokeWeight,
-        lineJoin: 'round' // 线段连接处圆角
-      })
-    });
-    this.anyLine.setStyle(lineStyle);
-    //   new AMap.Polyline({
-    //   path: path,
-    //   strokeColor: options.strokeColor,
-    //   strokeOpacity: options.strokeOpacity,
-    //   strokeWeight: options.strokeWeight,
-    //   strokeStyle: options.strokeStyle,
-    //   lineJoin: 'round'
-    // });
-    this.drawVector.getSource().addFeature(this.anyLine);
-  }
-  handleTouchEnd(options) {
-    // drawing = false;
-    // map.setStatus({
-    //   showIndoorMap: true,
-    //   dragEnable: true,
-    //   keyboardEnable: true,
-    //   doubleClickZoom: true,
-    //   zoomEnable: true,
-    //   rotateEnable: true
-    // });
-    // map.off('touchstart', handleTouchStart);
-    // map.on('touchmove', handleTouchMove.bind(null, options));
-    // document.addEventListener('touchend', handleTouchEnd.bind(null, options));
-    // map.off('mousedown', handleTouchStart);
-    // map.off('mousemove', handleTouchMove);
-    // document.removeEventListener('mouseup', handleTouchEnd);
-    // if (!!drawEndMethod) {
-    //   drawEndMethod(options, anyLine);
-    // }
-    // anyLine = null;
+      this.path = [e.coordinate];
+      // 移除旧的线段
+      if (this.anyLine) {
+        this.drawVector.getSource().removeFeature(this.anyLine);
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (!this.drawing) return;
+      this.path.push(e.coordinate);
+      // 移除旧的线段
+      if (this.anyLine) {
+        this.drawVector.getSource().removeFeature(this.anyLine);
+      }
+      this.anyLine = new Feature({
+        geometry: new LineString(this.path)
+      });
+      const lineStyle = new Style({
+        stroke: new Stroke({
+          color: hexToRgba(this.drawOptions.strokeColor, this.drawOptions.strokeOpacity), // 合并颜色与透明度
+          width: this.drawOptions.strokeWeight,
+          lineJoin: 'round' // 线段连接处圆角
+        })
+      });
+      this.anyLine.setStyle(lineStyle);
+      this.drawVector.getSource().addFeature(this.anyLine);
+    };
+    const handleTouchEnd = () => {
+      this.drawing = false;
+      document.removeEventListener('touchend', handleTouchEnd);
+      this.map.un('pointerdown', handleTouchStart);
+      this.map.un('pointermove', handleTouchMove);
+      document.removeEventListener('mouseup', handleTouchEnd);
+      if (!!this.drawEndMethod) {
+        this.drawEndMethod(drawOptions, this.anyLine);
+      }
+      this.anyLine = null;
+    };
+    document.addEventListener('touchend', handleTouchEnd);
+    this.map.on('pointerdown', handleTouchStart);
+    this.map.on('pointermove', handleTouchMove);
+    document.addEventListener('mouseup', handleTouchEnd);
   }
+
   // 关闭绘制
   closeDraw() {
     if (!this.drawTool) return;

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -625,20 +625,31 @@ const handleEndDraw = (options, obj) => {
   mouseToolState.value.graphicsType = '';
   drawTool.setDrawEndMethod();
   const id = nanoid();
-  obj._opts.extData = {
-    id: id
-  };
-  const data: any = deepClone(options);
-  data.id = id;
-  if (data.type === 'anyLine') {
-    const path = obj.getPath();
-    // 将AMap.LngLat对象数组转换为经纬度数组
-    const pathArr = path.map((lngLat) => {
-      // 返回经度和纬度的数组
-      return [lngLat.lng, lngLat.lat];
-    });
-    pathArr.push(pathArr[0]);
-    data.path = pathArr;
+  let data;
+  if (AMapType.includes(props.activeMap)) {
+    obj._opts.extData = {
+      id: id
+    };
+    data = deepClone(options);
+    data.id = id;
+    if (data.type === 'anyLine') {
+      const path = obj.getPath();
+      // 将AMap.LngLat对象数组转换为经纬度数组
+      const pathArr = path.map((lngLat) => {
+        // 返回经度和纬度的数组
+        return [lngLat.lng, lngLat.lat];
+      });
+      pathArr.push(pathArr[0]);
+      data.path = pathArr;
+    }
+  } else {
+    obj.set('id', id);
+    data = deepClone(options);
+    data.id = id;
+    if (data.type === 'anyLine') {
+      const path = obj.getGeometry().getCoordinates();
+      data.path = path;
+    }
   }
   overlays.push(obj);
   overlaysData.push(data);