From 2d90fa3dc99fced159d0bc76939fd9b88e6aafe1 Mon Sep 17 00:00:00 2001
From: wangyawei <1796609990@qq.com>
Date: 星期五, 18 四月 2025 14:23:28 +0800
Subject: [PATCH] 接入视频流
---
src/components/tools/LayerTree.vue | 331 ++++++++++++++++++---------------
src/components/tools/Aspect.vue | 22 +
src/utils/tools.js | 108 +++++-----
src/components/tools/SlopeAnalysis.vue | 10 -
src/components/tools/Tools.vue | 81 ++++---
5 files changed, 301 insertions(+), 251 deletions(-)
diff --git a/src/components/tools/Aspect.vue b/src/components/tools/Aspect.vue
index bd9a949..d34eb04 100644
--- a/src/components/tools/Aspect.vue
+++ b/src/components/tools/Aspect.vue
@@ -1,14 +1,20 @@
// 鍧″悜鍒嗘瀽
<template>
<div class="aspect">
- <el-button @click="handleDraw">缁樺埗鍖哄煙</el-button>
- <el-button @click="handleClear">鍏抽棴鍧″害</el-button>
+ <div>
+ <el-button @click="handleDraw">缁樺埗鍖哄煙</el-button>
+ <el-button @click="handleClear">鍏抽棴鍧″害</el-button>
+ </div>
+ <div style="margin-top: 10px">
+ <el-button @click="handleaspect">鍧″害鍒嗘瀽</el-button>
+ <el-button @click="handleSlope">鍧″悜鍒嗘瀽</el-button>
+ </div>
</div>
</template>
<script setup>
import { reactive, defineEmits } from "vue";
// 瀹氫箟 emit 鏂规硶
-const emit = defineEmits(["draw", "clear"]);
+const emit = defineEmits(["draw", "clear", "handleaspect", "handleSlope"]);
const handleDraw = () => {
console.log("缁樺埗鍖哄煙");
emit("draw");
@@ -17,11 +23,19 @@
console.log("鍏抽棴鍧″害");
emit("clear");
};
+const handleaspect = () => {
+ console.log("鍧″害鍒嗘瀽");
+ emit("handleaspect");
+};
+const handleSlope = () => {
+ console.log("鍧″悜鍒嗘瀽");
+ emit("handleSlope");
+};
</script>
<style lang="less" scoped>
.aspect {
width: 215px;
- height: 50px;
+ // height: 50px;
background: url("@/assets/img/tools/plotting_new.png") no-repeat;
filter: opacity(83%);
background-size: 100% 100%;
diff --git a/src/components/tools/LayerTree.vue b/src/components/tools/LayerTree.vue
index 5955992..293fbfd 100644
--- a/src/components/tools/LayerTree.vue
+++ b/src/components/tools/LayerTree.vue
@@ -1,22 +1,29 @@
<template>
<div class="layer-tree">
+ <<<<<<< HEAD <el-tree ref="treeRef" style="max-width: 600px" show-checkbox node-key="label" :default-checked-keys="defaultSelectedKeys" @check-change="handleCheckChange" :data="treeData" />
+ =======
<el-tree ref="treeRef" style="max-width: 600px" show-checkbox node-key="label" :default-checked-keys="defaultSelectedKeys" @check-change="handleCheckChange" :data="treeData" />
+ >>>>>>> f82eb01fe65e513fb43342db0e25cafa0e0d2db8
</div>
</template>
<script setup>
-import { ref, onMounted, onBeforeUnmount, watch, onUnmounted } from "vue"
-import { createPoint, removeEntities, addTileset } from "@/utils/map"
-import { deviceDictList, getDictName } from "@/constant/dict.js"
-import { useRoute } from "vue-router"
-import { loadAreaPolygon, clearAreaPolygon } from '@/utils/area'
-import { checkedKeys } from '@/store/index'
-import { getDuanMainData } from '@/api/index.js'
-const route = useRoute()
+import { ref, onMounted, onBeforeUnmount, watch, onUnmounted } from "vue";
+import { createPoint, removeEntities, addTileset } from "@/utils/map";
+import { deviceDictList, getDictName } from "@/constant/dict.js";
+import { useRoute } from "vue-router";
+import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area";
+import { checkedKeys } from "@/store/index";
+import { getDuanMainData } from "@/api/index.js";
+const route = useRoute();
const treeData = ref([
{
label: "涓夌淮鏈嶅姟",
- children: [{ label: "妯″瀷鏁版嵁" }, { label: "鍦板舰鏁版嵁" }, { label: "褰卞儚鏁版嵁" }],
+ children: [
+ { label: "妯″瀷鏁版嵁" },
+ { label: "鍦板舰鏁版嵁" },
+ { label: "褰卞儚鏁版嵁" },
+ ],
},
{
label: "鍥惧眰鏁版嵁",
@@ -41,40 +48,39 @@
},
],
},
-])
-const treeRef = ref(null)
-const treeMap = new Map()
-const defaultSelectedKeys = ref(["妯″瀷鏁版嵁", "褰卞儚鏁版嵁", "鍦板舰鏁版嵁"])
+]);
+const treeRef = ref(null);
+const treeMap = new Map();
+const defaultSelectedKeys = ref(["妯″瀷鏁版嵁", "褰卞儚鏁版嵁", "鍦板舰鏁版嵁"]);
function handleCheckChange (data, checked, indeterminate) {
- const label = data.label
- const list = treeMap.get(label)
+ const label = data.label;
+ const list = treeMap.get(label);
if (list) {
- toggleLayerVisible(label, checked)
- return
+ toggleLayerVisible(label, checked);
+ return;
}
switch (label) {
case "妯″瀷鏁版嵁":
- list.show = checked
- break
+ list.show = checked;
+ break;
case "鍖椾含甯傞殣鎮ｇ偣":
- console.log("鍖椾含甯傞殣鎮ｇ偣", checked, indeterminate)
- break
+ console.log("鍖椾含甯傞殣鎮ｇ偣", checked, indeterminate);
+ break;
case "瀛欒儭娌熼殣鎮ｇ偣":
- console.log("瀛欒儭娌熼殣鎮ｇ偣", checked, indeterminate)
- break
+ console.log("瀛欒儭娌熼殣鎮ｇ偣", checked, indeterminate);
+ break;
case "娉ョ煶娴侀殣鎮ｇ偣闈㈡暟鎹�":
- console.log("娉ョ煶娴侀殣鎮ｇ偣闈㈡暟鎹�", checked, indeterminate)
- break
+ console.log("娉ョ煶娴侀殣鎮ｇ偣闈㈡暟鎹�", checked, indeterminate);
+ break;
case "缁煎悎鐩戞祴璁惧淇℃伅":
- console.log("缁煎悎鐩戞祴璁惧淇℃伅", checked, indeterminate)
- break
+ console.log("缁煎悎鐩戞祴璁惧淇℃伅", checked, indeterminate);
+ break;
case "瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�":
- console.log("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", checked, indeterminate)
- break
+ console.log("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", checked, indeterminate);
+ break;
case "閬块櫓鐐�":
- addTetrahedron()
- break
-
+ addTetrahedron();
+ break;
}
}
function initMap () {
@@ -92,6 +98,11 @@
sourceType: "ctb",
url: "http://106.120.22.26:9103/gisserver/ctsserver/llmbdem",
})
+ // let TerrainLayer = earthCtrl.factory.createTerrainLayer({
+ // sourceType: "ctb",
+ // url: "https://tiles1.geovisearth.com/base/v1/terrain?token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
+ // requestVertexNormals: true,
+ // });
// treeMap.set("褰卞儚鏁版嵁", ImageryLayer)
treeMap.set("鍦板舰鏁版嵁", TerrainLayer)
}
@@ -257,23 +268,23 @@
latitude: 40.533623,
longitude: 116.602406,
},
-])
+]);
-function initDevicePoint () {
- let list = []
+function initDevicePoint() {
+ let list = [];
- devicetList.value.forEach(item => {
- item.type = getDictName(deviceDictList, item.dictDeviceType)
- item.name = item.type
- item.id = item.deviceId
- item.className = "device"
- item.showLabel = true
- const entity = createPoint(item)
- entity.show = false
+ devicetList.value.forEach((item) => {
+ item.type = getDictName(deviceDictList, item.dictDeviceType);
+ item.name = item.type;
+ item.id = item.deviceId;
+ item.className = "device";
+ item.showLabel = true;
+ const entity = createPoint(item);
+ entity.show = false;
- list.push(entity)
- })
- treeMap.set("缁煎悎鐩戞祴璁惧淇℃伅", list)
+ list.push(entity);
+ });
+ treeMap.set("缁煎悎鐩戞祴璁惧淇℃伅", list);
}
const districtList = ref([
@@ -301,7 +312,8 @@
monitor: "",
monitorAdvice: "",
name: "灏瑰瑗挎矡灏瑰缓鐕曞灞嬪悗宕╁闅愭偅鐐�",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉伙紝绔嬭绀虹墝",
@@ -352,7 +364,8 @@
monitor: "",
monitorAdvice: "",
name: "娌宠タ浜庡嚖鑻卞灞嬪悗宕╁闅愭偅鐐�",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉伙紝绔嬭绀虹墝",
@@ -403,7 +416,8 @@
monitor: "",
monitorAdvice: "",
name: "鍗楁灏忎笢娌熸偿鐭虫祦闅愭偅鐐�",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡,绔嬭绀虹墝",
@@ -454,7 +468,8 @@
monitor: "",
monitorAdvice: "",
name: "澶х獞娌熸偿鐭虫祦闅愭偅鐐�",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "宸茬洃娴嬨�佸凡娌荤悊",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉伙紝绔嬭绀虹墝",
@@ -505,7 +520,8 @@
monitor: "",
monitorAdvice: "",
name: "澶т笢娌熸偿鐭虫祦闅愭偅鐐�",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "宸叉不鐞�",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉�",
@@ -556,8 +572,10 @@
monitor: "",
monitorAdvice: "",
name: "灏瑰瑗挎矡娉ョ煶娴侀殣鎮ｇ偣",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
- preventionDes: "宸茬洃娴嬶紱鐏惧浣撳彉鍖栵細4澶勫潯绉墿鍨锛屽爢绉嚦鍧¤剼锛屾柟閲忕害20m鲁銆�",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ preventionDes:
+ "宸茬洃娴嬶紱鐏惧浣撳彉鍖栵細4澶勫潯绉墿鍨锛屽爢绉嚦鍧¤剼锛屾柟閲忕害20m鲁銆�",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉�",
preventionUnit: "涔￠晣",
@@ -607,7 +625,8 @@
monitor: "",
monitorAdvice: "",
name: "鍖楀ぇ鍦拌タ娲煎瓙娌熸偿鐭虫祦闅愭偅鐐�",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "娌熷彛姝ｅ鎴垮眿锛岄檷闆ㄦ椂鍑烘按閲忓ぇ锛屽缓璁不鐞嗭紝姹涙湡鍔犲己宸℃煡",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉伙紝绔嬭绀虹墝",
@@ -658,7 +677,8 @@
monitor: "",
monitorAdvice: "",
name: "鑼冨搴勭帇绉�鑾插灞嬪悗宕╁闅愭偅鐐�",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "杈瑰潯杈冮櫋锛岄『鍚戝博灞傦紝鎴垮眿闈犺繎鍧¤剼锛屽缓璁敖蹇不鐞�",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉伙紝绔嬭绀虹墝",
@@ -709,7 +729,8 @@
monitor: "",
monitorAdvice: "",
name: "涓変憨鍦拌寖蹇犵敯瀹跺眿鍚庡穿濉岄殣鎮ｇ偣",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉伙紝鏇存崲璀︾ず鐗�",
@@ -760,8 +781,10 @@
monitor: "",
monitorAdvice: "",
name: "浜庡瑗挎矡娉ョ煶娴侀殣鎮ｇ偣",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
- preventionDes: "宸茬洃娴嬶紝2018鏉戝凡娌荤悊锛涙矡鍙ｅ爢绉墖鏄庢樉锛屾瀵规埧灞嬶紝寤鸿姹涙湡鍔犲己宸℃煡",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ preventionDes:
+ "宸茬洃娴嬶紝2018鏉戝凡娌荤悊锛涙矡鍙ｅ爢绉墖鏄庢樉锛屾瀵规埧灞嬶紝寤鸿姹涙湡鍔犲己宸℃煡",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉�",
preventionUnit: "涔￠晣",
@@ -811,7 +834,8 @@
monitor: "",
monitorAdvice: "",
name: "妞存爲搴曚笅涓滄矡娉ョ煶娴侀殣鎮ｇ偣",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "宸叉不鐞嗭細濞佽儊瀵硅薄閲嶅锛氫笌110116030015閲嶅5鎴�11浜�",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡锛岄璀﹁浆绉伙紝绔嬭绀虹墝",
@@ -862,7 +886,8 @@
monitor: "",
monitorAdvice: "",
name: "娌充笢鍗楁矡娉ョ煶娴侀殣鎮ｇ偣",
- number: "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
+ number:
+ "13716108909,13716029391,13716291714,13716191943,13716427398,13124792612",
preventionDes: "宸茬洃娴�",
preventionLevel: "",
preventionPlan: "瀹氭湡宸℃煡,绔嬭绀虹墝",
@@ -889,40 +914,39 @@
volumePotential: "",
width: 0,
},
-])
+]);
-function initDistrictPoint () {
- let list = []
- districtList.value.forEach(item => {
- item.showBillboard = true
- item.className = "district"
- item.type = '娉ョ煶娴�'
- const entity = createPoint(item)
- entity.show = false
- list.push(entity)
- })
- treeMap.set("瀛欒儭娌熼殣鎮ｇ偣", list)
+function initDistrictPoint() {
+ let list = [];
+ districtList.value.forEach((item) => {
+ item.showBillboard = true;
+ item.className = "district";
+ item.type = "娉ョ煶娴�";
+ const entity = createPoint(item);
+ entity.show = false;
+ list.push(entity);
+ });
+ treeMap.set("瀛欒儭娌熼殣鎮ｇ偣", list);
}
+let divPointList = [];
-let divPointList = []
+function initDuanmianPoint() {
+ getDuanMainData().then((res) => {
+ const duanmianList = res.data;
+ const list = [];
+ duanmianList.forEach((item) => {
+ item.id = item.id + item.alias;
+ item.name = item.alias;
+ item.longitude = item.lon;
+ item.latitude = item.lat;
+ item.showBillboard = false;
+ item.className = "district";
-function initDuanmianPoint () {
- getDuanMainData().then(res => {
- const duanmianList = res.data
- const list = []
- duanmianList.forEach(item => {
- item.id = item.id + item.alias
- item.name = item.alias
- item.longitude = item.lon
- item.latitude = item.lat
- item.showBillboard = false
- item.className = "district"
-
- const entity = createPoint(item)
- entity.show = false
- list.push(entity)
- return
+ const entity = createPoint(item);
+ entity.show = false;
+ list.push(entity);
+ return;
const divPoint = earthCtrl.factory.createDivPoint(
item.alias,
{ lon: longitude, lat: latitude },
@@ -937,26 +961,23 @@
near: 0,
far: 500000,
}
- )
- divPoint.item.show = false
- console.log(divPoint)
+ );
+ divPoint.item.show = false;
+ console.log(divPoint);
- divPointList.push(divPoint.item)
- })
- treeMap.set("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", list)
- })
-
+ divPointList.push(divPoint.item);
+});
+treeMap.set("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", list);
+ });
}
-function addTetrahedron (visible) {
- const emergencyAreaList = []
+function addTetrahedron(visible) {
+ const emergencyAreaList = [];
- loadAreaPolygon("/json/emergency_area.geojson", true).then(entities => {
- emergencyAreaList.push(...entities)
- })
+ loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
+ emergencyAreaList.push(...entities);
+ });
// console.log('polygon', polygon);
-
-
let list = [
{
@@ -977,8 +998,8 @@
latitude: 40.558199,
altitude: 528,
},
- ]
- list.forEach(item => {
+ ];
+ list.forEach((item) => {
let point = earthCtrl.factory.addTetrahedron({
position: {
lon: item.longitude,
@@ -987,70 +1008,78 @@
},
multiple: 1.0,
scale: new SmartEarth.Cesium.Cartesian3(20, 20, 20),
- })
- console.log("point", point)
- emergencyAreaList.push(point)
-
- })
- treeMap.set("閬块櫓鐐�", emergencyAreaList)
-
+ });
+ console.log("point", point);
+ emergencyAreaList.push(point);
+ });
+ treeMap.set("閬块櫓鐐�", emergencyAreaList);
}
-function toggleLayerVisible (name, checked) {
- const entityList = treeMap.get(name)
+function toggleLayerVisible(name, checked) {
+ const entityList = treeMap.get(name);
if (Array.isArray(entityList) && entityList.length > 0) {
- entityList.forEach(entity => {
- entity.show = checked
- })
+ entityList.forEach((entity) => {
+ entity.show = checked;
+ });
}
- treeMap.set(name, entityList)
+ treeMap.set(name, entityList);
}
-function getData () {
- initDevicePoint()
- initDistrictPoint()
- initDuanmianPoint()
+function getData() {
+ initDevicePoint();
+ initDistrictPoint();
+ initDuanmianPoint();
}
// 閫氳繃 store 浼犻�掗渶瑕侀�変腑鐨刱ey
-watch(() => checkedKeys.value, (keys) => {
- if (keys && Array.isArray(keys)) {
- treeRef.value.setCheckedKeys(defaultSelectedKeys.value.concat(keys), true)
+watch(
+ () => checkedKeys.value,
+ (keys) => {
+ if (keys && Array.isArray(keys)) {
+ treeRef.value.setCheckedKeys(
+ defaultSelectedKeys.value.concat(keys),
+ true
+ );
+ }
}
-})
+);
watch(
() => route.fullPath,
- path => {
- const defaultKeys = defaultSelectedKeys.value
+ (path) => {
+ const defaultKeys = defaultSelectedKeys.value;
if (path == "/yhgl") {
- treeRef.value.setCheckedKeys(defaultKeys.concat("瀛欒儭娌熼殣鎮ｇ偣"), true)
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", true)
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false)
- toggleLayerVisible("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", false)
-
+ treeRef.value.setCheckedKeys(defaultKeys.concat("瀛欒儭娌熼殣鎮ｇ偣"), true);
+ toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", true);
+ toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false);
+ toggleLayerVisible("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", false);
} else if (path == "/zhjc") {
- treeRef.value.setCheckedKeys(defaultKeys.concat("缁煎悎鐩戞祴璁惧淇℃伅"), true)
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", true)
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false)
- toggleLayerVisible("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", false)
+ treeRef.value.setCheckedKeys(
+ defaultKeys.concat("缁煎悎鐩戞祴璁惧淇℃伅"),
+ true
+ );
+ toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", true);
+ toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false);
+ toggleLayerVisible("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", false);
} else if (path == "/mnfz") {
- treeRef.value.setCheckedKeys(defaultKeys.concat("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�"), true)
- toggleLayerVisible("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", true)
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false)
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false)
-
+ treeRef.value.setCheckedKeys(
+ defaultKeys.concat("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�"),
+ true
+ );
+ toggleLayerVisible("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", true);
+ toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false);
+ toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false);
} else {
- treeRef.value.setCheckedKeys(defaultKeys, true)
+ treeRef.value.setCheckedKeys(defaultKeys, true);
}
}
-)
+);
onMounted(() => {
- initMap()
- getData()
-})
+ initMap();
+ getData();
+});
onUnmounted(() => {
- viewer.entities.removeAll()
-})
+ viewer.entities.removeAll();
+});
</script>
<style lang="less" scoped>
@@ -1063,4 +1092,4 @@
height: 200px;
z-index: 99;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/tools/SlopeAnalysis.vue b/src/components/tools/SlopeAnalysis.vue
index a12b918..71557c9 100644
--- a/src/components/tools/SlopeAnalysis.vue
+++ b/src/components/tools/SlopeAnalysis.vue
@@ -1,15 +1,6 @@
<template>
<div class="terrain-settings">
<el-form :model="form" label-width="80px">
- <!-- 鍦拌〃娓叉煋 -->
- <el-form-item label="鍦拌〃娓叉煋">
- <el-radio-group v-model="form.terrainRender">
- <el-radio :label="0">鏃�</el-radio>
- <el-radio :label="1">鍧″害</el-radio>
- </el-radio-group>
- </el-form-item>
-
- <!-- 绛夐珮绾垮紑鍏� -->
<el-form-item label="绛夐珮绾�">
<el-switch
v-model="form.contourLines"
@@ -51,7 +42,6 @@
// 鍒濆鍖� form 鏁版嵁
const form = reactive({
- terrainRender: 0,
contourLines: false,
color: "red",
spacing: 50,
diff --git a/src/components/tools/Tools.vue b/src/components/tools/Tools.vue
index 56ab6ec..bc15549 100644
--- a/src/components/tools/Tools.vue
+++ b/src/components/tools/Tools.vue
@@ -42,16 +42,18 @@
<div v-show="echartsShow" id="sectionCharts" class="sectionChars">
<div id="echartsView1" style="width: 100%; height: 100%"></div>
</div>
- <!-- 鍧″悜鍒嗘瀽 -->
+ <!-- 鍧″害鍧″悜鍒嗘瀽 -->
<Aspect
v-show="showAspect"
@draw="SlopeArrow"
@clear="SlopeArrowClose"
+ @handleaspect="handleaspect"
+ @handleSlope="handleSlope"
class="popup-menu-see"
/>
<SlopeAnalysis
@draw="SlopeAnalysiss"
- v-show="showSlope"
+ v-show="isContourLabel"
class="popup-menu-see"
@update-slope="onUpdateSlope"
/>
@@ -128,9 +130,6 @@
// 鍧″悜绠ご寮圭獥
const showAspect = ref(false);
-// 鍧″害鍒嗘瀽寮圭獥
-const showSlope = ref(false);
-
// 宸ュ叿鍒楄〃
const toolList = ref([
{
@@ -162,8 +161,7 @@
active: false,
options: [
{ name: "鐐逛綅淇℃伅鎻愬彇", icon: "鐐逛綅淇℃伅鎻愬彇" },
- { name: "鍧″害鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
- { name: "鍧″悜鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
+ { name: "鍧″害鍧″悜鍒嗘瀽", icon: "鍧″害鍧″悜鎻愬彇" },
{ name: "鍓栭潰鎻愬彇", icon: "鍓栭潰鎻愬彇" },
{ name: "鎸栧～鏂硅绠�", icon: "鎸栧～鏂硅绠�" },
{ name: "绛夐珮绾垮垎鏋�", icon: "绛夐珮绾垮垎鏋�" },
@@ -201,7 +199,23 @@
// 澶勭悊宸ュ叿鐐瑰嚮浜嬩欢
function handleClick(tool, event) {
+ toolList.value.forEach((item) => {
+ item.active =
+ item.name === tool.name && currentToolOptions.value !== tool.options;
+ });
console.log(tool.options);
+ // 濡傛灉褰撳墠宸ュ叿宸茬粡鏄縺娲荤姸鎬侊紝鍒欏叧闂畠
+ if (currentToolOptions.value === tool.options) {
+ currentToolOptions.value = null; // 娓呯┖褰撳墠宸ュ叿閫夐」
+ isPopupVisible.value = false; // 闅愯棌寮圭獥
+ seeAnalyzeShow.value = false; // 鍙鍩�
+ topographyShow.value = false; // 鍓栭潰
+ echartsShow.value = false; // 鍓栭潰echarts
+ showAspect.value = false; // 鍧″害鍧″悜鍒嗘瀽
+ showRain.value = false; // 闆ㄥぉ
+ showSnow.value = false; // 闆ぉ
+ return;
+ }
// 濡傛灉宸ュ叿鍚嶇О鏄� "鍥惧眰绠＄悊"
if (tool.name === "鍥惧眰绠＄悊") {
showLayerTree.value = !showLayerTree.value; // 鍒囨崲鍥惧眰鏍戠殑鏄剧ず鐘舵��
@@ -210,7 +224,6 @@
topographyShow.value = false; //鍓栭潰
echartsShow.value = false; //鍓栭潰echarts
showAspect.value = false; //鍧″悜绠ご
- showSlope.value = false; //鍧″悜绠ご
showRain.value = false; //闆ㄥぉ
showSnow.value = false; //闆ㄥぉ
return;
@@ -224,15 +237,17 @@
topographyShow.value = false; //鍓栭潰
echartsShow.value = false; //鍓栭潰echarts
showAspect.value = false; //鍧″悜绠ご
- showSlope.value = false; //鍧″悜绠ご
showRain.value = false; //闆ㄥぉ
showSnow.value = false; //闆ㄥぉ
}
+const currentOption = ref(null);
+
// 澶勭悊寮圭獥閫夐」鐐瑰嚮浜嬩欢
function handleOptionClick(option) {
isPopupVisible.value = false;
- console.log("Selected option:", option);
+ currentOption.value = option.name;
+ console.log("Selected option:", currentOption.value);
const actionMap = {
鏄剧ず鍥惧眰: () => (showLayerTree.value = true),
闅愯棌鍥惧眰: () => (showLayerTree.value = false),
@@ -278,11 +293,16 @@
鍓栭潰鎻愬彇: () => {
topographyShow.value = true;
},
- 鍧″害鍒嗘瀽: () => {
- showSlope.value = true;
- },
- 鍧″悜鍒嗘瀽: () => {
+ 鍧″害鍧″悜鍒嗘瀽: () => {
showAspect.value = true;
+ },
+ 绛夐珮绾垮垎鏋�: () => {
+ isContourLabel.value = true;
+ if (isContourLabel.value === false) {
+ mapUtils.createContourLabel();
+ } else {
+ mapUtils.closeContourLabel();
+ }
},
鐐逛綅淇℃伅鎻愬彇: () => {
isPickActive.value = !isPickActive.value;
@@ -302,14 +322,6 @@
mapUtils.FloodAnalysis("close");
} else {
mapUtils.FloodAnalysis();
- }
- },
- 绛夐珮绾垮垎鏋�: () => {
- isContourLabel.value = !isContourLabel.value;
- if (isContourLabel.value === false) {
- mapUtils.createContourLabel();
- } else {
- mapUtils.closeContourLabel();
}
},
};
@@ -374,6 +386,14 @@
mapUtils.handleClear();
};
+// 鍒掑垎鍖哄煙
+const SlopeArrow = () => {
+ mapUtils.hfqy();
+};
+// 鍧″害鍒嗘瀽
+const handleaspect = () => {
+ mapUtils.pdfx();
+};
//鍧″害鐨勭澶磋搴�(瑙掑害涓�0~1,鑼冨洿鍐呯殑鍧囧寑鎻掑��)
const angles = [
0.0, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7,
@@ -401,18 +421,17 @@
"#F0AD56",
"#F2CC45",
];
-
-const SlopeArrow = () => {
+// 鍧″悜鍒嗘瀽
+const handleSlope = () => {
mapUtils.pxjt(colors, angles);
};
-// 鍏抽棴鍧″悜绠ご
+// 鍏抽棴鍧″害鍧″悜鍒嗘瀽
const SlopeArrowClose = () => {
- mapUtils.cleanupAnalysisTools();
+ mapUtils.clearPreviousAnalysis();
};
-// 鍧″害鍒嗘瀽
+// 绛夐珮绾�
const formData = reactive({
- terrainRender: 0,
contourLines: false,
color: "red",
spacing: 50,
@@ -420,14 +439,12 @@
});
const SlopeAnalysiss = () => {
- mapUtils.pdfx(formData);
+ mapUtils.dgxfx(formData);
};
-
-// 鍧″害
const onUpdateSlope = (newOption) => {
Object.assign(formData, newOption);
- mapUtils.pdfx(formData);
+ mapUtils.dgxfx(formData);
};
// 闆�
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 6b7c835..a56a9c7 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -25,6 +25,7 @@
snowEffect: null, // 鏂板闆晥鏋滃疄渚�
regionTerrain: null,
polygonPosition: [],
+ PolygonArr: [],
init(earthCtrl) {
this.earthCtrl = earthCtrl;
@@ -91,81 +92,80 @@
},
// 鍖哄煙鍒掑垎宸ュ叿
hfqy() {
- // 鍒濆鍖栧尯鍩熷湴褰�
this.regionTerrain = earthCtrl.factory.createRegionTerrain({});
this.polygonPosition = [];
- // 鍒涘缓缁樺埗宸ュ叿
- const drawTool = earthCtrl.shapeTool.createDrawShapeTool((e) => {
- try {
- if (!e || !e.result) {
- throw new Error('Invalid drawing result');
- }
-
- // 杞崲鍧愭爣骞跺瓨鍌�
- const polygonI = [];
- for (const point of e.result) {
- const cartographic = earthCtrl.coreMap.scene.globe.ellipsoid.cartesianToCartographic(point);
- const lon = Cesium.Math.toDegrees(cartographic.longitude);
- const lat = Cesium.Math.toDegrees(cartographic.latitude);
-
- polygonI.push(lon, lat, 0);
- this.polygonPosition.push(lon, lat);
- }
-
- // 璁剧疆鍖哄煙鍦板舰
- this.regionTerrain.setPositions(this.polygonPosition);
- this.regionTerrain.setRegionEnabled(true);
-
- // 娓呴櫎缁樺埗宸ュ叿
- drawTool.removeFromMap();
- } catch (error) {
- console.error('Error during region drawing:', error);
- drawTool.removeFromMap();
+ const draw = earthCtrl.shapeTool.createDrawShapeTool((e) => {
+ const polygonI = [];
+ for (const i of e.result) {
+ const ellipsoid = earthCtrl.coreMap.scene.globe.ellipsoid;
+ const cartographic = ellipsoid.cartesianToCartographic(i);
+ const lon = SmartEarth.Cesium.Math.toDegrees(
+ cartographic.longitude
+ ); // 缁忓害
+ const lat = SmartEarth.Cesium.Math.toDegrees(cartographic.latitude); // 绾害
+ polygonI.push(lon, lat, 0);
+ this.polygonPosition.push(lon, lat);
}
+ this.PolygonArr.push({
+ id: earthCtrl.factory.createUUID(),
+ polygon: polygonI,
+ });
+ draw.removeFromMap();
+ this.regionTerrain.setPositions(this.polygonPosition);
+ this.regionTerrain.setRegionEnabled(true);
});
-
- return drawTool;
},
+ // 鍧″害鍒嗘瀽
+ pdfx() {
+ if (this.regionTerrain) {
+ console.log('鍧″害鍒嗘瀽');
+ this.clearPreviousAnalysis(); // 鍏堟竻闄や箣鍓嶇殑鍒嗘瀽
+ this.regionTerrain.setType("slope");
+ this.regionTerrain.update();
+ }
+ },
+
// 鍧″悜绠ご
pxjt(colors, angles) {
- this.hfqy()
+ if (this.regionTerrain) {
+ this.clearPreviousAnalysis(); // 鍏堟竻闄や箣鍓嶇殑鍒嗘瀽
+ this.regionTerrain.setType("aspect");
+ this.regionTerrain.update();
+ }
+
this.slopeArrow = earthCtrl.factory.createSlopeArrow({});
this.slopeArrow.setColorsAndAngles(colors, angles);
- this.regionTerrain.setPositions(this.polygonPosition);
- this.regionTerrain.setRegionEnabled(true);
this.slopeArrow.setSlopeType(1);
},
- // 鍧″害鍒嗘瀽
- pdfx(option) {
- this.hfqy()
- this.elevationTool = new SmartEarth.ElevationTool(earthCtrl)
- if (option.terrainRender == '1') {
- this.elevationTool.type = 'slope'
- } else {
- this.elevationTool.type = 'none'
- }
- this.elevationTool.tf = option.contourLines
- this.elevationTool.setSpacing(option.spacing)
- this.elevationTool.setWidth(option.lineWidth)
+ // 绛夐珮绾垮垎鏋�
+ dgxfx(option) {
+ this.clearPreviousAnalysis(); // 鍏堟竻闄や箣鍓嶇殑鍒嗘瀽
+ this.hfqy();
+ this.elevationTool = new SmartEarth.ElevationTool(earthCtrl);
+ this.elevationTool.tf = option.contourLines;
+ this.elevationTool.setSpacing(option.spacing);
+ this.elevationTool.setWidth(option.lineWidth);
this.elevationTool.setContourColor(option.color);
this.elevationTool.render();
},
- // 娓呯悊鎵�鏈夊垎鏋愬伐鍏�
- cleanupAnalysisTools() {
- // 鍧″悜绠ご
+ // 娓呴櫎涔嬪墠鐨勫垎鏋愶紙鍧″害銆佸潯鍚戙�佺瓑楂樼嚎锛�
+ clearPreviousAnalysis() {
+ if (this.regionTerrain) {
+ this.regionTerrain.setType("");
+ this.regionTerrain.update();
+ }
+
if (this.slopeArrow) {
this.slopeArrow.setSlopeType(0);
- this.slopeArrow = null;
+ // this.slopeArrow = null;
}
- // 閫夋嫨鍖哄煙
- if (this.regionTerrain) {
- this.regionTerrain.setRegionEnabled(false);
- this.regionTerrain = null;
+
+ if (this.elevationTool) {
+ this.elevationTool = null;
}
- this.polygonPosition = [];
},
// 鏍囩粯
CreateLabel(pic, show) {
--
Gitblit v1.9.3