From 4743f631bf1fcec44428a3c4c253e1c112bea621 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期三, 30 七月 2025 16:45:38 +0800
Subject: [PATCH] 2
---
src/views/GisView.vue | 368 +++++++++++++++++++++++-----------------------------
1 files changed, 162 insertions(+), 206 deletions(-)
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index 9ea1a4f..6bae060 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -35,15 +35,25 @@
initView,
addTileset,
addTerrain,
+ removeEntities,
+ clearAllPoints,
} from "@/utils/map.js";
import { loadAreaPolygon } from "@/utils/area.js";
import { loadAreaPolygonAll } from "@/utils/area_all.js";
import { isVisibleDistance } from "@/utils/customEntity";
-import { getDistrictCount, getDistrictCountByCity } from "@/api/index";
import { useRoute } from "vue-router";
import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
import { useSimStore } from "@/store/simulation";
+const route = useRoute();
const simStore = useSimStore();
+
+import {
+ getDangerPoint,
+ getDeviceInfo,
+ getAeraCode,
+ getAeraTownCode,
+ getDeviceCount,
+} from "@/api/hpApi";
/////////////////////////鍦板浘褰卞儚閫夋嫨/////////////////////////
const views = [
{ label: "鍦板浘", value: "map", icon: "鍦板浘.png" },
@@ -107,7 +117,6 @@
};
/////////////////////////鍦板浘褰卞儚閫夋嫨/////////////////////////
-const route = useRoute();
let handler = null;
/////////////////////////鍒濆鍖栧湴鍥�/////////////////////////
function initMap() {
@@ -385,17 +394,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,53 +414,81 @@
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: {
- maxVisibleDistance: 50000000,
+ maxVisibleDistance: 60000000,
minVisibleDistance: 70000,
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") {
- const getPoint =
- level === "secondary" ? getDistrictCount : getDistrictCountByCity;
- const config = LEVEL_CONFIG[level];
+async function initDistrictCount(level = "secondary") {
+ try {
+ const deviceAreaTotal = ref([]);
+ const deviceTownTotal = ref([]);
- getPoint()
- .then((res) => {
+ if (level === "primary") {
+ // 涓�绾у尯鍩熷鐞�
+ if (route.path === "/zhjc") {
+ deviceAreaTotal.value = await getDeviceCount(); // 鑾峰彇鍖虹骇璁惧缁熻
+ }
+
+ const res = await getAeraCode();
res.data.forEach((item) => {
- processDistrictItem(item, config, level); // 娣诲姞level鍙傛暟
+ if (route.path === "/zhjc") {
+ const matchedDistrict = deviceAreaTotal.value.data?.find(
+ (d) => d.districtName === item.districtName
+ );
+ if (matchedDistrict) {
+ item.count = matchedDistrict.count; // 鏇存柊 count
+ }
+ }
+ processDistrictItem(item, LEVEL_CONFIG[level], level);
});
- })
- .catch((error) => {
- console.error(`鍒濆鍖�${level}绾у尯鍩熺粺璁″け璐�:`, error);
- });
-}
+ } else if (level === "secondary") {
+ // 浜岀骇鍖哄煙澶勭悊
+ const primaryRes = await getAeraCode();
+ if (route.path === "/zhjc") {
+ // 骞跺彂鑾峰彇姣忎釜鍖虹殑璁惧缁熻
+ deviceTownTotal.value = await Promise.all(
+ primaryRes.data.map((item) =>
+ getDeviceCount({ districtCode: Number(item.districtCode) })
+ )
+ );
+ }
+
+ // 骞跺彂鑾峰彇姣忎釜鍖轰笅鐨勯晣鏁版嵁
+ const townResults = await Promise.all(
+ primaryRes.data.map((item) => getAeraTownCode(item.districtCode))
+ );
+
+ // 澶勭悊姣忎釜鍖虹殑闀囨暟鎹�
+ for (let i = 0; i < townResults.length; i++) {
+ const townRes = townResults[i];
+ const deviceCountData = deviceTownTotal.value[i]?.data || []; // 瀵瑰簲鍖虹殑璁惧缁熻鏁版嵁
+
+ townRes.data.forEach((townItem) => {
+ if (route.path === "/zhjc") {
+ const matchedTown = deviceCountData.find(
+ (d) => d.districtName === townItem.districtName
+ );
+ if (matchedTown) {
+ townItem.count = matchedTown.count;
+ }
+ }
+ processDistrictItem(townItem, LEVEL_CONFIG[level], level);
+ });
+ }
+ } else {
+ console.error("鏈煡鐨� level 绫诲瀷:", level);
+ }
+ } catch (error) {
+ console.error(`鍒濆鍖� ${level} 绾у尯鍩熺粺璁″け璐�:`, error);
+ }
+}
// 澶勭悊鍗曚釜鍖哄煙椤�
function processDistrictItem(item, config, level = "secondary") {
// 娣诲姞榛樿鍊�
@@ -475,40 +501,98 @@
primaryHandler(html, item, config);
}
+ // 姝ゅ蹇呴』鍔狅紝涓嶇劧浜屾璋冪敤鍒濆鍖栧嚱鏁扮殑鏃跺�欎細灏嗕竴浜岀骇鍖哄煙鎵�鏈夌殑鐐归兘鏄剧ず鍦ㄩ〉闈笂
+ html.show = isVisibleDistance(
+ config.minVisibleDistance,
+ config.maxVisibleDistance
+ );
+
htmlEntityList.push(html);
}
+import { ElMessage } from "element-plus";
-// 璁剧疆浜岀骇鍖哄煙鐐瑰嚮澶勭悊锛堝寘鍚玏MS鍥惧眰锛�
+const districtList = ref([]);
+
+// 璁剧疆浜岀骇鍖哄煙鐐瑰嚮澶勭悊(璇锋眰闅愭偅鐐癸紝鐩戞祴璁惧绛�)
function secondaryHandler(html, item, config) {
html.element.addEventListener("click", async () => {
try {
- // 鍏堥鍚戠洰鏍囦綅缃�
+ // 娓呯悊宸叉湁鐐�
+ handleCleanup();
+
+ // 鏄剧ず loading 鎻愮ず锛堟棤閬僵锛屼粎鏂囧瓧+杞湀锛�
+ const loadingInstance = ElMessage({
+ type: "info",
+ message: "鏁版嵁姝ｅ湪鍔犺浇涓�...",
+ duration: 0, // 鎸佺画鏄剧ず锛岀洿鍒版墜鍔ㄥ叧闂�
+ icon: "loading", // 鏄剧ず涓� loading 鍥炬爣锛圗lement Plus 鏀寔锛�
+ grouping: true, // 鐩稿悓鍐呭鐨勬秷鎭悎骞讹紝閬垮厤閲嶅鎻愮ず
+ });
+
+ let res;
+ if (route.path === "/yhgl") {
+ // 璇锋眰闅愭偅鐐规暟鎹�
+ res = await getDangerPoint(item.districtCode);
+ } else if (route.path === "/zhjc") {
+ // 璇锋眰鐩戞祴璁惧鏁版嵁
+ res = await getDeviceInfo(null, item.districtCode);
+ } else {
+ loadingInstance.close();
+ return;
+ }
+ districtList.value = [];
+ // 鏇存柊鏁版嵁
+ districtList.value = res.data.pageData;
+
+ if (districtList.value.length === 0) {
+ ElMessage.warning("璇ュ尯鍩熸殏鏃犵浉鍏虫暟鎹�");
+ loadingInstance.close();
+ return;
+ }
+
+ // 鍒涘缓鍦板浘鐐�
+ for (const [index, point] of districtList.value.entries()) {
+ point.id = point.hdId || point.deviceId; // 鏍规嵁瀹為檯鎯呭喌璋冩暣
+ point.latitude = point.lat || point.latitude; // 鏍规嵁瀹為檯鎯呭喌璋冩暣
+ point.longitude = point.lon || point.longitude; // 鏍规嵁瀹為檯鎯呭喌璋冩暣
+ point.showBillboard = true;
+ point.type = point.disasterType || point.deviceTypeName; // 鏍规嵁瀹為檯鎯呭喌璋冩暣
+ point.className = "district";
+
+ // 鉁� 鏍规嵁璺敱鍐冲畾鍚嶇О瀛楁
+ if (route.path === "/yhgl") {
+ point.name = point.hdName; // 闅愭偅鐐瑰悕绉�
+ point.className = "district";
+ } else if (route.path === "/zhjc") {
+ point.name = point.deviceName; // 璁惧绠�绉�
+ point.className = "device";
+ }
+
+ 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("鏁版嵁鍔犺浇澶辫触锛岃绋嶅悗鍐嶈瘯");
+ // loadingInstance.close(); // 纭繚鍦ㄥ彂鐢熼敊璇椂涔熷叧闂� loading 鎻愮ず
}
});
}
+
+const handleCleanup = async () => {
+ districtList.value = [];
+ clearAllPoints();
+};
// 璁剧疆涓�绾у尯鍩熺偣鍑诲鐞�
function primaryHandler(html, item, config) {
html.element.addEventListener("click", () => {
flyToDistrict(item.longitude, item.latitude, config.flyToHeight);
- console.log(item.districtCode, "itemitemitemitem");
});
}
@@ -553,85 +637,32 @@
});
}
-// 璺敱鐩戝惉
+// 鍦ㄨ矾鐢辩洃鍚櫒涓�
const validPaths = ["/", "/yhgl", "/zhjc"];
+
watch(
() => route.fullPath,
(val) => {
const isValidPath = validPaths.includes(val);
- // 鏇存柊 WMS 鍥惧眰閰嶇疆
- updateWmsLayerByRoute(val);
-
- // 鎺у埗HTML瀹炰綋鏄剧ず
- htmlEntityList.forEach((item) => {
- item.show = isValidPath
- ? isVisibleDistance(item.minVisibleDistance, item.maxVisibleDistance)
- : false;
- });
-
// 鎺у埗鐩告満鍙樺寲鐩戝惉
if (isValidPath) {
+ initAllDistrictCounts();
handleCameraChange();
-
- // 濡傛灉婊¤冻鍙鑼冨洿锛屽皾璇曢噸鏂板姞杞� WMS 鍥惧眰
- const cameraHeight = viewer.camera.positionCartographic.height;
- // loadWmsImg(cameraHeight);
+ // 鎺у埗HTML瀹炰綋鏄剧ず
+ htmlEntityList.forEach((item) => {
+ item.show = isValidPath
+ ? isVisibleDistance(item.minVisibleDistance, item.maxVisibleDistance)
+ : false;
+ });
} else {
+ htmlEntityList.forEach((item) => {
+ item.show = false;
+ });
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 +674,6 @@
}
cameraChangeTimer = setTimeout(() => {
- const cameraHeight = viewer.camera.positionCartographic.height;
-
// 鏇存柊HTML瀹炰綋鏄剧ず鐘舵��
htmlEntityList.forEach((item) => {
item.show = isVisibleDistance(
@@ -652,9 +681,6 @@
item.maxVisibleDistance
);
});
-
- // 妫�鏌ユ槸鍚﹂渶瑕佽嚜鍔ㄥ姞杞芥垨娓呴櫎WMS鍥惧眰
- // loadWmsImg(cameraHeight);
}, 100);
}
@@ -668,87 +694,17 @@
// 鍒濆鍖栧嚱鏁�
function initAllDistrictCounts() {
- initDistrictCount("secondary"); // 浜岀骇鍖哄煙
initDistrictCount("primary"); // 涓�绾у尯鍩�
+ initDistrictCount("secondary"); // 浜岀骇鍖哄煙
}
-// 璁剧疆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();
initHandler();
// initView()
- loadAreaPolygon("/json/nsl_area.geojson");
- loadAreaPolygonAll("/json/geometry.json", true);
+ // loadAreaPolygon("/json/nsl_area.geojson");
+ // loadAreaPolygonAll("/json/geometry.json", true);
flyToHomeView();
// 椤甸潰鍔犺浇鏃跺垵濮嬪寲
initAllDistrictCounts();
--
Gitblit v1.9.3