Merge branch 'main' of http://47.92.168.204:3000/VoRDM/vordm-admin into main
This commit is contained in:
刘旋
commit
c35e8635d6
|
|
@ -2,25 +2,27 @@
|
|||
<div ref="map"
|
||||
class="container"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<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'
|
||||
import 'leaflet-draw/dist/leaflet.draw.css'
|
||||
import '@geoman-io/leaflet-geoman-free';
|
||||
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
|
||||
import '@geoman-io/leaflet-geoman-free';
|
||||
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
|
||||
import 'Leaflet-ImageOverlay-Rotated'
|
||||
import { useVariableStore } from '/@/stores/index.ts'
|
||||
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
|
||||
let layerRectangle = null
|
||||
|
||||
onMounted(() => {
|
||||
homeMap = L.map(map.value, {
|
||||
|
|
@ -42,8 +44,92 @@ 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)
|
||||
})
|
||||
|
|
@ -56,34 +142,14 @@ onMounted(() => {
|
|||
*/
|
||||
const mapOperations = {
|
||||
wktParseToMap: (res) => {
|
||||
let layer = omnivore.wkt.parse(res)
|
||||
layer.addTo(featureLayerG_point)
|
||||
|
||||
let attr=Object.values(layer._layers)
|
||||
|
||||
// 判断审核的数据类型，如果是点则直接flyTo
|
||||
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
|
||||
|
||||
return omnivore.wkt.parse(res).addTo(featureLayerG_point)
|
||||
// if(omnivore.wkt.parse(res) instanceof L.Marker){
|
||||
|
||||
// }
|
||||
// else{
|
||||
// return omnivore.wkt.parse(res).addTo(featureLayerG_area )
|
||||
// }
|
||||
|
||||
},
|
||||
/** 添加点标注
|
||||
* Object param 参数集合
|
||||
|
|
@ -111,7 +177,7 @@ const mapOperations = {
|
|||
addInteractMarker: (lat, lon) => {
|
||||
featureLayerG_point.clearLayers()
|
||||
variableStore.layerGroupPoint = null
|
||||
var marker = L.marker([lat, lon]).addTo(
|
||||
var marker = L.marker([lat, lon], { draggable: true }).addTo(
|
||||
featureLayerG_point
|
||||
)
|
||||
let features = featureLayerG_point.toGeoJSON().features
|
||||
|
|
@ -123,7 +189,6 @@ const mapOperations = {
|
|||
// marker.on('click',function(){
|
||||
// featureLayerG_point.removeLayer(marker)
|
||||
// })
|
||||
|
||||
},
|
||||
/** 添加多边形标注
|
||||
* Object param 参数集合
|
||||
|
|
@ -279,7 +344,10 @@ const mapOperations = {
|
|||
featureLayerG_point.clearLayers()
|
||||
variableStore.layerGroupPoint = null
|
||||
variableStore.layerGroupPoly = null
|
||||
|
||||
if (variableStore.polygoncontrol == 'option2') {
|
||||
text = new L.Draw.Polygon(homeMap)
|
||||
text.enable()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 清楚wkt添加的所有
|
||||
|
|
@ -301,86 +369,80 @@ const mapOperations = {
|
|||
// console.log('2-2')
|
||||
variableStore.layerGroupPoint = null
|
||||
featureLayerG_point.clearLayers()
|
||||
homeMap.pm.enableDraw('Polygon',{ snappable: false });
|
||||
let polygon=null;
|
||||
homeMap.on("pm:create",(e)=>{
|
||||
featureLayerG_area.clearLayers()
|
||||
e.layer.setStyle({
|
||||
color: '#FF0080',
|
||||
opacity: 1,
|
||||
})
|
||||
e.layer.addTo(featureLayerG_area)
|
||||
polygon=e.layer
|
||||
})
|
||||
// featureLayerG_area.clearLayers()
|
||||
// variableStore.layerGroupPoly=null;
|
||||
return polygon
|
||||
text = new L.Draw.Polygon(homeMap)
|
||||
text.enable()
|
||||
},
|
||||
clearPolygon: () => {
|
||||
// console.log('1-2')
|
||||
|
||||
text.disable()
|
||||
featureLayerG_area.clearLayers()
|
||||
variableStore.layerGroupPoly = null
|
||||
homeMap.pm.disableDraw();
|
||||
// variableStore.layerGroupPoint=null
|
||||
// featureLayerG_point.clearLayers()
|
||||
},
|
||||
drawCreated: () => {
|
||||
|
||||
// homeMap.on('draw:created', function (elll) {
|
||||
// featureLayerG_area.clearLayers()
|
||||
// variableStore.layerGroupPoly = null
|
||||
// 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')
|
||||
|
||||
// })
|
||||
},
|
||||
Edit: () => {
|
||||
homeMap.pm.enableGlobalEditMode({
|
||||
allowSelfIntersection: false,
|
||||
// console.log("2-3")
|
||||
homeMap.on('draw:created', function (elll) {
|
||||
featureLayerG_area.clearLayers()
|
||||
variableStore.layerGroupPoly = null
|
||||
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.enable()
|
||||
})
|
||||
if(featureLayerG_area.getLayers().length==1){
|
||||
featureLayerG_area.eachLayer(function (layer) {
|
||||
layer.on('pm:edit', (e) => {
|
||||
let features = featureLayerG_area.toGeoJSON().features
|
||||
variableStore.layerGroupPoly = features.map(function (feature) {
|
||||
return WKT.convert(feature.geometry)
|
||||
})
|
||||
variableStore.layerGroupPoly = variableStore.layerGroupPoly.join('\n')
|
||||
});
|
||||
});
|
||||
}
|
||||
else if(featureLayerG_point.getLayers().length==1){
|
||||
featureLayerG_point.eachLayer(function (layer) {
|
||||
layer.on('pm:edit', (e) => {
|
||||
let features = featureLayerG_point.toGeoJSON().features
|
||||
variableStore.layerGroupPoint = features.map(function (feature) {
|
||||
return WKT.convert(feature.geometry)
|
||||
})
|
||||
variableStore.layerGroupPoint = variableStore.layerGroupPoint.join('\n')
|
||||
});
|
||||
});
|
||||
}
|
||||
else{
|
||||
console.log('error')
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
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()
|
||||
})
|
||||
},
|
||||
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);
|
||||
|
||||
defineExpose({
|
||||
mapOperations,
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue