From 40502ca82235114bf84c168bde38ff5d433abcdc Mon Sep 17 00:00:00 2001
From: qqGroup0 <253114712@qq.com>
Date: Sun, 23 Apr 2023 19:54:02 +0800
Subject: [PATCH] =?UTF-8?q?zqq:=E9=81=A5=E6=84=9F=E5=BD=B1=E5=83=8F?=
 =?UTF-8?q?=E5=90=88=E5=B9=B6=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Map.vue | 266 +++++++++++++++++++++++++----------------
 1 file changed, 164 insertions(+), 102 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index 6c4740c..b22f2fd 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -2,25 +2,27 @@
   <div ref="map"
        class="container"></div>
 </template>
-
-<script setup>
+        
+        <script setup>
 import { ref, onMounted } from 'vue'
 import WKT from 'terraformer-wkt-parser'
-import * as turf from '@turf/turf'
+
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-draw/dist/leaflet.draw'
 import 'leaflet-draw/dist/leaflet.draw.css'
-import '@geoman-io/leaflet-geoman-free';  
-import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';  
+import '@geoman-io/leaflet-geoman-free';
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
 import 'Leaflet-ImageOverlay-Rotated'
 import { useVariableStore } from '/@/stores/index.ts'
 import * as omnivore from '@mapbox/leaflet-omnivore'
 const variableStore = useVariableStore()
 const map = ref()
 let homeMap = null
+let text = null
 let featureLayerG_area = null
 let featureLayerG_point = null
