zqq:遥感影像页绘制矩形

src/components/Map.vue

@@ -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, {
@@ -59,28 +61,28 @@ const mapOperations = {
     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){
+    if (attr[0].feature.geometry.type.indexOf('Polygon') == -1) {
-      homeMap.flyTo([attr[0].feature.geometry.coordinates[1],attr[0].feature.geometry.coordinates[0]],3)
+      homeMap.flyTo([attr[0].feature.geometry.coordinates[1], attr[0].feature.geometry.coordinates[0]], 3)
     }
-     // 判断审核的数据类型，如果是面则计算中心点 然后再fly
+    // 判断审核的数据类型，如果是面则计算中心点 然后再fly
-    else{
+    else {
-      let polygons=[];
+      let polygons = [];
-      for(let i=0;i<attr[0].feature.geometry.coordinates.length;i++){
+      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=[]
+      let features = []
-      for(let i=0;i<centers.length;i++){
+      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
 
@@ -301,16 +303,16 @@ const mapOperations = {
     // console.log('2-2')
     variableStore.layerGroupPoint = null
     featureLayerG_point.clearLayers()
-    homeMap.pm.enableDraw('Polygon',{ snappable: false });
+    homeMap.pm.enableDraw('Polygon', { snappable: false });
-    let polygon=null;
+    let polygon = null;
-    homeMap.on("pm:create",(e)=>{
+    homeMap.on("pm:create", (e) => {
       featureLayerG_area.clearLayers()
       e.layer.setStyle({
         color: '#FF0080',
         opacity: 1,
       })
       e.layer.addTo(featureLayerG_area)
-      polygon=e.layer    
+      polygon = e.layer
     })
     // featureLayerG_area.clearLayers()
     // variableStore.layerGroupPoly=null;
@@ -349,7 +351,7 @@ const mapOperations = {
     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);