flyTo

package.json

@@ -13,6 +13,7 @@
 		"@element-plus/icons-vue": "^2.1.0",
 		"@geoman-io/leaflet-geoman-free": "^2.14.2",
 		"@mapbox/leaflet-omnivore": "^0.3.4",
+		"@turf/turf": "^6.5.0",
 		"@vueup/vue-quill": "^1.0.0-alpha.40",
 		"axios": "^1.3.4",
 		"echarts": "^5.4.2",

src/components/Map.vue

@@ -6,7 +6,7 @@
 <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'
@@ -19,7 +19,6 @@ 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
 
@@ -43,92 +42,8 @@ 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)
 })
@@ -141,13 +56,32 @@ onMounted(() => {
    */
 const mapOperations = {
   wktParseToMap: (res) => {
-    return omnivore.wkt.parse(res).addTo(featureLayerG_point)
+    let layer = omnivore.wkt.parse(res)
-    // if(omnivore.wkt.parse(res) instanceof L.Marker){
+    layer.addTo(featureLayerG_point)
-      
+    let attr=Object.values(layer._layers) 
-    // }
+    
-    // else{
+    // 判断审核的数据类型，如果是点则直接flyTo
-    //   return omnivore.wkt.parse(res).addTo(featureLayerG_area )
+    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
     
   },
   /** 添加点标注
@@ -343,10 +277,7 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     variableStore.layerGroupPoint = null
     variableStore.layerGroupPoly = null
-    if (variableStore.polygoncontrol == 'option2') {
+    
-      text = new L.Draw.Polygon(homeMap)
-      text.enable()
-    }
   },
   /**
    * 清楚wkt添加的所有
@@ -370,54 +301,38 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     // featureLayerG_area.clearLayers()
     // variableStore.layerGroupPoly=null;
-    text = new L.Draw.Polygon(homeMap)
+    
-    text.enable()
   },
   clearPolygon: () => {
     // console.log('1-2')
-    text.disable()
+    
     featureLayerG_area.clearLayers()
     variableStore.layerGroupPoly = null
     // variableStore.layerGroupPoint=null
     // featureLayerG_point.clearLayers()
   },
   drawCreated: () => {
-    // console.log("2-3")
+    
-    homeMap.on('draw:created', function (elll) {
+    // homeMap.on('draw:created', function (elll) {
-      featureLayerG_area.clearLayers()
+    //   featureLayerG_area.clearLayers()
-      variableStore.layerGroupPoly = null
+    //   variableStore.layerGroupPoly = null
-      elll.layer.setStyle({
+    //   elll.layer.setStyle({
-        color: '#FF0080',
+    //     color: '#FF0080',
-        opacity: 1,
+    //     opacity: 1,
-      })
+    //   })
-      featureLayerG_area.addLayer(elll.layer)
+    //   featureLayerG_area.addLayer(elll.layer)
-      let features = featureLayerG_area.toGeoJSON().features
+    //   let features = featureLayerG_area.toGeoJSON().features
-      // console.log(features)
+    //   // console.log(features)
-      variableStore.layerGroupPoly = features.map(function (feature) {
+    //   variableStore.layerGroupPoly = features.map(function (feature) {
-        return WKT.convert(feature.geometry)
+    //     return WKT.convert(feature.geometry)
-      })
+    //   })
-      variableStore.layerGroupPoly =
+    //   variableStore.layerGroupPoly =
-        variableStore.layerGroupPoly.join('\n')
+    //     variableStore.layerGroupPoly.join('\n')
-      text.enable()
+      
-    })
+    // })
   },
   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()
-    })
   },
 }
 //omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);

src/views/responseManagement/userResponse/index.vue

@@ -164,6 +164,7 @@ import "leaflet/dist/leaflet.css";
 import 'leaflet-draw/dist/leaflet.draw'
 import 'leaflet-draw/dist/leaflet.draw.css'
 import { map } from 'lodash';
+import * as turf from '@turf/turf'
 const variableStore = useVariableStore();
 const mapRef = ref();
 const activeName = ref('first');
@@ -247,8 +248,8 @@ const onOpenEditRole = (type, row) => {
 };
 const mapEvents = (ev)=>{
   if(ev == '1'){    
-    mapRef.value.mapOperations.clearPolygon()
+    // mapRef.value.mapOperations.clearPolygon()
-    // mapRef.value.mapOperations.on("click", mapClick)
+    mapRef.value.mapOperations.on("click", mapClick)
     mapRef.value.mapOperations.on("mousemove", changelatlon)
     variableStore.polygoncontrol = "option1"
   }else{