+let layerRectangle = null
 
 onMounted(() => {
   homeMap = L.map(map.value, {
@@ -42,8 +44,92 @@ onMounted(() => {
     tileSize: 256,
     zoomOffset: 1,
   }).addTo(homeMap)
-  
-
+  text = new L.Draw.Polygon(homeMap)
+  L.drawLocal = {
+    draw: {
+      handlers: {
+        circle: {
+          tooltip: {
+            start: '单击并拖动可绘制圆',
+          },
+          radius: '半径',
+        },
+        circlemarker: {
+          tooltip: {
+            start: '点击地图放置圆形标记',
+          },
+        },
+        marker: {
+          tooltip: {
+            start: '点击地图放置标记，Esc取消',
+          },
+        },
+        polygon: {
+          tooltip: {
+            start: '点击开始绘制，Esc取消',
+            cont: '单击以继续绘制，Esc取消',
+            end: '单击第一个点完成绘制，Esc取消',
+          },
+        },
+        polyline: {
+          error: '<strong>异常:</strong> 形状边缘不能交叉!',
+          tooltip: {
+            start: '点击开始绘制，Esc取消',
+            cont: '单击以继续绘制，Esc取消',
+            end: '双击完成绘制，Esc取消',
+          },
+        },
+        rectangle: {
+          tooltip: {
+            start: '单击并拖动以绘制矩形',
+            end: '完成',
+          },
+        },
+        simpleshape: {
+          tooltip: {
+            end: '释放鼠标完成绘图',
+          },
+        },
+      },
+    },
+    edit: {
+      toolbar: {
+        actions: {
+          save: {
+            title: '保存改动',
+            text: '保存',
+          },
+          cancel: {
+            title: '取消编辑，丢弃所有更改',
+            text: '取消',
+          },
+          clearAll: {
+            title: '清除所有标记',
+            text: '清除所有',
+          },
+        },
+        buttons: {
+          edit: '编辑图层',
+          editDisabled: '不需要编辑图层',
+          remove: '删除图层',
+          removeDisabled: '没有要删除的图层',
+        },
+      },
+      handlers: {
+        edit: {
+          tooltip: {
+            text: '拖动节点或标记来编辑图形',
+            subtext: '单击“取消”撤消更改',
+          },
+        },
+        remove: {
+          tooltip: {
+            text: '单击某个标记进行删除',
+          },
+        },
+      },
+    },
+  }
   featureLayerG_area = L.layerGroup().addTo(homeMap)
   featureLayerG_point = L.layerGroup().addTo(homeMap)
 })
@@ -56,34 +142,14 @@ onMounted(() => {
    */
 const mapOperations = {
   wktParseToMap: (res) => {
-    let layer = omnivore.wkt.parse(res)
-    layer.addTo(featureLayerG_point)
-    
-    let attr=Object.values(layer._layers) 
-    
-    // 判断审核的数据类型，如果是点则直接flyTo
-    if(attr[0].feature.geometry.type.indexOf('Polygon')==-1){
-      homeMap.flyTo([attr[0].feature.geometry.coordinates[1],attr[0].feature.geometry.coordinates[0]],3)
-    }
-     // 判断审核的数据类型，如果是面则计算中心点 然后再fly
-    else{
-      let polygons=[];
-      for(let i=0;i<attr[0].feature.geometry.coordinates.length;i++){
-        console.log(attr[0].feature.geometry.coordinates[i])
-        polygons.push(turf.polygon([attr[0].feature.geometry.coordinates[i]]));
-      }
-      let centers = polygons.map(polygon => turf.centroid(polygon));
-      // console.log(centers)
-      let features=[]
-      for(let i=0;i<centers.length;i++){
-        features.push(turf.point(centers[i].geometry.coordinates))
-      }
-      let final_center=turf.center(turf.featureCollection(features))
-      // console.log(final_center)
-      homeMap.flyTo([final_center.geometry.coordinates[1],final_center.geometry.coordinates[0]],3)
-    }
-    return layer
-    
+    return omnivore.wkt.parse(res).addTo(featureLayerG_point)
+    // if(omnivore.wkt.parse(res) instanceof L.Marker){
+
+    // }
+    // else{
+    //   return omnivore.wkt.parse(res).addTo(featureLayerG_area )
+    // }
+
   },
   /** 添加点标注
    * Object param 参数集合
@@ -111,7 +177,7 @@ const mapOperations = {
   addInteractMarker: (lat, lon) => {
     featureLayerG_point.clearLayers()
     variableStore.layerGroupPoint = null
-    var marker = L.marker([lat, lon]).addTo(
+    var marker = L.marker([lat, lon], { draggable: true }).addTo(
       featureLayerG_point
     )
     let features = featureLayerG_point.toGeoJSON().features
@@ -123,7 +189,6 @@ const mapOperations = {
     // marker.on('click',function(){
     //   featureLayerG_point.removeLayer(marker)
     // })
-    
   },
   /** 添加多边形标注
    * Object param 参数集合
@@ -279,7 +344,10 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     variableStore.layerGroupPoint = null
     variableStore.layerGroupPoly = null
-    
+    if (variableStore.polygoncontrol == 'option2') {
+      text = new L.Draw.Polygon(homeMap)
+      text.enable()
+    }
   },
   /**
    * 清楚wkt添加的所有
@@ -301,86 +369,80 @@ const mapOperations = {
     // console.log('2-2')
     variableStore.layerGroupPoint = null
     featureLayerG_point.clearLayers()
-    homeMap.pm.enableDraw('Polygon',{ snappable: false });
-    let polygon=null;
-    homeMap.on("pm:create",(e)=>{
-      featureLayerG_area.clearLayers()
-      e.layer.setStyle({
-        color: '#FF0080',
-        opacity: 1,
-      })
-      e.layer.addTo(featureLayerG_area)  
-      polygon=e.layer    
-    }) 
     // featureLayerG_area.clearLayers()
     // variableStore.layerGroupPoly=null;
-    return polygon
+    text = new L.Draw.Polygon(homeMap)
+    text.enable()
   },
   clearPolygon: () => {
     // console.log('1-2')
-    
+    text.disable()
     featureLayerG_area.clearLayers()
     variableStore.layerGroupPoly = null
-    homeMap.pm.disableDraw();
     // variableStore.layerGroupPoint=null
     // featureLayerG_point.clearLayers()
   },
   drawCreated: () => {
-    
-    // homeMap.on('draw:created', function (elll) {
-    //   featureLayerG_area.clearLayers()
-    //   variableStore.layerGroupPoly = null
-    //   elll.layer.setStyle({
-    //     color: '#FF0080',
-    //     opacity: 1,
-    //   })
-    //   featureLayerG_area.addLayer(elll.layer)
-    //   let features = featureLayerG_area.toGeoJSON().features
-    //   // console.log(features)
-    //   variableStore.layerGroupPoly = features.map(function (feature) {
-    //     return WKT.convert(feature.geometry)
-    //   })
-    //   variableStore.layerGroupPoly =
-    //     variableStore.layerGroupPoly.join('\n')
-      
-    // })
-  },
-  Edit: () => {
-    homeMap.pm.enableGlobalEditMode({
-      allowSelfIntersection: false,
+    // console.log("2-3")
+    homeMap.on('draw:created', function (elll) {
+      featureLayerG_area.clearLayers()
+      variableStore.layerGroupPoly = null
+      elll.layer.setStyle({
+        color: '#FF0080',
+        opacity: 1,
+      })
+      featureLayerG_area.addLayer(elll.layer)
+      let features = featureLayerG_area.toGeoJSON().features
+      // console.log(features)
+      variableStore.layerGroupPoly = features.map(function (feature) {
+        return WKT.convert(feature.geometry)
+      })
+      variableStore.layerGroupPoly =
+        variableStore.layerGroupPoly.join('\n')
+      text.enable()
     })
-    if(featureLayerG_area.getLayers().length==1){
-      featureLayerG_area.eachLayer(function (layer) {
-        layer.on('pm:edit', (e) => {
-          let features = featureLayerG_area.toGeoJSON().features
-          variableStore.layerGroupPoly = features.map(function (feature) {
-            return WKT.convert(feature.geometry)
-          })
-          variableStore.layerGroupPoly = variableStore.layerGroupPoly.join('\n')
-        });
-      });
-    }
-    else if(featureLayerG_point.getLayers().length==1){
-      featureLayerG_point.eachLayer(function (layer) {
-        layer.on('pm:edit', (e) => {
-          let features = featureLayerG_point.toGeoJSON().features
-          variableStore.layerGroupPoint = features.map(function (feature) {
-            return WKT.convert(feature.geometry)
-          })
-          variableStore.layerGroupPoint = variableStore.layerGroupPoint.join('\n')
-        });
-      });
-    }
-    else{
-      console.log('error')
-    }
-    
-    
   },
+  drawDestroyed: () => {
+    homeMap.off('draw:created', function (elll) {
+      elll.layer.setStyle({
+        color: '#FF0080',
+        opacity: 1,
+      })
+      featureLayerG_area.addLayer(elll.layer)
+      let features = featureLayerG_area.toGeoJSON().features
+      // console.log(features)
+      variableStore.layerGroupPoly = features.map(function (feature) {
+        return WKT.convert(feature.geometry)
+      })
+      variableStore.layerGroupPoly =
+        variableStore.layerGroupPoly.join('\n')
+      text = new L.Draw.Polygon(homeMap)
+      text.enable()
+    })
+  },
+  drawRectangle: () => {
+    if (layerRectangle != null) {
+      homeMap.removeLayer(layerRectangle)
+      layerRectangle = null
+    }
+    homeMap.pm.enableDraw('Rectangle', {
+      snappable: true,
+      snapDistance: 20,
+    });
+    homeMap.on('pm:create', (e) => {
+      L.PM.reInitLayer(e.layer);
+      layerRectangle = e.layer
+    });
+  },
+  deleteRectangle: () => {
+    homeMap.removeLayer(layerRectangle)
+  }
+
 }
 //omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);
 
 defineExpose({
   mapOperations,
 })
-</script>
+        </script>
+        
\ No newline at end of file