diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue index 9a22851f..2cd02dd6 100644 --- a/src/components/MapboxMaps/MapComponent.vue +++ b/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{ + + for(let i=0;i { return new mapboxgl.Map({ @@ -204,7 +247,6 @@ // 初始化绘图空间 const handlerInitDrawTool = (feature) => { - geojson.geojson = feature; @@ -228,7 +270,15 @@ }); map.addControl(drawTool, "top-right"); + + // for(let i=0;i { - 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 = {}; + let geo = { + type: 'FeatureCollection', + features: [] + }; - if(feature==null){ - geo = { - type: "FeatureCollection", - features: [], - } + if(features==null){ + }else{ - let featureTemp = WktToGeojson(feature); - geo = { - type: "FeatureCollection", - features: [ - { - "id": "cd1d93c0e4a6747ff597f190c311d0e3", + if(features.length > 0){ + for(let i=0; i < features.length; i++){ + let featureTemp = WktToGeojson(features[i].value); + + featureTemp.type="Polygon"; + let feature = { + "id": "cd1d93c0e4a6747ff597f"+parseInt(1000000000*Math.random()).toString(), "type": "Feature", "properties": {}, "geometry": featureTemp } - ], + geo.features.push(feature); + } } } - handlerInitDrawTool(geo) } diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue index 4f6f25a6..441c4d83 100644 --- a/src/views/dashboard/analysis/index.vue +++ b/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) // 图斑定位