From 2b4ddd668550749813c4e02b5d5100842763e23b Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 17 四月 2025 17:41:35 +0800
Subject: [PATCH] 划区域坡度分析
---
src/utils/tools.js | 100 ++++++++++++-------
src/components/tools/SlopeAnalysis.vue | 73 ++++++++------
src/components/tools/Tools.vue | 90 ++++++++++++++---
3 files changed, 175 insertions(+), 88 deletions(-)
diff --git a/src/components/tools/SlopeAnalysis.vue b/src/components/tools/SlopeAnalysis.vue
index 7609ef4..a12b918 100644
--- a/src/components/tools/SlopeAnalysis.vue
+++ b/src/components/tools/SlopeAnalysis.vue
@@ -1,39 +1,44 @@
<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"
+ inline-prompt
+ active-text="寮�"
+ inactive-text="鍏�"
+ ></el-switch>
+ <el-color-picker v-model="form.color" style="margin-left: 10px" />
+ </el-form-item>
+
+ <!-- 闂磋窛婊戝潡锛堟牴鎹瓑楂樼嚎寮�鍏虫帶鍒舵樉绀猴級 -->
+ <el-form-item label="闂磋窛" v-if="form.contourLines">
+ <el-slider v-model="form.spacing" :min="20" :max="500"></el-slider>
+ </el-form-item>
+
+ <!-- 绾垮婊戝潡锛堟牴鎹瓑楂樼嚎寮�鍏虫帶鍒舵樉绀猴級 -->
+ <el-form-item label="绾垮" v-if="form.contourLines">
+ <el-slider v-model="form.lineWidth" :min="1" :max="10"></el-slider>
+ </el-form-item>
+ </el-form>
+ <div style="display: flex; justify-content: flex-end">
+ <el-button @click="handleDraw">缁樺埗鍖哄煙</el-button>
+ </div>
+ </div>
<!-- 鍧″害鍒嗘瀽 -->
- <el-form :model="form" label-width="80px" class="terrain-settings">
- <!-- 鍦拌〃娓叉煋 -->
- <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"
- inline-prompt
- active-text="寮�"
- inactive-text="鍏�"
- ></el-switch>
- <el-color-picker v-model="form.color" style="margin-left: 10px" />
- </el-form-item>
-
- <!-- 闂磋窛婊戝潡锛堟牴鎹瓑楂樼嚎寮�鍏虫帶鍒舵樉绀猴級 -->
- <el-form-item label="闂磋窛" v-if="form.contourLines">
- <el-slider v-model="form.spacing" :min="20" :max="500"></el-slider>
- </el-form-item>
-
- <!-- 绾垮婊戝潡锛堟牴鎹瓑楂樼嚎寮�鍏虫帶鍒舵樉绀猴級 -->
- <el-form-item label="绾垮" v-if="form.contourLines">
- <el-slider v-model="form.lineWidth" :min="1" :max="10"></el-slider>
- </el-form-item>
- </el-form>
</template>
<script setup>
-import { reactive, watch } from "vue";
+import { reactive, watch, defineEmits } from "vue";
// 瀹氫箟 props 鍜� emit
const props = defineProps({
@@ -61,6 +66,10 @@
},
{ deep: true } // 娣卞害鐩戝惉
);
+const handleDraw = () => {
+ console.log("缁樺埗鍖哄煙");
+ emit("draw");
+};
</script>
<style lang="less" scoped>
@@ -77,8 +86,6 @@
margin-bottom: 20px;
display: flex;
}
-
-
/deep/ .el-switch.is-checked .el-switch__core {
background-color: #009688;
diff --git a/src/components/tools/Tools.vue b/src/components/tools/Tools.vue
index e0fdbd5..56ab6ec 100644
--- a/src/components/tools/Tools.vue
+++ b/src/components/tools/Tools.vue
@@ -4,36 +4,85 @@
<div class="tools-title" @click="toggleCollapse">
宸ュ叿鏍�
<div class="popup-menu" v-if="isPopupVisible">
- <div class="popup-item" v-for="(option, idx) in currentToolOptions" :key="idx"
- @click="handleOptionClick(option)">
- <img class="popup-icon" :src="require(`../../assets/img/tools/tools_second/${option.icon}.png`)
- " :alt="option.name" />
+ <div
+ class="popup-item"
+ v-for="(option, idx) in currentToolOptions"
+ :key="idx"
+ @click="handleOptionClick(option)"
+ >
+ <img
+ class="popup-icon"
+ :src="
+ require(`../../assets/img/tools/tools_second/${option.icon}.png`)
+ "
+ :alt="option.name"
+ />
{{ option.name }}
</div>
</div>
<LayerTree class="popup-menu" v-show="showLayerTree" />
<!-- 鍙鍩熷垎鏋� -->
- <seeAnalyze :option="option" v-show="seeAnalyzeShow" @update:showConeLine="handleUpdateShowConeLine"
- @update-option="onUpdateOption" @draw="onDraw" @clear="onClear" class="popup-menu-see" />
+ <seeAnalyze
+ :option="option"
+ v-show="seeAnalyzeShow"
+ @update:showConeLine="handleUpdateShowConeLine"
+ @update-option="onUpdateOption"
+ @draw="onDraw"
+ @clear="onClear"
+ class="popup-menu-see"
+ />
<!-- 鍓栭潰鎻愬彇 -->
- <TopographyDia @draw="handleDraw" @clear="handleClear" class="popup-menu-see" v-show="topographyShow" />
+ <TopographyDia
+ @draw="handleDraw"
+ @clear="handleClear"
+ class="popup-menu-see"
+ v-show="topographyShow"
+ />
<!-- 鍓栭潰鎻愬彇鐨別charts -->
<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" class="popup-menu-see" />
- <SlopeAnalysis v-show="showSlope" class="popup-menu-see" @update-slope="onUpdateSlope" />
+ <Aspect
+ v-show="showAspect"
+ @draw="SlopeArrow"
+ @clear="SlopeArrowClose"
+ class="popup-menu-see"
+ />
+ <SlopeAnalysis
+ @draw="SlopeAnalysiss"
+ v-show="showSlope"
+ class="popup-menu-see"
+ @update-slope="onUpdateSlope"
+ />
<!-- 闆� -->
- <Rain v-show="showRain" class="popup-menu-see" @update-rain="onUpdateRain" />
- <Snow v-show="showSnow" class="popup-menu-see" @update-snow="onUpdateSnow" />
+ <Rain
+ v-show="showRain"
+ class="popup-menu-see"
+ @update-rain="onUpdateRain"
+ />
+ <Snow
+ v-show="showSnow"
+ class="popup-menu-see"
+ @update-snow="onUpdateSnow"
+ />
</div>
<!-- 宸ュ叿鏍忓唴瀹� -->
<transition name="fade">
<div v-if="!isCollapsed" class="tools-content">
- <div class="tools-item" v-for="(item, index) in toolList" :key="index" @click.stop="handleClick(item)">
- <img class="icon" :src="require(`../../assets/img/tools/${item.icon}.png`)" :title="item.name" alt="" />
+ <div
+ class="tools-item"
+ v-for="(item, index) in toolList"
+ :key="index"
+ @click.stop="handleClick(item)"
+ >
+ <img
+ class="icon"
+ :src="require(`../../assets/img/tools/${item.icon}.png`)"
+ :title="item.name"
+ alt=""
+ />
</div>
</div>
</transition>
@@ -189,11 +238,11 @@
闅愯棌鍥惧眰: () => (showLayerTree.value = false),
闆ㄥぉ妯″紡: () => {
showRain.value = true;
- onUpdateRain()
+ onUpdateRain();
},
闆ぉ妯″紡: () => {
- showSnow.value = true
- onUpdateSnow()
+ showSnow.value = true;
+ onUpdateSnow();
},
娓呴櫎澶╂皵: () => {
if (1) {
@@ -358,18 +407,23 @@
};
// 鍏抽棴鍧″悜绠ご
const SlopeArrowClose = () => {
- mapUtils.gbpxjt();
+ mapUtils.cleanupAnalysisTools();
};
// 鍧″害鍒嗘瀽
const formData = reactive({
terrainRender: 0,
contourLines: false,
- color: "",
+ color: "red",
spacing: 50,
lineWidth: 5,
});
+const SlopeAnalysiss = () => {
+ mapUtils.pdfx(formData);
+};
+
+
// 鍧″害
const onUpdateSlope = (newOption) => {
Object.assign(formData, newOption);
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 6f0a779..6b7c835 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -23,6 +23,8 @@
elevationTool: null,
rainEffect: null,
snowEffect: null, // 鏂板闆晥鏋滃疄渚�
+ regionTerrain: null,
+ polygonPosition: [],
init(earthCtrl) {
this.earthCtrl = earthCtrl;
@@ -36,13 +38,13 @@
return new Cesium.Color(r, g, b, 1.0);
},
// 娓呴櫎澶╂皵鐗规晥
- delRain(){
+ delRain() {
if (this.rainEffect) {
this.rainEffect.destroy()
this.rainEffect = null
}
},
- delSnow(){
+ delSnow() {
if (this.snowEffect) {
this.snowEffect.destroy();
this.snowEffect = null;
@@ -87,8 +89,57 @@
this.snowEffect.show(show);
}
},
+ // 鍖哄煙鍒掑垎宸ュ叿
+ 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();
+ }
+ });
+
+ return drawTool;
+ },
+ // 鍧″悜绠ご
+ pxjt(colors, angles) {
+ this.hfqy()
+ 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'
@@ -100,46 +151,21 @@
this.elevationTool.setWidth(option.lineWidth)
this.elevationTool.setContourColor(option.color);
this.elevationTool.render();
- console.log(this.elevationTool, 'eleelelelelelelel')
},
- // 鍧″悜绠ご
- pxjt(colors, angles) {
- this.slopeArrow = earthCtrl.factory.createSlopeArrow({});
- this.slopeArrow.setColorsAndAngles(colors, angles);
- // 鍒涘缓缁樺埗宸ュ叿
- const drawTool = earthCtrl.shapeTool.createDrawShapeTool((e) => {
- const polygonI = [];
- const polygonPosition = [];
- for (const i of e.result) {
- const ellipsoid = earthCtrl.coreMap.scene.globe.ellipsoid;
- const cartographic = ellipsoid.cartesianToCartographic(i);
-
- const lon = Cesium.Math.toDegrees(cartographic.longitude);
- const lat = Cesium.Math.toDegrees(cartographic.latitude); // 绾害
- polygonI.push(lon, lat, 0);
- polygonPosition.push(lon, lat);
- }
- const PolygonArr = [];
- PolygonArr.push({
- id: earthCtrl.factory.createUUID(),
- polygon: polygonI,
- });
-
- // 娓呴櫎缁樺埗宸ュ叿
- drawTool.removeFromMap();
- // 璁剧疆鍧″害绠ご鐨勪綅缃拰绫诲瀷
- this.slopeArrow.setPositions(polygonPosition);
- this.slopeArrow.setSlopeType(1);
- this.slopeArrow.setRegionEnabled(true);
- console.log(this.slopeArrow, 'slope')
- });
- },
- // 鍏抽棴鍧″悜绠ご
- gbpxjt() {
+ // 娓呯悊鎵�鏈夊垎鏋愬伐鍏�
+ cleanupAnalysisTools() {
+ // 鍧″悜绠ご
if (this.slopeArrow) {
this.slopeArrow.setSlopeType(0);
+ this.slopeArrow = null;
}
+ // 閫夋嫨鍖哄煙
+ if (this.regionTerrain) {
+ this.regionTerrain.setRegionEnabled(false);
+ this.regionTerrain = null;
+ }
+ this.polygonPosition = [];
},
// 鏍囩粯
CreateLabel(pic, show) {
--
Gitblit v1.9.3