画线的时候直接计算长度

gassafety-web/src/components/PopWindow/pipelineView.vue

@@ -189,6 +189,7 @@ export default {
         pipeName: "",
         pipeType: "1",
         pipePressure: "1",
+        pipeLength:"",
         iconUrl: "",
       },
       dialogVisible: false,
@@ -235,6 +236,7 @@ export default {
   },
   created() {
     console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
+    this.editForm.pipeLength=parseInt(this.pipeLength);
     if (this.lineData?.pipeId) {
       this.editForm = { ...this.lineData };
     } else {

gassafety-web/src/utils/gaodeMap.js

@@ -101,6 +101,24 @@ class gaodeMap {
       this.closeInfoWindow();
       this.polyLinesColorClear();
     });
+    // 鼠标在地图上移动
+    this.myMap.on("mousemove", e => {
+      if (this.mouseTool.overlays.polyline.length > 0) {
+        const arr = this.mouseTool.overlays.polyline;
+        const length = parseInt(arr[0].getLength());
+        if (this.lengthMarker) {
+          this.myMap.remove(this.lengthMarker);
+        }
+        const position = e.lnglat;
+        this.lengthMarker = new AMap.Marker({
+          map: map,
+          position,
+          content: `<div style="color:#000;font-size:14px;display:inline-block;background:#fff;white-space:nowrap;padding:2px 5px;">
+          管道长度:<span>${length}米</span><div>`,
+          offset: new AMap.Pixel(20, 20)
+        });
+      }
+    });
     this.myMap.on("moveend", () => {
       if (this.handleInfoWindowOpenFunc) {
         this.handleInfoWindowOpenFunc();
@@ -751,13 +769,19 @@ class gaodeMap {
   createNewLine() {
     map.remove(this.markerOverlays);
     console.log("创造一条线了啊");
+    // 线测距
+    map.plugin(["AMap.MouseTool"], () => {
+      this.ruler = new AMap.RangingTool(map);
+      this.ruler.turnOn();
+      // console.log(this.ruler.)
+    });
     this.mouseTool.polyline({
       // bubbles:false,
       strokeWeight: 4,
       strokeColor: "#80d8ff",
       extData: {
         type: "newLine",
-        //当前line状态 0:正常状态 1:正在编辑状态
+        //当前line状态 0:正常状态 1:正在编辑状态
         isState: 0
       }
       //同Polyline的Option设置
@@ -770,6 +794,9 @@ class gaodeMap {
     this.lineFlag = false;
     if (this.mouserTool) {
       this.mouseTool.close();
+      if (this.lengthMarker) {
+        this.myMap.remove(this.lengthMarker);
+      }
     }
     if (this.newLineObj) {
       this.newLineObj.polyEditor.close();
@@ -1006,6 +1033,10 @@ class gaodeMap {
     let that = this;
     this.markerOverlays = [];
     this.mouseTool.on("draw", function(e) {
+      // 如果正在测量就删掉
+      if (that.lengthMarker) {
+        that.myMap.remove(that.lengthMarker);
+      }
       if (e.obj.getExtData().type != "newLine") {
         map.remove(that.markerOverlays);
         const device = that.createInfowindow("新增");
@@ -1037,19 +1068,29 @@ class gaodeMap {
 
       if (e.obj && e.obj.getExtData().type == "newLine") {
         console.log("挂上事件");
+        // that.mouseTool.overlays.polyLine = [];
+        // 清空当前算距离用的内部数组
+        that.mouseTool.overlays.polyline = [];
+
         that.newLineAddEvent(e.obj);
+        // 测距结束
+        that.ruler.turnOff(true);
+        // console.log(e.obj)
         e.obj.on("mouseover", () => {
           e.obj.setOptions({ strokeColor: "#F7FE38" });
         });
         e.obj.on("mouseout", () => {
           e.obj.setOptions({ strokeColor: "#80d8ff" });
         });
+
         // 记录这条线
         // console.log(e.obj.getPath().length)
         // 如果只有一个点，并没有连成线的时候就不close 大于一个点的时候才执行clse
-        console.log(that.lineType);
+        // console.log(that.lineType);
         if (e.obj.getPath().length > 1) {
           that.newLineObj = e.obj;
+
+          that.ruler.turnOff(true);
           that.mouseTool.close();
         } else {
           // that.newLineObj = null;
@@ -1182,6 +1223,9 @@ class gaodeMap {
   closeAddMarker() {
     this.mouseTool.close();
     map.remove(this.markerOverlays);
+    if (this.lengthMarker) {
+      this.myMap.remove(this.lengthMarker);
+    }
   }
   // 只上图没功能
   onlyLine(obj) {