|
|
|
@ -6,7 +6,7 @@ |
|
|
|
<div class="position-box"> |
|
|
|
<div v-if="showPosition" class="mr-10"> |
|
|
|
<span class="mr-8 font-12">经度</span> |
|
|
|
<input class="my-input" v-model="lng" @keyup.enter="goPosition" placeholder="请输入"></input> |
|
|
|
<input class="my-input" v-model="long" @keyup.enter="goPosition" placeholder="请输入"></input> |
|
|
|
<span class="ml-16 mr-8 font-12">纬度</span> |
|
|
|
<input class="my-input" v-model="lat" @keyup.enter="goPosition" placeholder="请输入"></input> |
|
|
|
</div> |
|
|
|
@ -25,7 +25,11 @@ const viewerClick = (e) => { |
|
|
|
plot.edit(e.graphic, () => { |
|
|
|
console.log('编辑viewerClick >>>>> ', e.graphic, graphicsList) |
|
|
|
let res = graphicsList.find(item => item.graphicId === e.graphic.graphicId); |
|
|
|
res.position = e.graphic.position; |
|
|
|
console.log('res >>>>> ', res) |
|
|
|
if(res){ |
|
|
|
res.position = e.graphic.position; |
|
|
|
res.positions = e.graphic.positions; |
|
|
|
} |
|
|
|
viewerRemoveEventListener(); |
|
|
|
viewerAddEventListener(); |
|
|
|
}); |
|
|
|
@ -45,9 +49,10 @@ const viewerRemoveEventListener = () => { |
|
|
|
const handleKeyUpFunc = (e) => { |
|
|
|
if (e.key === 'Delete') { |
|
|
|
if (currentGraphic) { |
|
|
|
console.log('删除currentGraphic? >>>>> ', currentGraphic) |
|
|
|
plot.stop(); |
|
|
|
layer.removeGraphic(currentGraphic); |
|
|
|
graphicsList = graphicsList.filter(item => item.id !== currentGraphic.id); |
|
|
|
graphicsList = graphicsList.filter(item => item.graphicId !== currentGraphic.graphicId); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
@ -98,8 +103,9 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
defaultHeight: 50000, |
|
|
|
isFullScreen: false, |
|
|
|
lng: '', |
|
|
|
long: '', |
|
|
|
lat: '', |
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -131,8 +137,18 @@ export default { |
|
|
|
this.initMap(); |
|
|
|
}, 50); |
|
|
|
}, |
|
|
|
beforeUnmount(){ |
|
|
|
viewer = null |
|
|
|
plot = null |
|
|
|
layer = null |
|
|
|
currentGraphic = null |
|
|
|
graphicsList = [] |
|
|
|
window.removeEventListener('keyup', handleKeyUpFunc) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initMap() { |
|
|
|
graphicsList = [] |
|
|
|
currentGraphic = null |
|
|
|
viewer = new sycim.Viewer("cesiumContainer01"); |
|
|
|
window.viewer = viewer; |
|
|
|
let baseLayer = sycim.ImageryLayerFactory.createImageryLayer( |
|
|
|
@ -158,15 +174,14 @@ export default { |
|
|
|
); |
|
|
|
setTimeout(() => { |
|
|
|
viewer.scene.camera.setView({ |
|
|
|
// 广州坐标 |
|
|
|
destination: new Cesium.Cartesian3.fromDegrees(113.27, 23.13, 20000), |
|
|
|
orientation: { |
|
|
|
heading: 0, |
|
|
|
pitch: -89.7, |
|
|
|
roll: 0, |
|
|
|
}, |
|
|
|
duration: 2, |
|
|
|
}); |
|
|
|
destination: new Cesium.Cartesian3.fromDegrees(113.27, 23.13, this.defaultHeight), |
|
|
|
orientation: { |
|
|
|
heading: 0, |
|
|
|
pitch: -90, |
|
|
|
roll: 0, |
|
|
|
}, |
|
|
|
duration: 2, |
|
|
|
}); |
|
|
|
}, 300); |
|
|
|
}, |
|
|
|
handleKeyUpFunc(e){ |
|
|
|
@ -177,20 +192,23 @@ export default { |
|
|
|
triggerFullScreen(){ |
|
|
|
this.isFullScreen = !this.isFullScreen; |
|
|
|
}, |
|
|
|
setMapCenter(long,lat, height = this.defaultHeight, duration = 2){ |
|
|
|
viewer.scene.camera.setView({ |
|
|
|
destination: new Cesium.Cartesian3.fromDegrees(long, lat, height), |
|
|
|
orientation: { |
|
|
|
heading: 0, |
|
|
|
pitch: -90, |
|
|
|
roll: 0, |
|
|
|
}, |
|
|
|
duration: duration, |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 定位 |
|
|
|
goPosition() { |
|
|
|
console.log("goPosition", this.lng, this.lat); |
|
|
|
if (this.lng && this.lat) { |
|
|
|
if(!isNaN(this.lng) && !isNaN(this.lat)){ |
|
|
|
viewer.scene.camera.setView({ |
|
|
|
destination: new Cesium.Cartesian3.fromDegrees(Number(this.lng), Number(this.lat), 10000), |
|
|
|
orientation: { |
|
|
|
heading: 0, |
|
|
|
pitch: -90, |
|
|
|
roll: 0, |
|
|
|
}, |
|
|
|
duration: 2, |
|
|
|
}); |
|
|
|
console.log("goPosition", this.long, this.lat); |
|
|
|
if (this.long && this.lat) { |
|
|
|
if(!isNaN(this.long) && !isNaN(this.lat)){ |
|
|
|
this.setMapCenter(Number(this.long), Number(this.lat)); |
|
|
|
} else{ |
|
|
|
this.$message.error("请输入数字类型的经纬度"); |
|
|
|
} |
|
|
|
@ -200,6 +218,7 @@ export default { |
|
|
|
}, |
|
|
|
// 根据传入的entries还原点线等 |
|
|
|
initEntries(entries){ |
|
|
|
graphicsList = [] |
|
|
|
layer?.clear() |
|
|
|
if(!layer){ |
|
|
|
layer = new sycim.EntityLayer('layer').addTo(viewer) |
|
|
|
@ -261,7 +280,6 @@ export default { |
|
|
|
viewerRemoveEventListener(); |
|
|
|
viewerAddEventListener(); |
|
|
|
// plot.edit(graphicItem, () => { |
|
|
|
// console.log('编辑完成2222222222222?? >>>') |
|
|
|
// graphicItem.setStyle({ noPushMid: true }); |
|
|
|
// }); |
|
|
|
} |
|
|
|
@ -271,7 +289,6 @@ export default { |
|
|
|
|
|
|
|
// 画点线等 |
|
|
|
draw(type, iconName){ |
|
|
|
console.log('draw---type >>>>> ', type, iconName) |
|
|
|
let plotOptions = { |
|
|
|
scale: 1, |
|
|
|
image: `/icons/${iconName}`, |
|
|
|
@ -323,11 +340,12 @@ export default { |
|
|
|
positions: graphicItem.positions, |
|
|
|
icon: iconName, |
|
|
|
}); |
|
|
|
plot.edit(graphicItem, () => { |
|
|
|
graphicItem.setStyle({ noPushMid: true }); |
|
|
|
viewerRemoveEventListener(); |
|
|
|
viewerAddEventListener(); |
|
|
|
}); |
|
|
|
viewerAddEventListener(); |
|
|
|
// plot.edit(graphicItem, () => { |
|
|
|
// graphicItem.setStyle({ noPushMid: true }); |
|
|
|
// viewerRemoveEventListener(); |
|
|
|
// viewerAddEventListener(); |
|
|
|
// }); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
潘裕艺
10 months ago