Merge remote-tracking branch 'origin/master'

src/utils/index.ts

@@ -41,7 +41,8 @@ const getTableRowClass = ({rowIndex}) => {
     return rowIndex % 2 === 0 ? '' : 'common-table-tr';
 }
 
-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;