|
|
|
@ -14,17 +14,7 @@ |
|
|
|
<span :class="['mapModel', 'iconSpan']" @click="modelChange" title="地图维度切换"> |
|
|
|
{{ modelText == "2D" ? "3D" : "2D" }} |
|
|
|
</span> |
|
|
|
<span :class="['selectIcon', 'iconSpan']" title="选取区域" @click="SelectArea"> |
|
|
|
<GatewayOutlined /> |
|
|
|
</span> |
|
|
|
<!-- <span :class="['testIcon', 'iconSpan']" title="测试" @click="test"> |
|
|
|
<GatewayOutlined /> |
|
|
|
</span> --> |
|
|
|
<a-popconfirm title="确认重置区域?" placement="right" ok-text="确认" cancel-text="取消" @confirm="clearArea"> |
|
|
|
<span :class="['clearIcon', 'iconSpan']" title="重置区域"> |
|
|
|
<FormatPainterOutlined /> |
|
|
|
</span> |
|
|
|
</a-popconfirm> |
|
|
|
|
|
|
|
<template v-if="editTileModel != undefined && modelText == '3D'"> |
|
|
|
<span class="buildManage iconSpan" @click="enableTileChange" title="建筑加载"> |
|
|
|
<img src="../../../../../../../assets/images/build_close.png" class="iconSize" v-show="!enableTile" /> |
|
|
|
@ -176,7 +166,7 @@ |
|
|
|
</template> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<!-- <EarthMapManage :show="mapManageShow"></EarthMapManage> --> |
|
|
|
|
|
|
|
</a-modal> |
|
|
|
</template> |
|
|
|
<script setup> |
|
|
|
@ -195,13 +185,13 @@ const { proxy } = getCurrentInstance(); |
|
|
|
const getMapPage = (params) => defHttp.get({ url: "/military/msMapManage/list/page", params: params }, { isTransformResponse: false }); |
|
|
|
// 鼠标样式 |
|
|
|
const cursorCss = ref("grab"); |
|
|
|
const props = defineProps(['areaData', 'drawData', 'title', 'visible', 'hasMoveMethod', 'initModeType', 'editTileModel', 'enableTile', 'enablePointer']); |
|
|
|
const props = defineProps(['title', 'visible', 'hasMoveMethod', 'initModeType', 'editTileModel', 'enableTile', 'enablePointer']); |
|
|
|
const { title, visible, hasMoveMethod, initModeType, editTileModel, enablePointer } = toRefs(props); |
|
|
|
// 禁用切片 |
|
|
|
const enableTile = ref(props.enableTile); |
|
|
|
const pointerXyz = ref([]); |
|
|
|
const defaultPinUrl = "../"; |
|
|
|
const emit = defineEmits(["closeWin", "checkPosition", "moveChinaPosition", 'update:areaData', 'update:drawData']) |
|
|
|
const emit = defineEmits(["closeWin", "checkPosition", "moveChinaPosition"]) |
|
|
|
// 确认事件 |
|
|
|
const handleOk = function () { |
|
|
|
let position = null; |
|
|
|
@ -222,14 +212,6 @@ const handleOk = function () { |
|
|
|
} |
|
|
|
handleCancel(); |
|
|
|
|
|
|
|
//整理数据 |
|
|
|
sceneTreeToAreaObjList() |
|
|
|
//上传-画图数据 |
|
|
|
updateDraw() |
|
|
|
//上传-监控范围数据 |
|
|
|
updateArea() |
|
|
|
//退出 |
|
|
|
handleCancel() |
|
|
|
} |
|
|
|
const handleCancel = function () { |
|
|
|
emit("closeWin"); |
|
|
|
@ -256,7 +238,6 @@ watch( |
|
|
|
addContainerClickListen(); |
|
|
|
await getDataSource(); |
|
|
|
moveChinaPosition(); |
|
|
|
await getDrawArea() |
|
|
|
}); |
|
|
|
|
|
|
|
} else { |
|
|
|
@ -266,187 +247,6 @@ watch( |
|
|
|
} |
|
|
|
) |
|
|
|
|
|
|
|
// ---------- 监控区域选择部分 ---------- |
|
|
|
//重置范围 |
|
|
|
const clearArea = function () { |
|
|
|
if (window.earth.sceneTree.root.children.length > 1) { |
|
|
|
window.earth.sceneTree.root.children.pop(); |
|
|
|
emit('clearAreaData') |
|
|
|
// message.success('重置成功，请保存设置'); |
|
|
|
} |
|
|
|
} |
|
|
|
// 区域模型数组 |
|
|
|
let areaObjList = ref([]) |
|
|
|
// 加载区域选择-多边形 |
|
|
|
const getDrawArea = function () { |
|
|
|
if (props.areaData || props.drawData) { |
|
|
|
areaObjList.value = JSON.parse(props.drawData) |
|
|
|
// console.log("aa",areaObjList.value); |
|
|
|
areaObjList.value.forEach((e) => { |
|
|
|
//绘画 |
|
|
|
let t = drawPolygonSave(e, 1) |
|
|
|
t.name = '区域选取' |
|
|
|
//存入store |
|
|
|
store.shapeShowList.push(t.xbsjGuid) |
|
|
|
//创建叶子节点 |
|
|
|
let leaf = new window.XE.SceneTree.Leaf(t) |
|
|
|
//添加叶子节点属性 |
|
|
|
leaf.ref = t.guid |
|
|
|
leaf.guid = t.guid; |
|
|
|
//push 场景树 |
|
|
|
window.earth.sceneTree.root.children.push(leaf); |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
// 加载区域选择-平滑多边形、圆弧 |
|
|
|
// const getDrawAreaSmooth = function () { |
|
|
|
// if (props.areaData || props.drawData) { |
|
|
|
// areaObjList.value = JSON.parse(props.drawData) |
|
|
|
// // console.log("aa",areaObjList.value); |
|
|
|
// areaObjList.value.forEach((e) => { |
|
|
|
// //绘画 |
|
|
|
// let t = drawGeoSmoothPolygon(e, 1) |
|
|
|
// t.name = '区域选取' |
|
|
|
// //存入store |
|
|
|
// store.shapeShowList.push(t.xbsjGuid) |
|
|
|
// //创建叶子节点 |
|
|
|
// let leaf = new window.XE.SceneTree.Leaf(t) |
|
|
|
// //添加叶子节点属性 |
|
|
|
// leaf.ref = t.guid |
|
|
|
// leaf.guid = t.guid; |
|
|
|
// //push 场景树 |
|
|
|
// window.earth.sceneTree.root.children.push(leaf); |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// } |
|
|
|
// 创建区域选择-多边形 |
|
|
|
const SelectArea = function () { |
|
|
|
console.log(window.earth.sceneTree.root.children); |
|
|
|
// 如果场景树中存在区域数据，则清除 |
|
|
|
if (window.earth.sceneTree.root.children.length > 1) { |
|
|
|
window.earth.sceneTree.root.children.pop(); |
|
|
|
} |
|
|
|
// 使用绘制方法 |
|
|
|
let t = drawPolygonSave(null, 1) |
|
|
|
t.creating = true |
|
|
|
t.creatingWithoutHeight = true |
|
|
|
t.ground = true |
|
|
|
t.name = '区域选取' |
|
|
|
//创建叶子节点 |
|
|
|
let leaf = new window.XE.SceneTree.Leaf(t) |
|
|
|
//添加叶子节点属性 |
|
|
|
leaf.ref = t.guid |
|
|
|
leaf.guid = t.guid; |
|
|
|
//push 场景树 |
|
|
|
window.earth.sceneTree.root.children.push(leaf); |
|
|
|
// areaObjList.value.push(t) |
|
|
|
// return t |
|
|
|
} |
|
|
|
// 创建区域选择-平滑多边形 |
|
|
|
// const SelectAreaSmooth = function () { |
|
|
|
// if (window.earth.sceneTree.root.children.length > 1) { |
|
|
|
// window.earth.sceneTree.root.children.pop(); |
|
|
|
// } |
|
|
|
// let t2 = drawGeoSmoothPolygon(null, 1); |
|
|
|
// console.log('t2', t2); |
|
|
|
// t2.creating = true |
|
|
|
// t2.creatingWithoutHeight = true |
|
|
|
// t2.ground = true |
|
|
|
// t2.name = '区域选取' |
|
|
|
// let leaf = new window.XE.SceneTree.Leaf(t2) |
|
|
|
// leaf.ref = t2.guid |
|
|
|
// leaf.guid = t2.guid |
|
|
|
// window.earth.sceneTree.root.children.push(leaf) |
|
|
|
// } |
|
|
|
//整理数据 |
|
|
|
// 将场景树中的模型数据转换到区域模型数组中 |
|
|
|
const sceneTreeToAreaObjList = function () { |
|
|
|
areaObjList.value = [] |
|
|
|
let sceneTree = window.earth.sceneTree.$refs |
|
|
|
for (let element in sceneTree) { |
|
|
|
if (sceneTree[element].title == "区域选取") { |
|
|
|
areaObjList.value.push(sceneTree[element].czmObject) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
//上传-画图数据 |
|
|
|
const updateDraw = function () { |
|
|
|
let drawDataToString = JSON.stringify(areaObjList.value) |
|
|
|
//上传-画图数据 |
|
|
|
if (drawDataToString == '[]') { |
|
|
|
emit('update:drawData', ''); |
|
|
|
} else { |
|
|
|
emit('update:drawData', drawDataToString); |
|
|
|
} |
|
|
|
} |
|
|
|
// 上传-监控范围数据（多边形） |
|
|
|
function updateArea() { |
|
|
|
//上传监控范围数据 |
|
|
|
let areaData = [] |
|
|
|
let k = 1; //序号 |
|
|
|
areaObjList.value.forEach((e) => { |
|
|
|
//全部弧度转角度 |
|
|
|
let positionToDegrees = [] |
|
|
|
e.positions.forEach((p) => { |
|
|
|
positionToDegrees.push(window.Cesium.Math.toDegrees(p)) |
|
|
|
}) |
|
|
|
//经纬度，两两切分 |
|
|
|
let result = [] |
|
|
|
for (let i = 0; i < positionToDegrees.length; i += 2) { |
|
|
|
result.push({ |
|
|
|
lon: positionToDegrees[i], //经度 |
|
|
|
lat: positionToDegrees[i + 1], //纬度 |
|
|
|
key: k //序号 |
|
|
|
}); |
|
|
|
k++; |
|
|
|
} |
|
|
|
areaData.push(result) |
|
|
|
}) |
|
|
|
// console.log("areaData", areaData); |
|
|
|
if (areaData.length == 0) { |
|
|
|
emit('update:areaData', ''); |
|
|
|
} else { |
|
|
|
emit('update:areaData', JSON.stringify(areaData)); |
|
|
|
} |
|
|
|
} |
|
|
|
// 上传-监控范围数据（平滑多边形、圆弧） |
|
|
|
// function updateAreaSmooth() { |
|
|
|
// //上传监控范围数据 |
|
|
|
// let areaData = [] |
|
|
|
// let k = 1 |
|
|
|
// areaObjList.value.forEach((e) => { |
|
|
|
// //弧度转角度 |
|
|
|
// let positionToDegrees = [] |
|
|
|
// e.positions.forEach((i) => { |
|
|
|
// let positionItem = [] |
|
|
|
// i.forEach(p => { |
|
|
|
// positionItem.push(window.Cesium.Math.toDegrees(p)) |
|
|
|
// }) |
|
|
|
// positionToDegrees.push(positionItem) |
|
|
|
// }) |
|
|
|
// //经纬度，两两切分 |
|
|
|
// let result = [] |
|
|
|
// for (let i = 0; i < positionToDegrees.length; i++) { |
|
|
|
// result.push({ |
|
|
|
// lon: positionToDegrees[i][0], //经度 |
|
|
|
// lat: positionToDegrees[i][1], //纬度 |
|
|
|
// key: k //序号 |
|
|
|
// }); |
|
|
|
// k++; |
|
|
|
// } |
|
|
|
// areaData.push(result) |
|
|
|
// console.log(result); |
|
|
|
// }) |
|
|
|
// // emit('update:areaData', JSON.stringify(areaData)); |
|
|
|
// if (areaData.length == 0) { |
|
|
|
// emit('update:areaData', ''); |
|
|
|
// } else { |
|
|
|
// emit('update:areaData', JSON.stringify(areaData)); |
|
|
|
// } |
|
|
|
// } |
|
|
|
// const test = function () { |
|
|
|
// _viewer.camera.moveLeft(100000) |
|
|
|
// } |
|
|
|
|
|
|
|
const mapManageShow = ref(false); |
|
|
|
const modelText = ref('2D'); |
|
|
|
@ -916,7 +716,6 @@ defineExpose( |
|
|
|
); |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
.container {} |
|
|
|
|
|
|
|
.fill-9-row { |
|
|
|
width: 90%; |
|
|
|
@ -966,12 +765,6 @@ defineExpose( |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.testIcon { |
|
|
|
position: absolute; |
|
|
|
top: 188px; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.clearIcon { |
|
|
|
position: absolute; |
|
|
|
top: 144px; |
|
|
|
|
