<!-- 量尺模式 -->
|
<template>
|
<div class="container"></div>
|
</template>
|
|
<script>
|
import cesiumOperation from '@/utils/cesium-tsa'
|
import cpoint from '@/assets/images/cpoint.png'
|
const {
|
addLeftClickEvent,
|
removeLeftClickEvent,
|
removeById,
|
addRightClickEvent,
|
removeRightClickEvent,
|
globalCesium
|
} = cesiumOperation()
|
|
export default {
|
data () {
|
return {
|
positions: [],
|
menuPopup: null,
|
temporaryPointsDeleted: null,
|
alldistance: 0,
|
}
|
},
|
methods: {
|
// Prevent default Event
|
preventDefault (event) {
|
event.preventDefault()
|
},
|
init () {
|
addLeftClickEvent(null, this.handleMapClick)
|
addRightClickEvent(null, this.RightClickEvent)
|
let cesium = document.getElementById('cesium')
|
cesium.addEventListener('contextmenu', this.preventDefault)
|
},
|
remove () {
|
removeLeftClickEvent()
|
let cesium = document.getElementById('cesium')
|
cesium.removeEventListener('contextmenu', this.preventDefault)
|
if (this.menuPopup) {
|
window.$viewer.container.removeChild(this.menuPopup)
|
}
|
removeRightClickEvent()
|
removeById('route_planning')
|
removeById('alldistanceshow')
|
this.positions.forEach((_position, index) => {
|
removeById('created_point_' + index)
|
removeById('distance_' + index)
|
})
|
},
|
// 左键点击事件
|
handleMapClick (click) {
|
if (this.menuPopup) {
|
window.$viewer.container.removeChild(this.menuPopup)
|
this.menuPopup = null
|
}
|
const { position } = click
|
const ellipsoid = window.$viewer.scene.globe.ellipsoid
|
const c3Position = window.$viewer.scene.globe.pick(
|
window.$viewer.camera.getPickRay(position),
|
window.$viewer.scene,
|
)
|
const c2Postion = ellipsoid.cartesianToCartographic(c3Position)
|
const longitude = globalCesium.Math.toDegrees(c2Postion.longitude)
|
const latitude = globalCesium.Math.toDegrees(c2Postion.latitude)
|
this.positions.push({ longitude, latitude })
|
this.createWayline(this.positions)
|
},
|
// 创建点位
|
createWayline (positions) {
|
this.alldistance = 0
|
const cartesian3Arr = []
|
positions.forEach((position, index) => {
|
removeById('created_point_' + index)
|
removeById('distance_' + index)
|
const cartesian3 = globalCesium.Cartesian3.fromDegrees(
|
Number(position.longitude),
|
Number(position.latitude),
|
0,
|
)
|
cartesian3Arr.push(cartesian3)
|
window.$viewer.entities.add({
|
id: 'created_point_' + index,
|
position: cartesian3,
|
billboard: {
|
image: cpoint,
|
pixelOffset: new globalCesium.Cartesian2(0, -13),
|
outlineWidth: 0,
|
width: 30,
|
height: 30,
|
scale: 1.0,
|
},
|
})
|
// 给最后一个点增加总长度展示
|
if (this.positions.length == index + 1 && this.alldistance != 0) {
|
removeById('alldistanceshow')
|
window.$viewer.entities.add({
|
position: cartesian3,
|
id: 'alldistanceshow',
|
label: {
|
text: `总长度：${this.alldistance}m`,
|
font: '12px monospace',
|
showBackground: true,
|
horizontalOrigin: globalCesium.HorizontalOrigin.CENTER,
|
verticalOrigin: globalCesium.VerticalOrigin.BOTTOM,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
pixelOffset: new globalCesium.Cartesian2(40, 20),
|
},
|
})
|
}
|
//给每个点增加右击事件
|
addRightClickEvent('created_point_' + index, this.RightClickEvent)
|
|
if (positions[index + 1]) {
|
const next = positions[index + 1]
|
const { longitude: nextLng, latitude: nextLat } = next
|
const nextPoint = globalCesium.Cartesian3.fromDegrees(nextLng, nextLat, 0)
|
// 获取中心点
|
const centerPoint = globalCesium.Cartesian3.lerp(
|
cartesian3,
|
nextPoint,
|
0.5,
|
new globalCesium.Cartesian3(),
|
)
|
// 获取两个点之间的距离并展示
|
let distance = globalCesium.Cartesian3.distance(cartesian3, nextPoint)
|
distance = Math.round(distance)
|
this.alldistance = this.alldistance + distance
|
if (positions.length < 1 || distance === 0) return
|
this.createDistanceLabel(centerPoint, distance, index)
|
}
|
})
|
removeById('route_planning')
|
window.$viewer.entities.add({
|
id: 'route_planning',
|
polyline: {
|
width: 7,
|
positions: cartesian3Arr,
|
material: new globalCesium.PolylineOutlineMaterialProperty({
|
color: globalCesium.Color.WHITE,
|
outlineWidth: 2,
|
outlineColor: globalCesium.Color.BLUE,
|
}),
|
clampToGround: false,
|
},
|
})
|
},
|
createDistanceLabel (position, dist, index) {
|
return window.$viewer.entities.add({
|
position: position,
|
id: 'distance_' + index,
|
label: {
|
text: `${dist}m`,
|
font: '12px monospace',
|
showBackground: true,
|
horizontalOrigin: globalCesium.HorizontalOrigin.CENTER,
|
verticalOrigin: globalCesium.VerticalOrigin.BOTTOM,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
pixelOffset: new globalCesium.Cartesian2(0, -0),
|
},
|
})
|
},
|
// 添加右键菜单
|
RightClickEvent (click, pick, viewer) {
|
if (this.menuPopup) {
|
window.$viewer.container.removeChild(this.menuPopup)
|
this.menuPopup = null
|
}
|
if (this.positions.length == 0) return
|
const { position } = click
|
const { x, y } = position
|
this.menuPopup = this.createMenuPopup(pick)
|
this.menuPopup.addEventListener('click', this.appendPoint)
|
this.menuPopup.style.transform = `translate3d(${x}px, ${y}px, 0)`
|
window.$viewer.container.appendChild(this.menuPopup)
|
if (!pick) return
|
this.temporaryPointsDeleted = pick.id._id
|
},
|
// 创建弹窗
|
createMenuPopup (pick) {
|
const menuPopup = document.createElement('div')
|
menuPopup.className = 'create-wayline-menu'
|
const arr = [
|
{ title: '删除点位', class: 'del-wayline' },
|
{ title: '清空', class: 'remove-all' },
|
]
|
// 只有对点位进行右击时，才能单独进行点位删除
|
if (!pick || ['route_planning', 'drone_dock'].includes(pick.id._id)) {
|
arr.splice(0, 1)
|
}
|
arr.forEach((item) => {
|
const title = document.createElement('div')
|
title.innerText = item.title
|
title.style.fontSize = '14px'
|
title.style.padding = '5px'
|
title.className = item.class
|
menuPopup.appendChild(title)
|
})
|
return menuPopup
|
},
|
// 对航点增加点击事件
|
appendPoint (e) {
|
const className = e.target.className
|
window.$viewer.container.removeChild(this.menuPopup)
|
this.menuPopup = null
|
removeById('route_planning')
|
removeById('alldistanceshow')
|
this.positions.forEach((_position, index) => {
|
removeById('created_point_' + index)
|
removeById('distance_' + index)
|
})
|
// 清空
|
if (className === 'remove-all') {
|
this.positions = []
|
}
|
// 单点删除
|
else {
|
this.positions.splice(this.temporaryPointsDeleted.split('_')[2], 1)
|
this.createWayline(this.positions)
|
}
|
},
|
},
|
mounted () {
|
this.init()
|
},
|
beforeUnmount () {
|
this.remove()
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.create-wayline-menu {
|
width: 'fit-content';
|
background: url('@/assets/images/newcon_box.png') no-repeat center / 100% 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
color: #fff;
|
font-size: 16px;
|
|
div {
|
padding: 5px 10px;
|
cursor: pointer;
|
font-weight: bold;
|
|
&:hover {
|
background-color: rgba(0, 0, 0, 0.3);
|
}
|
}
|
}
|
</style>
|
