zqq:遥感影像页绘制矩形

src/components/Map.vue

@@ -11,8 +11,8 @@ 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'
@@ -21,6 +21,8 @@ const map = ref()
 let homeMap = null
 let featureLayerG_area = null
 let featureLayerG_point = null
+let layerRectangle = null
+
 
 onMounted(() => {
   homeMap = L.map(map.value, {
@@ -42,7 +44,7 @@ onMounted(() => {
     tileSize: 256,
     zoomOffset: 1,
   }).addTo(homeMap)
-  
+
 
   featureLayerG_area = L.layerGroup().addTo(homeMap)
   featureLayerG_point = L.layerGroup().addTo(homeMap)
@@ -58,32 +60,32 @@ const mapOperations = {
   wktParseToMap: (res) => {
     let layer = omnivore.wkt.parse(res)
     layer.addTo(featureLayerG_point)
-    
-    let attr=Object.values(layer._layers) 
-    
+
+    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)
+    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++){
+    // 判断审核的数据类型，如果是面则计算中心点 然后再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++){
+      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))
+      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)
+      homeMap.flyTo([final_center.geometry.coordinates[1], final_center.geometry.coordinates[0]], 3)
     }
     return layer
-    
+
   },
   /** 添加点标注
    * Object param 参数集合
@@ -123,7 +125,7 @@ const mapOperations = {
     // marker.on('click',function(){
     //   featureLayerG_point.removeLayer(marker)
     // })
-    
+
   },
   /** 添加多边形标注
    * Object param 参数集合
@@ -279,7 +281,7 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     variableStore.layerGroupPoint = null
     variableStore.layerGroupPoly = null
-    
+
   },
   /**
    * 清楚wkt添加的所有
@@ -301,24 +303,24 @@ 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)=>{
+    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    
-    }) 
+      e.layer.addTo(featureLayerG_area)
+      polygon = e.layer
+    })
     // featureLayerG_area.clearLayers()
     // variableStore.layerGroupPoly=null;
     return polygon
   },
   clearPolygon: () => {
     // console.log('1-2')
-    
+
     featureLayerG_area.clearLayers()
     variableStore.layerGroupPoly = null
     homeMap.pm.disableDraw();
@@ -326,7 +328,7 @@ const mapOperations = {
     // featureLayerG_point.clearLayers()
   },
   drawCreated: () => {
-    
+
     // homeMap.on('draw:created', function (elll) {
     //   featureLayerG_area.clearLayers()
     //   variableStore.layerGroupPoly = null
@@ -342,14 +344,14 @@ const mapOperations = {
     //   })
     //   variableStore.layerGroupPoly =
     //     variableStore.layerGroupPoly.join('\n')
-      
+
     // })
   },
   Edit: () => {
     homeMap.pm.enableGlobalEditMode({
       allowSelfIntersection: false,
     })
-    if(featureLayerG_area.getLayers().length==1){
+    if (featureLayerG_area.getLayers().length == 1) {
       featureLayerG_area.eachLayer(function (layer) {
         layer.on('pm:edit', (e) => {
           let features = featureLayerG_area.toGeoJSON().features
@@ -360,7 +362,7 @@ const mapOperations = {
         });
       });
     }
-    else if(featureLayerG_point.getLayers().length==1){
+    else if (featureLayerG_point.getLayers().length == 1) {
       featureLayerG_point.eachLayer(function (layer) {
         layer.on('pm:edit', (e) => {
           let features = featureLayerG_point.toGeoJSON().features
@@ -371,12 +373,27 @@ const mapOperations = {
         });
       });
     }
-    else{
+    else {
       console.log('error')
     }
-    
-    
   },
+  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);