多图斑绘制
parent
8c6cea2cc2
commit
881da6519c
|
|
@ -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({
|
||||
|
|
@ -204,7 +247,6 @@
|
|||
|
||||
// 初始化绘图空间
|
||||
const handlerInitDrawTool = (feature) => {
|
||||
|
||||
|
||||
geojson.geojson = feature;
|
||||
|
||||
|
|
@ -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 = {};
|
||||
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)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
// 图斑定位
|
||||
|
|
|
|||
Loading…
Reference in New Issue