多图斑绘制

src/components/MapboxMaps/MapComponent.vue

@@ -52,6 +52,7 @@
     import {customDrawStyles} from './Styles/Styles'
     import Drawtool from '@/views/datamaintenance/components/drawtool.vue';
     import {WktToGeojson,GeojsonToWkt} from './src/WktGeojsonTransform'
+import { features } from 'process';
 
 
     const openModal = ref(false);
@@ -111,8 +112,12 @@
     let drawing = ref(false)
 
     let drawGeojson = reactive({
-        geojson:{}
+        geojson:{
+          type: "FeatureCollection",
+          features: [],
+        }
     })
+
     const { createConfirm, createMessage } = useMessage();
 
     // 定义地图回调emit
@@ -139,13 +144,19 @@
 
         // 设置绘图监听事件
         map.on("draw.create", function (e) {
-            drawGeojson.geojson = e.features[0] 
+            drawGeojson.geojson.features = e.features 
+            handlerDealFeature(e.features[0])
         });
 
         map.on("draw.update", function (e) {
-            drawGeojson.geojson = e.features[0] 
+            drawGeojson.geojson = e.features
+            handlerDealFeature(e.features[0])
         });
 
+        map.on("draw.delete",function(e){
+            handlerDeleteFeature(e.features[0]);
+        })
+
         window.handlerCopyFeature = handlerCopyFeature;
 
         });
@@ -156,6 +167,38 @@
         map ? map.remove() : null;
     });
 
