From 7909450b6142fd10c55690c5ce093137247310ef Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期五, 06 六月 2025 17:27:10 +0800
Subject: [PATCH] 隐患点优化
---
src/views/GisView.vue | 251 ++++++++++++++------------------------------------
1 files changed, 71 insertions(+), 180 deletions(-)
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index 9ea1a4f..c214560 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -35,6 +35,7 @@
initView,
addTileset,
addTerrain,
+ removeEntities,
} from "@/utils/map.js";
import { loadAreaPolygon } from "@/utils/area.js";
import { loadAreaPolygonAll } from "@/utils/area_all.js";
@@ -44,6 +45,8 @@
import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();
+
+import { getDangerPoint } from "@/api/hpApi";
/////////////////////////鍦板浘褰卞儚閫夋嫨/////////////////////////
const views = [
{ label: "鍦板浘", value: "map", icon: "鍦板浘.png" },
@@ -385,17 +388,6 @@
///////////////////////// 鍖哄煙鏍囪鐐圭鐞嗙郴缁� /////////////////////////
// 瀛樺偍鎵�鏈夊垱寤虹殑HTML瀹炰綋锛堝湴鍥句笂鐨勬爣璁扮偣锛�
const htmlEntityList = [];
-const wmsLayers = []; // 瀛樺偍鍒涘缓鐨刉MS鍥惧眰
-
-// 璺敱瀵瑰簲鐨� WMS 鍥惧眰閰嶇疆
-const WMS_LAYER_MAP = {
- "/zhjc": {
- url: "http://192.168.56.106:8191/iserver/services/map-ywsj_view_jc_zkr_device_all_kb/wms130/ywsj_device_kb",
- },
- "/yhgl": {
- url: "http://192.168.56.106:8191/iserver/services/map-ywsj_view_dz_zkr_point_kb/wms130/ywsj_yhd_kb",
- },
-};
// 缁熶竴绠＄悊鎵�鏈夊尯鍩熸爣璁扮殑鏍峰紡閰嶇疆
const ENTITY_CONFIG = {
@@ -416,19 +408,6 @@
maxVisibleDistance: 69000,
minVisibleDistance: 20000,
flyToHeight: 12000,
- wmsOptions: {
- sourceType: "wms",
- url: "", // 鍔ㄦ�佽缃�
- layers: "0.1",
- parameters: {
- format: "image/png",
- transparent: true,
- version: "1.1.1",
- srs: "EPSG:4326",
- query_layers: "0.2",
- info_format: "application/json",
- },
- },
},
// 涓�绾у尯鍩�
primary: {
@@ -437,14 +416,6 @@
flyToHeight: 45000,
},
};
-
-// 鏇存柊 WMS 閰嶇疆鍑芥暟锛堟牴鎹綋鍓嶈矾鐢憋級
-function updateWmsLayerByRoute(currentPath) {
- const config = WMS_LAYER_MAP[currentPath];
- if (!config) return;
-
- LEVEL_CONFIG.secondary.wmsOptions.url = config.url;
-}
// 鍒濆鍖栧尯鍩熺粺璁�
function initDistrictCount(level = "secondary") {
@@ -477,38 +448,86 @@
htmlEntityList.push(html);
}
+import { ElMessage } from "element-plus";
-// 璁剧疆浜岀骇鍖哄煙鐐瑰嚮澶勭悊锛堝寘鍚玏MS鍥惧眰锛�
+const districtList = ref([]); // 褰撳墠鍖哄煙鐨勯殣鎮ｇ偣鍒楄〃
+const loadedPointIds = new Set(); // 宸插姞杞界殑闅愭偅鐐笽D闆嗗悎
+
+// 璁剧疆浜岀骇鍖哄煙鐐瑰嚮澶勭悊(璇锋眰闅愭偅鐐癸紝鐩戞祴璁惧绛�)
function secondaryHandler(html, item, config) {
html.element.addEventListener("click", async () => {
try {
- // 鍏堥鍚戠洰鏍囦綅缃�
+ // handleCleanup();
+
+ // 鏄剧ず loading 鎻愮ず
+ const loadingInstance = ElMessage({
+ type: "success",
+ message: "闅愭偅鐐规鍦ㄥ姞杞戒腑...",
+ duration: 0,
+ icon: "el-icon-loading", // 纭繚浣跨敤鐨勬槸Element Plus鎻愪緵鐨刲oading鍥炬爣绫诲悕
+ grouping: true,
+ customClass: "custom-loading-message", // 娣诲姞鑷畾涔夌被鍚�
+ });
+ // 璇锋眰闅愭偅鐐规暟鎹�
+ const res = await getDangerPoint(item.districtCode);
+
+ const newPoints = res.data.pageData;
+
+ if (newPoints.length === 0) {
+ ElMessage.warning("璇ュ尯鍩熸殏鏃犻殣鎮ｇ偣");
+ districtList.value = [];
+ loadingInstance.close();
+ return;
+ }
+
+ // 娓呯┖褰撳墠鍖哄煙鏄剧ず鐨勯殣鎮ｇ偣鍒楄〃锛堜絾涓嶆竻闄ゅ凡鍔犺浇鐨勬爣璁帮級
+ districtList.value = [];
+
+ // 閬嶅巻鏂版暟鎹紝杩囨护鎺夊凡鍔犺浇杩囩殑鐐�
+ for (const [index, point] of newPoints.entries()) {
+ if (loadedPointIds.has(point.hdId)) {
+ continue; // 濡傛灉宸插姞杞斤紝璺宠繃
+ }
+
+ // 娣诲姞鍒板凡鍔犺浇闆嗗悎
+ loadedPointIds.add(point.hdId);
+
+ // 璁剧疆鐐瑰睘鎬�
+ point.id = point.hdId;
+ point.name = point.hdName;
+ point.latitude = point.lat;
+ point.longitude = point.lon;
+ point.showBillboard = true;
+ point.type = point.disasterType;
+ point.className = "district";
+
+ districtList.value.push(point); // 鏇存柊褰撳墠鍖哄煙闅愭偅鐐瑰垪琛�
+
+ await createPoint(point); // 鍒涘缓鍦板浘鐐�
+ }
+
+ // 椋炲悜鎸囧畾浣嶇疆
await flyToDistrict(item.longitude, item.latitude, config.flyToHeight);
- // 绉婚櫎鏃у浘灞�
- removeAllWmsLayers();
- // 寤舵椂1绉掑悗娣诲姞鏂板浘灞�
- setTimeout(() => {
- // 濡傛灉婊¤冻鍙鑼冨洿锛屽皾璇曢噸鏂板姞杞� WMS 鍥惧眰
- const cameraHeight = viewer.camera.positionCartographic.height;
- // loadWmsImg(cameraHeight);
- }, 1000); // 1000姣 = 1绉�
-
- // 璁剧疆WMS瑕佺礌鏌ヨ
- setupWmsFeatureQuery();
-
- // 娣诲姞鏂扮殑鐐瑰嚮浜嬩欢
+ // 鍔犺浇瀹屾垚鍚庡叧闂� loading
+ loadingInstance.close();
} catch (error) {
console.error("鍖哄煙鐐瑰嚮澶勭悊澶辫触:", error);
+ ElMessage.error("鏁版嵁鍔犺浇澶辫触锛岃绋嶅悗鍐嶈瘯");
}
});
}
+
+const handleCleanup = async () => {
+ await Promise.all(
+ districtList.value.map((item) => removeEntities(item.hdId))
+ );
+};
// 璁剧疆涓�绾у尯鍩熺偣鍑诲鐞�
function primaryHandler(html, item, config) {
html.element.addEventListener("click", () => {
flyToDistrict(item.longitude, item.latitude, config.flyToHeight);
- console.log(item.districtCode, "itemitemitemitem");
});
}
@@ -560,9 +579,6 @@
(val) => {
const isValidPath = validPaths.includes(val);
- // 鏇存柊 WMS 鍥惧眰閰嶇疆
- updateWmsLayerByRoute(val);
-
// 鎺у埗HTML瀹炰綋鏄剧ず
htmlEntityList.forEach((item) => {
item.show = isValidPath
@@ -573,65 +589,11 @@
// 鎺у埗鐩告満鍙樺寲鐩戝惉
if (isValidPath) {
handleCameraChange();
-
- // 濡傛灉婊¤冻鍙鑼冨洿锛屽皾璇曢噸鏂板姞杞� WMS 鍥惧眰
- const cameraHeight = viewer.camera.positionCartographic.height;
- // loadWmsImg(cameraHeight);
} else {
removeCameraChange();
- removeAllWmsLayers();
}
}
);
-
-// 鑷姩鍔犺浇 WMS 鍥惧眰
-async function loadWmsImg(cameraHeight) {
- const config = LEVEL_CONFIG.secondary;
-
- // 鍒ゆ柇鏄惁澶勪簬浜岀骇鍙鑼冨洿鍐�
- if (cameraHeight <= config.minVisibleDistance) {
- // 濡傛灉褰撳墠娌℃湁WMS鍥惧眰锛屽垯鑷姩鍔犺浇绗竴涓簩绾х偣鐨刉MS鍥惧眰
- if (wmsLayers.length === 0 && htmlEntityList.length > 0) {
- const firstItem = htmlEntityList[0]; // 鍙互閫変换鎰忎竴涓簩绾х偣
- removeAllWmsLayers(); // 娓呴櫎鍙兘瀛樺湪鐨勬畫鐣欏浘灞�
-
- earthCtrl.factory
- .createImageryLayer(config.wmsOptions)
- .then((wmsLayer) => {
- wmsLayers.push(wmsLayer);
- });
- } else {
- // 宸叉湁鍥惧眰浣哢RL鍙樹簡锛岄渶瑕佹洿鏂�
- const currentUrl = wmsLayers[0]?.imageryProvider?.url;
- if (currentUrl !== config.wmsOptions.url) {
- removeAllWmsLayers();
- earthCtrl.factory
- .createImageryLayer(config.wmsOptions)
- .then((wmsLayer) => {
- wmsLayers.push(wmsLayer);
- });
- }
- }
- } else if (cameraHeight > config.maxVisibleDistance && wmsLayers.length > 0) {
- // 濡傛灉瓒呭嚭鍙鑼冨洿涓斿凡鏈塛MS鍥惧眰锛屽垯娓呴櫎
- removeAllWmsLayers();
- // 鍙互鍦ㄨ繖閲岀Щ闄や簨浠剁洃鍚櫒
- if (clickHandler) {
- clickHandler.destroy();
- clickHandler = null;
- }
- }
-}
-
-let clickHandler = null;
-
-// 绉婚櫎鎵�鏈塛MS鍥惧眰
-function removeAllWmsLayers() {
- wmsLayers.forEach((layer) => {
- layer.removeFromMap();
- });
- wmsLayers.length = 0; // 娓呯┖鏁扮粍
-}
let cameraChangeTimer = null;
@@ -643,8 +605,6 @@
}
cameraChangeTimer = setTimeout(() => {
- const cameraHeight = viewer.camera.positionCartographic.height;
-
// 鏇存柊HTML瀹炰綋鏄剧ず鐘舵��
htmlEntityList.forEach((item) => {
item.show = isVisibleDistance(
@@ -652,9 +612,6 @@
item.maxVisibleDistance
);
});
-
- // 妫�鏌ユ槸鍚﹂渶瑕佽嚜鍔ㄥ姞杞芥垨娓呴櫎WMS鍥惧眰
- // loadWmsImg(cameraHeight);
}, 100);
}
@@ -672,76 +629,6 @@
initDistrictCount("primary"); // 涓�绾у尯鍩�
}
-// 璁剧疆WMS瑕佺礌鏌ヨ
-function setupWmsFeatureQuery() {
- // // 鍏堢Щ闄ゅ凡鏈夌殑浜嬩欢鐩戝惉锛堜笉鑳借锛岃浜嗕箣鍚庨殣鎮ｇ偣灏变笉浼氳姹備簡锛�
- // earthCtrl.viewer.screenSpaceEventHandler.removeInputAction(
- // Cesium.ScreenSpaceEventType.LEFT_CLICK
- // );
-
- // 娣诲姞鏂扮殑鐐瑰嚮浜嬩欢
- earthCtrl.viewer.screenSpaceEventHandler.setInputAction(
- handleMapClick,
- Cesium.ScreenSpaceEventType.LEFT_CLICK
- );
-}
-
-// 澶勭悊鍦板浘鐐瑰嚮鏌ヨ
-function handleMapClick(click) {
- console.log("鐐瑰嚮灞忓箷浣嶇疆:", click.position);
-
- // 1. 鑾峰彇鐐瑰嚮浣嶇疆鐨勫湴鐞嗗潗鏍�
- const ray = viewer.camera.getPickRay(click.position);
- if (!ray) {
- console.log("鏃犳硶鑾峰彇鎷惧彇灏勭嚎");
- return;
- }
-
- const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
- if (!cartesian) {
- console.log("鏃犳硶鑾峰彇鍦扮悊鍧愭爣");
- return;
- }
-
- // console.log("cartesian:", cartesian);
-
- const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
- const longitude = Cesium.Math.toDegrees(cartographic.longitude);
- const latitude = Cesium.Math.toDegrees(cartographic.latitude);
- console.log("鐐瑰嚮浣嶇疆鍧愭爣:", longitude, latitude);
-
- queryWmsFeatures(longitude, latitude, click.position);
-}
-
-// 鏌ヨWMS瑕佺礌
-function queryWmsFeatures(longitude, latitude, clickPosition) {
- const wmsUrl = LEVEL_CONFIG.secondary.wmsOptions.url;
- const params = new URLSearchParams({
- SERVICE: "WMS",
- VERSION: "1.1.1",
- REQUEST: "GetFeatureInfo",
- LAYERS: "0.1", // 鏌ヨ淇℃伅鎵�鍦ㄧ殑鍥惧眰
- QUERY_LAYERS: "0.2",
- INFO_FORMAT: "text/xml",
- FEATURE_COUNT: "10", // 杩斿洖鏈�澶�10涓绱�
- X: Math.floor(clickPosition.x),
- Y: Math.floor(clickPosition.y),
- SRS: "EPSG:4326",
- WIDTH: viewer.canvas.width,
- HEIGHT: viewer.canvas.height,
- BBOX: [longitude - 1, latitude - 1, longitude + 1, latitude + 1].join(","),
- });
-
- const featureInfoUrl = wmsUrl + "?" + params.toString();
- // console.log("璇锋眰URL:", featureInfoUrl);
-
- // 3. 鍙戦�丟etFeatureInfo璇锋眰
- fetch(featureInfoUrl)
- .then((res) => res.text()) // 鍏堣幏鍙栨枃鏈�
- .then((text) => {
- // console.log(text);
- });
-}
onMounted(() => {
initMap();
addCityPolygon();
@@ -841,4 +728,8 @@
.earthBox.shift-right {
right: 13%;
}
+.custom-loading-message .el-icon-loading {
+ color: #409eff !important; /* 璁剧疆涓轰綘鎯宠鐨勯鑹� */
+ font-size: 18px; /* 鍙�夛細璋冩暣鍥炬爣澶у皬 */
+}
</style>
--
Gitblit v1.9.3