绘制虚线

src/utils/OpMap/measureTool.js

@@ -78,9 +78,9 @@ Vue.prototype.$setMeatureTool = function(parms) {
   }
 };
 /*测量长度*/
-Vue.prototype.$setMeatureLength = function(hiddenPoi) {
+Vue.prototype.$setMeatureLength = function(hiddenPoi, dashLine) {
   var type = "LineString";
-  this.$addInteraction(type, hiddenPoi);
+  this.$addInteraction(type, hiddenPoi, dashLine);
 };
 /*测量面积*/
 Vue.prototype.$setMeatureArea = function() {
@@ -96,12 +96,12 @@ Vue.prototype.$setMeatureClear = function() {
   }
   this.$removeLayer({ layerId: "Retrieval" });
 };
-Vue.prototype.$addInteraction = function(type, hiddenPoi) {
+Vue.prototype.$addInteraction = function(type, hiddenPoi, dashLine) {
   var self = this;
   if (!this.$getLayer({ layerId: "measureTool" })) {
     createlayer();
   }
-  adddraw(type);
+  adddraw(type, undefined, dashLine);
   createMeasureTooltip();
   createHelpTooltip();
   var listener;
@@ -200,7 +200,8 @@ Vue.prototype.$formatLength = function(line) {
   return output;
 };
 /*画画*/
-function adddraw(type, lx) {
+function adddraw(type, lx, dashLine) {
+  debugger;
   Vue.prototype.$Map.removeInteraction(measureToolArry.draw);
   if (lx != undefined) {
     measureToolArry.draw = new Draw({
@@ -240,6 +241,31 @@ function adddraw(type, lx) {
         return geometry;
       }
     });
+  } else if (dashLine !== undefined) {
+    console.log(dashLine);
+    measureToolArry.draw = new Draw({
+      source: measureToolArry.measure,
+      type: type,
+      style: new Style({
+        fill: new Fill({
+          color: "rgba(0,0,0,0.2)"
+        }),
+        stroke: new Stroke({
+          color: "rgba(0, 0, 0, 0.5)",
+          lineDash: [10, 10],
+          width: 2
+        }),
+        image: new CircleStyle({
+          radius: 5,
+          stroke: new Stroke({
+            color: "rgba(0, 0, 0, 0.7)"
+          }),
+          fill: new Fill({
+            color: "rgba(255, 255, 255, 0.2)"
+          })
+        })
+      })
+    });
   } else {
     measureToolArry.draw = new Draw({
       source: measureToolArry.measure,
@@ -278,6 +304,7 @@ function createlayer() {
         color: "rgba(0,225,255,0.4)"
       }),
       stroke: new Stroke({
+        lineDash: [1, 2, 3, 4, 5, 6],
         color: "#3070ff",
         width: 2
       }),

src/views/HeaderOne.vue

 <!--
  * @Author: zhaopenglong
  * @Date: 2021-07-06 16:17:54
- * @LastEditTime: 2021-09-11 21:09:10
+ * @LastEditTime: 2021-09-11 22:30:31
  * @LastEditors: 赵鹏龙
  * @Description: In User Settings Edit
  * @FilePath: \map_vue\src\views\HeaderWithStyleOne\header.vue
@@ -231,6 +231,15 @@
                 margin-bottom: 5px;"
           >开始分析</el-button
         >
+        <el-button
+          size="mini"
+          @click="deleteSearch(item)"
+          style="background: transparent;
+                color: #00c6f9;
+                margin-left: 50px;
+                margin-bottom: 5px;"
+          >删除</el-button
+        >
       </div>
     </div>
   </div>
@@ -364,11 +373,6 @@ export default {
         self
           .$getInteractions({ layerId: `drawLayer${self.drawCircleNumber}` })
           .setActive(false);
-        // let inCircleMessage = self.getPhoneInCircle(
-        //   e.feature.getGeometry().getExtent(),
-        //   self.tableData
-        // );
-
         self.$emit("showLeftDialog", false); //先将左侧弹出框关闭
         self.pointTimePickerOption.geometry = e.feature.getGeometry();
         self.pointTimePickerOption.caseRange = (
@@ -466,7 +470,7 @@ export default {
      */
 
     drawLine() {
-      this.$setMeatureLength(true);
+      this.$setMeatureLength(true, "dashLine");
     },
     changeCurType(item) {
       this.$emit("changeCurTypeFunc", item.type);
@@ -535,6 +539,7 @@ export default {
     },
     //左上角的开始分析
     beginSearch(item) {
+      console.log("beginSearch()");
       let self = this;
       let returnArray = [];
       this.tableData.forEach(each => {
@@ -561,6 +566,19 @@ export default {
       this.getSetArray(returnArray, `drawLayer${self.drawCircleNumber}`);
       this.$emit("sendRightTableData", returnArray);
     },
+    // 左上角的删除图层
+    deleteSearch(item) {
+      console.log(item);
+      let self = this;
+      // 区域碰撞的图层
+      this.$setVisible({
+        layerId: `drawLayer${self.drawCircleNumber}`,
+        Visible: false
+      });
+      // 将 点位渲染的数组置为空值
+      this.circleArray = [];
+      // 给右侧的数组置为空
+    },
     uploadFile() {
       let self = this;
       let file = this.file;

src/views/creatActiveMain.vue

@@ -587,6 +587,7 @@ export default {
         ShowDisplay: false,
         id: "map"
       });
+      window.map = self.$Map;
       self.zoom = self.$Map.getView().getZoom();
     },
     toolButton() {