+
+    // 数据绘制完成判断
+    const handlerDealFeature = (feature)=>{
+        let existFeature = geojson.geojson.features.find((item,index)=>{
+            return item.id == feature.id
+        })
+        
+        if(existFeature){ // 如果查找到了 则替换数据
+            for(let i=0;i<geojson.geojson.features.length;i++){
+                if(geojson.geojson.features[i].id == feature.id){
+                    geojson.geojson.features[i] = feature
+                }
+            }
+        }else{ // 如果没找到数据 则添加到数组
+            geojson.geojson.features.push(feature);
+        }
+        console.log("geojson.geojson",geojson.geojson);
+    }
+
+    // 删除数据
+    const handlerDeleteFeature = (feature)=>{
+        
+        for(let i=0;i<geojson.geojson.features.length;i++){
+
+            if(geojson.geojson.features[i].id==feature.id){
+                geojson.geojson.features.splice(i,1);
+            }
+        }
+        console.log("geojson.geojson",geojson.geojson);
+    }
+
+
     // 初始化地图 返回地图实例
     const initMap = () => {
         return new mapboxgl.Map({
@@ -205,7 +248,6 @@
     // 初始化绘图空间
     const handlerInitDrawTool = (feature) => {
 
-
         geojson.geojson = feature;
 
         drawTool = new MapboxDraw({
@@ -228,7 +270,15 @@
         });
 
         map.addControl(drawTool, "top-right");
+    
+        // for(let i=0;i<geojson.geojson.features.length;i++){
+        //     drawTool.add(geojson.geojson.features[i].geometry);
+        // }
         drawTool.set(geojson.geojson);
+        
+
+        
+        // 正在绘制
         drawing.value = true;
     }
 
@@ -396,7 +446,16 @@
     }
 
     const handlerDrawComplete = () => {
-        emit("handlerDrawComplete",GeojsonToWkt(drawGeojson.geojson.geometry))
+        let arr= [];
+        geojson.geojson.features.forEach((item,index)=>{
+            let wktStr = GeojsonToWkt(item.geometry)
+            let obj = {
+                columnValue:"mapgeom",
+                value:wktStr
+            }
+            arr.push(obj);
+        })
+        emit("handlerDrawComplete",arr)
     }
 
     const handlerCancleDraw = () => {
@@ -405,33 +464,33 @@
         // drawTool.set(geojson.geojson)
     }
 
-    const handlerDraw = (feature=null) =>{
+    const handlerDraw = (features=null) =>{
 
 
+        let geo = {
+            type: 'FeatureCollection',
+            features: []
+        };
 
-        let geo = {};
+        if(features==null){
            
-        if(feature==null){
-            geo = {
-                type: "FeatureCollection",
-                features: [],
-            }
         }else{
-            let featureTemp = WktToGeojson(feature);
+            if(features.length > 0){
-            geo = {
+                for(let i=0; i < features.length; i++){
-            type: "FeatureCollection",
+                    let featureTemp = WktToGeojson(features[i].value);
-            features: [
+
-                    {
+                    featureTemp.type="Polygon";
-                        "id": "cd1d93c0e4a6747ff597f190c311d0e3",
+                    let feature = {
+                        "id": "cd1d93c0e4a6747ff597f"+parseInt(1000000000*Math.random()).toString(),
                         "type": "Feature",
                         "properties": {},
                         "geometry": featureTemp
                     }
-                ],
+                    geo.features.push(feature);
+                }
             }
         }
         
-
         handlerInitDrawTool(geo)
     }
 

src/views/dashboard/analysis/index.vue

@@ -59,6 +59,39 @@
                     'line-width': 1
                 }
             }
+        },{
+            id:2,
+            name:"沂水县道路中心线2",
+            checked:false,
+            layer:{
+                'id': 'roadnetLine2',
+                'type': 'line',
+                'source': {
+                    type: 'vector',
+                    tiles: [ 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7'],
+                    minzoom: 1,
+                    maxzoom: 20
+                },
+                "source-layer": "yishuixian",
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'round'
+                },
+                'paint': {
+                    'line-color': [
+                    "case",
+                    ["==", ["get", "handle_status_id"], 0],
+                    "#E6A23C",
+                    ["==", ["get", "handle_status_id"], 1],
+                    "#409EFF",
+                    ["==", ["get", "handle_status_id"], 2],
+                    "#67C23A",
+                    // 默认
+                    "#E6A23C",
+                    ],
+                    'line-width': 1
+                }
+            }
         }
     ])
 
@@ -71,7 +104,18 @@
   // 图斑数据
   // const feature ="LINESTRING (118.55483239594203 35.81329409678203, 118.54889167836416 35.806406839795216, 118.55647247134772 35.80285975465173, 118.56157492816281 35.803303140294986)"
     //  const feature = "POLYGON ((118.54774514802972 35.80786133598188, 118.54515277045988 35.79816597053564, 118.55919536113471 35.80085134034624, 118.56021460056033 35.80462789316549, 118.5595188628206 35.80695604583504, 118.5580066425723 35.80815336506183, 118.54774514802972 35.80786133598188))"
-  // 绘图完成返回geom
+  
+  let drawFeatures = [{
+	"columnName": "mapgeom",
+	"value": "POLYGON ((118.55901684631719 35.8045110934671, 118.55946931550466 35.80449259041045, 118.55946551324392 35.80463444717644, 118.559024450841 35.80464061486234, 118.55901684631719 35.8045110934671))"
+}, {
+	"columnName": "mapgeom",
+	"value": "POLYGON ((118.5591119028685 35.804344565958516, 118.5594579087177 35.804344565958516, 118.55945410645693 35.80424279914757, 118.55910049608158 35.80423663146167, 118.5591119028685 35.804344565958516))"
+},  {
+	"columnName": "mapgeom",
+	"value": "POLYGON ((118.55922520818172 35.8049069756666, 118.5594647506927 35.80490080800186, 118.55945714616884 35.80477128705068, 118.55921380139475 35.804783622380114, 118.55922520818172 35.8049069756666))"
+}];
+    // 绘图完成返回geom
   const handlerDrawComplete = (geom)=>{
     console.log("绘制完成返回的图斑",geom);
   }
@@ -82,9 +126,9 @@
   // 添加 或者 编辑图斑
   setTimeout(function(){
     // 添加图斑
-    // MapboxComponent.value.handlerDraw()
-    // 编辑图斑
     MapboxComponent.value.handlerDraw()
+    // 编辑图斑
+    // MapboxComponent.value.handlerDraw(drawFeatures)
   },3000)
 
   // 图斑定位