<template>
|
<div></div>
|
</template>
|
|
<script setup>
|
import * as Cesium from 'cesium';
|
|
import { ElMessage } from 'element-plus';
|
import { sdfwUpdate } from '@/api/home/territory';
|
|
let curPolygonPosition = [];
|
let savePolygonPosition = [];
|
let curPolygon = null;
|
let curPolygonEntity = null;
|
let curPolygonObj = null;
|
|
let menuPanel = null;
|
let saveMenuPanel = null;
|
|
const selectionIds = inject('selectionIds');
|
const clearSelect = inject('clearSelect');
|
const getTableList = inject('getTableList')
|
|
const viewInstance = inject('viewInstance');
|
const homeViewer = inject('homeViewer');
|
watch(
|
() => selectionIds.value,
|
(newValue, oldValue) => {
|
if (newValue && oldValue && newValue !== oldValue) {
|
cancel();
|
}
|
}
|
);
|
function preventDefault(event) {
|
event.preventDefault();
|
|
return;
|
}
|
|
function init() {
|
// let draw = new Draw(homeViewer.value);
|
// draw.drawPlane();
|
curPolygon = new Cesium.PolygonHierarchy();
|
curPolygonEntity = new Cesium.Entity();
|
homeViewer.value.scene.globe.depthTestAgainstTerrain = true;
|
|
viewInstance.value.addLeftClickEvent(null, addPlanerPointEvent, 'drawCustomPolygon');
|
viewInstance.value.addRightClickEvent(null, addPlanarMenuEvent, 'drawCustomPolygon');
|
viewInstance.value.addMouseHandler(null, mouseMoveEvent, 'drawCustomPolygon');
|
}
|
|
function mouseMoveEvent(movement, viewer) {
|
const mouseInfo = viewInstance.value.getMouseInfoAll(movement.endPosition);
|
|
const { x, y } = mouseInfo.windowPosition;
|
|
if (!menuPanel) {
|
menuPanel = createMenuPanel();
|
viewer.container.appendChild(menuPanel);
|
}
|
|
menuPanel.style.transform = `translate3d(${x}px, ${y}px, 0)`;
|
|
if (
|
curPolygonObj &&
|
mouseInfo.surfacePosition &&
|
mouseInfo.surfacePosition != null &&
|
curPolygonPosition.length >= 1
|
) {
|
curPolygonPosition.pop();
|
curPolygonPosition.push(mouseInfo.surfacePosition);
|
|
curPolygon.positions.pop();
|
curPolygon.positions.push(mouseInfo.surfacePosition);
|
}
|
}
|
|
function addPlanerPointEvent(click, pick) {
|
const { position } = click;
|
|
const mouseInfo = viewInstance.value.getMouseInfoAll(position);
|
|
if (mouseInfo.surfacePosition && mouseInfo.surfacePosition != null) drawCustomPolygon(mouseInfo);
|
}
|
|
function addPlanarMenuEvent(click, pick, viewer) {
|
if (savePolygonPosition.length <= 2) {
|
ElMessage.warning('当前绘制无法形成面，请继续绘制或取消绘制！！');
|
|
return;
|
}
|
const { position } = click;
|
|
const mouseInfo = viewInstance.value.getMouseInfoAll(position);
|
|
remove();
|
removeMenuPanel();
|
|
if (mouseInfo.surfacePosition && mouseInfo.surfacePosition != null) drawCustomPolygon(mouseInfo);
|
|
const { x, y } = position;
|
saveMenuPanel = createSaveMenuPanel();
|
saveMenuPanel.addEventListener('click', saveMenuClickEvent);
|
saveMenuPanel.style.transform = `translate3d(${x}px, ${y}px, 0)`;
|
viewer.container.appendChild(saveMenuPanel);
|
}
|
|
function createSaveMenuPanel() {
|
const menuPanel = document.createElement('div');
|
menuPanel.className = 'planar-menu-panel';
|
|
const arr = [
|
{ title: '提交绘制', class: 'save-draw' },
|
{ title: '重新绘制', class: 'anew-draw' },
|
];
|
|
arr.forEach(item => {
|
const title = document.createElement('div');
|
title.innerText = item.title;
|
title.className = item.class;
|
menuPanel.appendChild(title);
|
});
|
|
return menuPanel;
|
}
|
|
function saveMenuClickEvent(e) {
|
const className = e.target.className;
|
if (className === 'save-draw') {
|
updatePolygon();
|
}
|
if (className == 'anew-draw') {
|
cancel();
|
}
|
|
removeSaveMenuPanel();
|
}
|
|
function removeSaveMenuPanel() {
|
if (saveMenuPanel) {
|
homeViewer.value.container?.removeChild(saveMenuPanel);
|
saveMenuPanel.removeEventListener('click', saveMenuClickEvent);
|
saveMenuPanel = null;
|
}
|
}
|
|
function createMenuPanel() {
|
const menuPanel = document.createElement('div');
|
menuPanel.className = 'planar-menu-panel';
|
|
const title = document.createElement('div');
|
title.innerText = '左击选择点位，右击结束';
|
title.className = 'proof-custom-add-polygon';
|
menuPanel.appendChild(title);
|
|
return menuPanel;
|
}
|
|
function removeMenuPanel() {
|
if (menuPanel) {
|
homeViewer.value.container?.removeChild(menuPanel);
|
menuPanel = null;
|
}
|
}
|
|
function drawCustomPolygon(point) {
|
if (curPolygonPosition.length == 0) {
|
curPolygonPosition.push(point.surfacePosition.clone());
|
curPolygon.positions.push(point.surfacePosition.clone());
|
}
|
|
savePolygonPosition.push(point.wgs84SurfacePosition);
|
curPolygonPosition.push(point.surfacePosition.clone());
|
curPolygon.positions.push(point.surfacePosition.clone());
|
|
if (!curPolygonObj) {
|
curPolygonEntity.polyline = {
|
width: 2,
|
material: Cesium.Color.WHITE,
|
clampToGround: false,
|
};
|
|
curPolygonEntity.polyline.positions = new Cesium.CallbackProperty(function () {
|
return curPolygonPosition;
|
}, false);
|
|
curPolygonEntity.polygon = {
|
hierarchy: new Cesium.CallbackProperty(function () {
|
return curPolygon;
|
}, false),
|
|
material: Cesium.Color.fromCssColorString('#00ffff').withAlpha(0.4),
|
clampToGround: false,
|
};
|
curPolygonEntity.name = 'customProofPolygon';
|
|
curPolygonEntity._id = 'customProofPolygon';
|
curPolygonObj = homeViewer.value.entities.add(curPolygonEntity);
|
}
|
}
|
|
function clearPlanar() {
|
homeViewer.value.entities.remove(curPolygonObj);
|
curPolygonObj = null;
|
curPolygon = null;
|
curPolygonEntity = null;
|
curPolygonPosition = [];
|
savePolygonPosition = [];
|
}
|
|
function remove() {
|
viewInstance.value.removeLeftClickEvent('drawCustomPolygon');
|
viewInstance.value.removeRightClickEvent('drawCustomPolygon');
|
viewInstance.value.removeMouseHandler('drawCustomPolygon');
|
}
|
|
const emit = defineEmits(['upDateDrawState']);
|
|
function updatePolygon() {
|
let polygon = savePolygonPosition.reduce((pre, cur) => {
|
pre.push(`${cur.lng} ${cur.lat}`);
|
return pre;
|
}, []);
|
polygon.push(polygon[0]);
|
console.log('绘制', `POLYGON((${polygon.join(',')}))`);
|
// 接口
|
sdfwUpdate({
|
ids: selectionIds.value,
|
sdfw: `POLYGON((${polygon.join(',')}))`,
|
})
|
.then(res => {
|
if (selectionIds.value) {
|
emit('upDateDrawState')
|
selectionIds.value = null
|
clearSelect()
|
}
|
|
if (res.data.code !== 0) return ElMessage.error(res.message)
|
ElMessage.success('重新绘制图斑成功！！')
|
getTableList()
|
})
|
.catch(e => {
|
cancel()
|
})
|
}
|
|
function cancel() {
|
remove();
|
removeMenuPanel();
|
clearPlanar();
|
removeSaveMenuPanel();
|
init();
|
}
|
|
onMounted(() => {
|
document.addEventListener('contextmenu', preventDefault);
|
|
init();
|
});
|
|
onBeforeUnmount(() => {
|
document.removeEventListener('contextmenu', preventDefault);
|
|
remove();
|
removeMenuPanel();
|
removeSaveMenuPanel();
|
clearPlanar();
|
|
homeViewer.value.scene.globe.depthTestAgainstTerrain = false;
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
p {
|
text-indent: 2em;
|
color: #ffffff;
|
font-size: 18px;
|
}
|
|
.export-btns {
|
margin-top: 44px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
|
.el-button {
|
background-color: transparent !important;
|
}
|
}
|
.proof-custom-add-polygon {
|
position: absolute;
|
left: 20px;
|
background: rgba(0, 0, 0, 0.6);
|
white-space: nowrap;
|
border-radius: 4px;
|
|
&::after {
|
content: '';
|
position: absolute;
|
left: -3px;
|
top: calc(50% - 2px);
|
width: 0;
|
height: 0;
|
border-top: 4px solid rgba(0, 0, 0, 0.6);
|
border-left: 4px solid rgba(0, 0, 0, 0.6);
|
border-right: 4px solid transparent;
|
border-bottom: 4px solid transparent;
|
transform: rotate(-45deg);
|
}
|
}
|
</style>
|
