flyTo
This commit is contained in:
刘旋
parent
e05ae8c05d
commit
12397d3556
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
// if(omnivore.wkt.parse(res) instanceof L.Marker){
|
||||
let layer = omnivore.wkt.parse(res)
|
||||
layer.addTo(featureLayerG_point)
|
||||
let attr=Object.values(layer._layers)
|
||||
|
||||
// }
|
||||
// else{
|
||||
// return omnivore.wkt.parse(res).addTo(featureLayerG_area )
|
||||
// }
|
||||
// 判断审核的数据类型，如果是点则直接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
|
||||
|
||||
},
|
||||
/** 添加点标注
|
||||
|
|
@ -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) {
|
||||
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()
|
||||
})
|
||||
|
||||
// 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')
|
||||
|
||||
// })
|
||||
},
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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.on("click", mapClick)
|
||||
// mapRef.value.mapOperations.clearPolygon()
|
||||
mapRef.value.mapOperations.on("click", mapClick)
|
||||
mapRef.value.mapOperations.on("mousemove", changelatlon)
|
||||
variableStore.polygoncontrol = "option1"
|
||||
}else{
|
||||
|
|
|
|||
Loading…
Reference in New Issue