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 ++++++++++------------------------- src/api/hpApi.js | 69 +++++---- src/components/menu/Device.vue | 48 +++--- src/views/Home.vue | 2 src/components/menu/Location.vue | 22 +- 5 files changed, 143 insertions(+), 249 deletions(-) diff --git a/src/api/hpApi.js b/src/api/hpApi.js index d1f77ab..95379be 100644 --- a/src/api/hpApi.js +++ b/src/api/hpApi.js @@ -119,12 +119,13 @@ // 鑾峰彇闅愭偅鐐逛俊鎭� export async function getDangerPoint(data) { + const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getData", { + filterObject: { - "divisionCounty": "110116000000", - "divisionTown": "110116110000", - // "divisionCounty": null, - // "divisionTown": null, + // divisionCounty鍏跺疄鍙互涓嶄紶 + // "divisionCounty": divisionCounty, + "divisionTown": data, "year": 2025 }, "pageSize": 10000 @@ -132,43 +133,43 @@ return response.data; } -export async function fetchAndLoadDangerPoints(loadCallback) { - let currentPage = 1; - const pageSize = 100; // 姣忔璇锋眰鐨勬暟鎹噺 +// export async function fetchAndLoadDangerPoints(loadCallback) { +// let currentPage = 1; +// const pageSize = 100; // 姣忔璇锋眰鐨勬暟鎹噺 - while (true) { - try { - const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getData", { - filterObject: { - divisionCounty: "110111000000", - divisionTown: null, - year: 2025 - }, - pageSize: pageSize, - currentPage: currentPage // 娣诲姞褰撳墠椤电爜鍙傛暟 - }); +// while (true) { +// try { +// const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getData", { +// filterObject: { +// divisionCounty: "110111000000", +// divisionTown: null, +// year: 2025 +// }, +// pageSize: pageSize, +// currentPage: currentPage // 娣诲姞褰撳墠椤电爜鍙傛暟 +// }); - const pageData = response.data?.data?.pageData; +// const pageData = response.data?.data?.pageData; - if (!Array.isArray(pageData)) { - console.error("Expected an array in 'pageData', but got:", typeof pageData, pageData); - break; - } +// if (!Array.isArray(pageData)) { +// console.error("Expected an array in 'pageData', but got:", typeof pageData, pageData); +// break; +// } - if (pageData.length === 0) break; // 娌℃湁鏇村鏁版嵁浜� +// if (pageData.length === 0) break; // 娌℃湁鏇村鏁版嵁浜� - // 璋冪敤浼犲叆鐨勫洖璋冨嚱鏁帮紝鐢ㄤ簬鏇存柊椤甸潰鍐呭 - loadCallback(pageData); +// // 璋冪敤浼犲叆鐨勫洖璋冨嚱鏁帮紝鐢ㄤ簬鏇存柊椤甸潰鍐呭 +// loadCallback(pageData); - if (pageData.length < pageSize) break; // 濡傛灉鏈杩斿洖鐨勬暟鎹皯浜巔ageSize锛岃鏄庡凡鑾峰彇瀹屾墍鏈夋暟鎹� +// if (pageData.length < pageSize) break; // 濡傛灉鏈杩斿洖鐨勬暟鎹皯浜巔ageSize锛岃鏄庡凡鑾峰彇瀹屾墍鏈夋暟鎹� - currentPage++; // 鏇存柊涓嬩竴椤电殑椤电爜 - } catch (error) { - console.error("Error fetching danger points:", error); - break; - } - } -} +// currentPage++; // 鏇存柊涓嬩竴椤电殑椤电爜 +// } catch (error) { +// console.error("Error fetching danger points:", error); +// break; +// } +// } +// } diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue index 3b69b4d..5edadbe 100644 --- a/src/components/menu/Device.vue +++ b/src/components/menu/Device.vue @@ -124,9 +124,11 @@ removeEntities(item.deviceId); }); }; -const initializeDevicePoints = (val) => { +// const initializeDevicePoints = (val) => { +const initializeDevicePoints = () => { const list = []; - val.forEach((item, index) => { + // val.forEach((item, index) => { + deviceListAll.value.forEach((item, index) => { // 鏍规嵁闇�姹傚彲澧炲垹 item.type = getDictName(deviceDictList, item.dictDeviceType); item.name = item.deviceName.split(selectValue.value)[1] || item.deviceName; @@ -154,33 +156,33 @@ const devicesInArea = allDevices.value.filter((item) => item.deviceName?.includes(areaName) ); - // deviceListAll.value = devicesInArea; - getDeviceInfo().then((res) => { - const list = res.data.pageData; - deviceListAll.value = []; + deviceListAll.value = devicesInArea; + // getDeviceInfo().then((res) => { + // const list = res.data.pageData; + // deviceListAll.value = []; - let index = 0; - const batchSize = 50; // 姣忔澶勭悊鐨勬暟閲� - const delay = 100; // 姣忛殧澶氬皯姣澶勭悊涓�娆� + // let index = 0; + // const batchSize = 50; // 姣忔澶勭悊鐨勬暟閲� + // const delay = 100; // 姣忛殧澶氬皯姣澶勭悊涓�娆� - const intervalId = setInterval(() => { - // 鍙栧嚭褰撳墠鎵规鐨勬暟鎹� - const batch = list.slice(index, index + batchSize); + // const intervalId = setInterval(() => { + // // 鍙栧嚭褰撳墠鎵规鐨勬暟鎹� + // const batch = list.slice(index, index + batchSize); - if (batch.length === 0) { - clearInterval(intervalId); // 鏁版嵁澶勭悊瀹屼簡锛屽仠姝㈠畾鏃跺櫒 - return; - } + // if (batch.length === 0) { + // clearInterval(intervalId); // 鏁版嵁澶勭悊瀹屼簡锛屽仠姝㈠畾鏃跺櫒 + // return; + // } - // 鎶婂綋鍓嶆壒娆$殑鏁版嵁 push 鍒� deviceListAll - deviceListAll.value = [...deviceListAll.value, ...batch]; + // // 鎶婂綋鍓嶆壒娆$殑鏁版嵁 push 鍒� deviceListAll + // deviceListAll.value = [...deviceListAll.value, ...batch]; - // 瀵瑰綋鍓嶆壒娆℃墽琛屽垵濮嬪寲鏂规硶 - initializeDevicePoints(batch); + // // 瀵瑰綋鍓嶆壒娆℃墽琛屽垵濮嬪寲鏂规硶 + // initializeDevicePoints(batch); - index += batchSize; - }, delay); - }); + // index += batchSize; + // }, delay); + // }); } catch (error) { console.error("鍔犺浇璁惧淇℃伅澶辫触", error); } finally { diff --git a/src/components/menu/Location.vue b/src/components/menu/Location.vue index 64e6460..de29198 100644 --- a/src/components/menu/Location.vue +++ b/src/components/menu/Location.vue @@ -71,22 +71,22 @@ import { initeWaterPrimitiveView } from "@/utils/water"; //鐩告満flyTo鍑芥暟锛屽悗缁璷ptions鍒楄〃涓湁瀵瑰簲缁忕含搴﹀悗寮冪敤 import { useRoute, onBeforeRouteUpdate } from "vue-router"; import { Loading } from "@element-plus/icons-vue"; -import { fetchAndLoadDangerPoints } from "@/api/hpApi.js"; +// import { fetchAndLoadDangerPoints } from "@/api/hpApi.js"; const districtList = ref([]); -const displayData = ref([]); +// const displayData = ref([]); -const loadCallback = async (newData) => { - districtList.value = [...newData]; - console.log(districtList.value, "aaaaaaaaaaaaaaaaaaaaaaaaa"); +// const loadCallback = async (newData) => { +// districtList.value = [...newData]; +// console.log(districtList.value, "aaaaaaaaaaaaaaaaaaaaaaaaa"); - await initializeDevicePoints(); -}; +// await initializeDevicePoints(); +// }; -onMounted(() => { - fetchAndLoadDangerPoints(loadCallback); -}); +// onMounted(() => { +// fetchAndLoadDangerPoints(loadCallback); +// }); const simStore = useSimStore(); // onBeforeRouteUpdate((to, from, next) => { @@ -179,7 +179,7 @@ ); if (JSON.stringify(districtList.value) !== JSON.stringify(filteredData)) { - // districtList.value = filteredData; + districtList.value = filteredData; await initializeDevicePoints(); } 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([]); // 褰撳墠鍖哄煙鐨勯殣鎮g偣鍒楄〃 +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("璇ュ尯鍩熸殏鏃犻殣鎮g偣"); + districtList.value = []; + loadingInstance.close(); + return; + } + + // 娓呯┖褰撳墠鍖哄煙鏄剧ず鐨勯殣鎮g偣鍒楄〃锛堜絾涓嶆竻闄ゅ凡鍔犺浇鐨勬爣璁帮級 + 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() { - // // 鍏堢Щ闄ゅ凡鏈夌殑浜嬩欢鐩戝惉锛堜笉鑳借锛岃浜嗕箣鍚庨殣鎮g偣灏变笉浼氳姹備簡锛� - // 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> diff --git a/src/views/Home.vue b/src/views/Home.vue index cea0bbe..52325b7 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -103,7 +103,7 @@ setupTokenRefresh(); // 鑾峰彇瀹忓浘token // getSimData(); //娴嬭瘯tr鍚庣 // 鑾峰彇闅愭偅鐐瑰垪琛紙鍥犱负涓杞悗绔帴鍙h幏鍙栧姞杞芥椂闂磋緝闀匡級 - getDangerPoint().then((res) => { + getDangerPoint("110116110000").then((res) => { simStore.DangerPoint = res.data.pageData; }); try { -- Gitblit v1.9.3