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 | 611 ++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 468 insertions(+), 143 deletions(-)
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index 322259a..6bae060 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -1,5 +1,30 @@
<template>
<div id="gis-view" ref="mapRef"></div>
+ <!-- 鍒囨崲搴曞浘褰卞儚 -->
+ <div
+ @click="handleShow"
+ class="diqiu"
+ :class="{ 'shift-right': simStore.isShowEarth }"
+ >
+ <img src="@/assets/img/screen/dq.png" alt="" />
+ </div>
+ <div
+ v-show="picShow"
+ class="earthBox"
+ :class="{ 'shift-right': simStore.isShowEarth }"
+ >
+ <div
+ v-for="(item, index) in views"
+ :key="index"
+ :class="['item-container', { active: currentIndex === index }]"
+ @click="switchView(index)"
+ >
+ <div class="icon-wrapper">
+ <img :src="getImageUrl(item.icon)" :alt="item.label" />
+ <span class="label">{{ item.label }}</span>
+ </div>
+ </div>
+ </div>
</template>
<script setup>
@@ -10,16 +35,90 @@
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" },
+ { label: "褰卞儚", value: "image", icon: "褰卞儚.png" },
+ { label: "鍦板舰", value: "terrain", icon: "鍦板舰.png" },
+];
+
+const getImageUrl = (iconName) => {
+ return `/images/earth/${iconName}`;
+};
+
+const picShow = ref(false);
+
+const handleShow = () => {
+ picShow.value = !picShow.value;
+};
+
+const currentIndex = ref(-1);
+
+let currentLayer = null;
+
+const switchView = async (index) => {
+ currentIndex.value = index;
+
+ // 濡傛灉宸茬粡鏈夊浘灞傚瓨鍦紝鍏堜粠鍦板浘涓Щ闄�
+ if (currentLayer) {
+ currentLayer.removeFromMap();
+ currentLayer = null; // 娓呯┖寮曠敤
+ }
+
+ if (views[index].value === "map") {
+ // 鐧惧害鍦板浘
+ currentLayer = await earthCtrl.factory.createImageryLayer({
+ sourceType: "baidu",
+ url: "https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&udt=20180810&scaler=1&showtext=1",
+ });
+ } else if (views[index].value === "image") {
+ currentLayer = await earthCtrl.factory.createImageryLayer({
+ sourceType: "mapworld",
+ url: "https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=3ec79cf7a9dcc6bb18411a5414b148cb",
+ layers: "tdtBasicLayer",
+ style: "default",
+ format: "image/jpeg",
+ maximumLevel: 18,
+ layer: "",
+ tileMatrixSetID: "",
+ });
+ //鏍囨敞灞�
+ currentLayer = await earthCtrl.factory.createImageryLayer({
+ sourceType: "mapworld",
+ subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+ url: "https://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&tk=c53eb074c3fcba5ac86103d4d711bbe8",
+ });
+ } else if (views[index].value === "terrain") {
+ // 鍦板舰鍥惧眰
+ currentLayer = await earthCtrl.factory.createTerrainLayer({
+ sourceType: "arcgis",
+ url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
+ });
+ }
+};
+/////////////////////////鍦板浘褰卞儚閫夋嫨/////////////////////////
+
let handler = null;
+/////////////////////////鍒濆鍖栧湴鍥�/////////////////////////
function initMap() {
window.Cesium = SmartEarth.Cesium;
window.earthCtrl = new SmartEarth.EarthCtrl("gis-view");
@@ -27,20 +126,19 @@
// 1. 璁剧疆鍒濆鏃堕棿
const date = new Date(2025, 3, 11, 12, 0, 0, 0);
- const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date);
- // earthCtrl.viewer.clock.currentTime = julianDate;
+ const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date);
- // 2. 閰嶇疆鏃堕挓閫夐」锛岀姝㈣嚜鍔ㄦ帹杩涙椂闂�
- earthCtrl.viewer.clockViewModel.shouldAnimate = false; // 绂佺敤鍔ㄧ敾
+ // 2. 閰嶇疆鏃堕挓閫夐」
+ earthCtrl.viewer.clockViewModel.shouldAnimate = false;
earthCtrl.viewer.clockViewModel.clockRange =
- SmartEarth.Cesium.ClockRange.CLAMPED; // 闄愬埗鏃堕棿鑼冨洿
- earthCtrl.viewer.clockViewModel.multiplier = 0; // 璁剧疆鏃堕棿鎺ㄨ繘閫熷害涓�0
-
- // 3. 璁剧疆褰撳墠鏃堕棿骞堕攣瀹�
+ SmartEarth.Cesium.ClockRange.CLAMPED;
+ earthCtrl.viewer.clockViewModel.multiplier = 0;
earthCtrl.viewer.clock.currentTime = julianDate;
- //鏄剧ずfps
+ // 鏄剧ずfps
earthCtrl.showFPS = true;
+
+ // 鍏堟坊鍔犲簳鍥�
earthCtrl.factory.createImageryLayer({
sourceType: "mapworld",
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7eb11c0c503429878691ac917238f87f",
@@ -48,20 +146,19 @@
style: "default",
format: "image/jpeg",
maximumLevel: 18,
- layer: "",
- tileMatrixSetID: "",
});
- // 鍏抽棴鍦板舰娣卞害妫�娴�
- // viewer.scene.globe.depthTestAgainstTerrain = false;
}
+/////////////////////////鏂板缓鏂规鍖哄煙閫夋嫨/////////////////////////
const MULTIPOLYGON_COORDS = ref([]);
let previousEntities = []; // 鐢ㄤ簬瀛樺偍涔嬪墠鍒涘缓鐨勫疄浣�
const flyToHeight = ref(null);
+const ShowFill = ref(true);
// 鐩戝惉鏂板缓鏂规閫夋嫨鐨勫尯鍩熻寖鍥�
-EventBus.on("select-geom", ({ geom, flyHeight }) => {
+EventBus.on("select-geom", ({ geom, flyHeight, shouldShowFill }) => {
flyToHeight.value = flyHeight;
+ ShowFill.value = shouldShowFill;
const coordsStr = geom
.replace("MULTIPOLYGON(((", "") // 鍘绘帀寮�澶�
.replace(")))", ""); // 鍘绘帀缁撳熬
@@ -87,7 +184,7 @@
// 娓呴櫎涔嬪墠鐨勬墍鏈夊疄浣�
clearPreviousEntities();
// 閫変腑鍖哄煙鏍囪壊
- addCustomPolygon();
+ addCustomPolygon(ShowFill.value);
});
// 娓呴櫎涔嬪墠鐨勬墍鏈夊疄浣�
@@ -127,25 +224,27 @@
};
}
-function addCustomPolygon() {
+function addCustomPolygon(ShowFill = true) {
// 灏� MULTIPOLYGON_COORDS.value 杞崲涓� GeoJSON 鏍煎紡
const geoJson = convertToGeoJson(MULTIPOLYGON_COORDS.value);
const center = geoJson.properties.center;
- // 鍒涘缓澶氳竟褰㈠疄浣�
+ // 鍒涘缓澶氳竟褰㈠疄浣擄紝骞舵牴鎹� ShowFill 鍙傛暟鍐冲畾鏄惁鏄剧ず濉厖棰滆壊
const polygonEntity = viewer.entities.add({
- // name: "鑷畾涔夊尯鍩�",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(
geoJson.geometry.coordinates[0][0].flat()
),
- material: Cesium.Color.RED.withAlpha(0.3), // 鍗婇�忔槑绾㈣壊濉厖
+ material: ShowFill
+ ? Cesium.Color.RED.withAlpha(0.3) // 鍗婇�忔槑绾㈣壊濉厖
+ : new Cesium.ColorMaterialProperty(Cesium.Color.TRANSPARENT), // 濡傛灉涓嶉渶瑕佸～鍏咃紝鍒欎娇鐢ㄩ�忔槑鏉愯川
outline: true,
outlineColor: Cesium.Color.RED, // 绾㈣壊杈规
outlineWidth: 5,
clampToGround: true, // 璐村湴鏄剧ず
},
});
+
previousEntities.push(polygonEntity);
// 椋炲悜涓績鐐�
@@ -154,20 +253,20 @@
center.lon,
center.lat,
flyToHeight.value
- ), // 鎻愰珮鍒� 100000绫抽珮搴�
+ ), // 鎻愰珮鍒版寚瀹氶珮搴�
orientation: {
heading: Cesium.Math.toRadians(0), // 姝ｅ寳鏂瑰悜
pitch: Cesium.Math.toRadians(-90), // 鍚戜笅鍊炬枩90搴︼紙鍨傜洿淇锛�
roll: 0.0,
},
});
-
}
EventBus.on("close-selectArea", () => {
clearPreviousEntities();
flyToHomeView();
});
+/////////////////////////鏂板缓鏂规鍖哄煙閫夋嫨/////////////////////////
function addCityPolygon() {
const url = `/json/110000.geo.json`;
@@ -189,8 +288,6 @@
50000000
);
polygonEntity.forEach((entity) => {
- // console.log("entity", entity)
-
entity.polygon.material = new Cesium.ColorMaterialProperty(
Cesium.Color.LIGHTSTEELBLUE.withAlpha(0)
// new Cesium.Color.fromCssColorString("#0f2636b3")
@@ -294,134 +391,279 @@
viewer.scene.camera.flyTo(view);
}
-let htmlEntityList = [];
-function initDistrictCount() {
- getDistrictCount().then((res) => {
- res.data.forEach((item) => {
- const { districtName, count, lat, lon } = item;
- item.name = `${item.districtName}\n${item.count}`;
- item.longitude = item.lon;
- item.latitude = item.lat;
- item.showBillboard = false;
- item.showLabel = true;
- item.label = {
- text: item.name,
- backgroundColor: SmartEarth.Cesium.Color.SKYBLUE.withAlpha(0.8),
- font: "14pt Source Han Sans CN",
- fillColor: SmartEarth.Cesium.Color.WHITE,
- showBackground: true,
- };
- // createPoint(item)
- const html = earthCtrl.view.createScreenDialog({
- html: `
- <div class="district-count">
- <div class="name">${districtName}</div>
- <div class="value">${count}</div>
- </div>
- `,
- lon: item.lon,
- lat: item.lat,
- height: 0,
+///////////////////////// 鍖哄煙鏍囪鐐圭鐞嗙郴缁� /////////////////////////
+// 瀛樺偍鎵�鏈夊垱寤虹殑HTML瀹炰綋锛堝湴鍥句笂鐨勬爣璁扮偣锛�
+const htmlEntityList = [];
+
+// 缁熶竴绠＄悊鎵�鏈夊尯鍩熸爣璁扮殑鏍峰紡閰嶇疆
+const ENTITY_CONFIG = {
+ label: {
+ backgroundColor: SmartEarth.Cesium.Color.SKYBLUE.withAlpha(0.8),
+ font: "14pt Source Han Sans CN",
+ fillColor: SmartEarth.Cesium.Color.WHITE,
+ showBackground: true,
+ },
+ showBillboard: false,
+ showLabel: true,
+};
+
+// 鍖哄煙绾у埆閰嶇疆
+const LEVEL_CONFIG = {
+ // 浜岀骇鍖哄煙
+ secondary: {
+ maxVisibleDistance: 69000,
+ minVisibleDistance: 20000,
+ flyToHeight: 12000,
+ },
+ // 涓�绾у尯鍩�
+ primary: {
+ maxVisibleDistance: 60000000,
+ minVisibleDistance: 70000,
+ flyToHeight: 45000,
+ },
+};
+
+// 鍒濆鍖栧尯鍩熺粺璁�
+async function initDistrictCount(level = "secondary") {
+ try {
+ const deviceAreaTotal = ref([]);
+ const deviceTownTotal = ref([]);
+
+ if (level === "primary") {
+ // 涓�绾у尯鍩熷鐞�
+ if (route.path === "/zhjc") {
+ deviceAreaTotal.value = await getDeviceCount(); // 鑾峰彇鍖虹骇璁惧缁熻
+ }
+
+ const res = await getAeraCode();
+ res.data.forEach((item) => {
+ 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);
});
- html.maxVisibleDistance = 69000;
- html.minVisibleDistance = 20000;
- html.element.addEventListener("click", () => {
- viewer.camera.flyTo({
- destination: Cesium.Cartesian3.fromDegrees(
- item.longitude,
- item.latitude,
- 12000
- ),
- orientation: {
- pitch: Cesium.Math.toRadians(-90),
- heading: Cesium.Math.toRadians(0),
- roll: 0,
- },
- duration: 2,
+ } 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") {
+ // 娣诲姞榛樿鍊�
+ normalizeItemData(item);
+ const html = createDistrictHtmlMarker(item, config);
+
+ if (level === "secondary") {
+ secondaryHandler(html, item, config);
+ } else {
+ primaryHandler(html, item, config);
+ }
+
+ // 姝ゅ蹇呴』鍔狅紝涓嶇劧浜屾璋冪敤鍒濆鍖栧嚱鏁扮殑鏃跺�欎細灏嗕竴浜岀骇鍖哄煙鎵�鏈夌殑鐐归兘鏄剧ず鍦ㄩ〉闈笂
+ html.show = isVisibleDistance(
+ config.minVisibleDistance,
+ config.maxVisibleDistance
+ );
+
+ htmlEntityList.push(html);
+}
+import { ElMessage } from "element-plus";
+
+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, // 鐩稿悓鍐呭鐨勬秷鎭悎骞讹紝閬垮厤閲嶅鎻愮ず
});
- htmlEntityList.push(html);
- });
- });
-}
-function initDistrictCountByCity() {
- getDistrictCountByCity().then((res) => {
- res.data.forEach((item) => {
- const { districtName, count, lat, lon } = item;
- item.name = `${item.districtName}\n${item.count}`;
- item.longitude = item.lon;
- item.latitude = item.lat;
- item.showBillboard = false;
- item.showLabel = true;
- item.label = {
- text: item.name,
- backgroundColor: SmartEarth.Cesium.Color.SKYBLUE.withAlpha(0.8),
- font: "14pt Source Han Sans CN",
- fillColor: SmartEarth.Cesium.Color.WHITE,
- showBackground: true,
- };
- // createPoint(item)
- const html = earthCtrl.view.createScreenDialog({
- html: `
- <div class="district-count">
- <div class="name">${districtName}</div>
- <div class="value">${count}</div>
- </div>
- `,
- lon: item.lon,
- lat: item.lat,
- height: 0,
- });
- html.maxVisibleDistance = 50000000;
- html.minVisibleDistance = 70000;
- html.element.addEventListener("click", () => {
- viewer.camera.flyTo({
- destination: Cesium.Cartesian3.fromDegrees(
- item.longitude,
- item.latitude,
- 45000
- ),
- orientation: {
- pitch: Cesium.Math.toRadians(-90),
- heading: Cesium.Math.toRadians(0),
- roll: 0,
- },
- duration: 2,
- });
- });
+ 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;
- htmlEntityList.push(html);
- });
+ 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);
+
+ // 鍔犺浇瀹屾垚鍚庡叧闂� 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);
+ });
+}
+
+// 缁熶竴鏁版嵁鏍煎紡鍜屾坊鍔犻粯璁ら厤缃�
+function normalizeItemData(item) {
+ item.name = `${item.districtName}\n${item.count}`;
+ item.longitude = item.lon;
+ item.latitude = item.lat;
+ Object.assign(item, ENTITY_CONFIG);
+}
+
+// 鍒涘缓HTML鏍囪
+function createDistrictHtmlMarker(item, config) {
+ const html = earthCtrl.view.createScreenDialog({
+ html: `
+ <div class="district-count">
+ <div class="name">${item.districtName}</div>
+ <div class="value">${item.count}</div>
+ </div>
+ `,
+ lon: item.lon,
+ lat: item.lat,
+ height: 0,
+ });
+
+ html.maxVisibleDistance = config.maxVisibleDistance;
+ html.minVisibleDistance = config.minVisibleDistance;
+
+ return html;
+}
+
+// 椋炲悜鎸囧畾鍖哄煙
+function flyToDistrict(longitude, latitude, height) {
+ viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
+ orientation: {
+ pitch: Cesium.Math.toRadians(-90),
+ heading: Cesium.Math.toRadians(0),
+ roll: 0,
+ },
+ duration: 2,
+ });
+}
+
+// 鍦ㄨ矾鐢辩洃鍚櫒涓�
+const validPaths = ["/", "/yhgl", "/zhjc"];
+
watch(
() => route.fullPath,
(val) => {
- if (val != "/") {
- // clusterLayer.dataSource.show = false
+ const isValidPath = validPaths.includes(val);
+
+ // 鎺у埗鐩告満鍙樺寲鐩戝惉
+ if (isValidPath) {
+ initAllDistrictCounts();
+ handleCameraChange();
+ // 鎺у埗HTML瀹炰綋鏄剧ず
+ htmlEntityList.forEach((item) => {
+ item.show = isValidPath
+ ? isVisibleDistance(item.minVisibleDistance, item.maxVisibleDistance)
+ : false;
+ });
+ } else {
htmlEntityList.forEach((item) => {
item.show = false;
});
removeCameraChange();
- } else {
- handleCameraChange();
- // clusterLayer.dataSource.show = true
- htmlEntityList.forEach((item) => {
- item.show = isVisibleDistance(
- item.minVisibleDistance,
- item.maxVisibleDistance
- );
- });
}
}
);
-function handleCameraChange() {
- viewer.camera.changed.addEventListener(toggleHtmlLayerByVisibleDistance);
-}
-function removeCameraChange() {
- viewer.camera.changed.removeEventListener(toggleHtmlLayerByVisibleDistance);
-}
+
let cameraChangeTimer = null;
function toggleHtmlLayerByVisibleDistance() {
@@ -430,7 +672,9 @@
cameraChangeTimer = null;
return;
}
+
cameraChangeTimer = setTimeout(() => {
+ // 鏇存柊HTML瀹炰綋鏄剧ず鐘舵��
htmlEntityList.forEach((item) => {
item.show = isVisibleDistance(
item.minVisibleDistance,
@@ -440,17 +684,30 @@
}, 100);
}
+function handleCameraChange() {
+ viewer.camera.changed.addEventListener(toggleHtmlLayerByVisibleDistance);
+}
+
+function removeCameraChange() {
+ viewer.camera.changed.removeEventListener(toggleHtmlLayerByVisibleDistance);
+}
+
+// 鍒濆鍖栧嚱鏁�
+function initAllDistrictCounts() {
+ initDistrictCount("primary"); // 涓�绾у尯鍩�
+ initDistrictCount("secondary"); // 浜岀骇鍖哄煙
+}
+
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();
- initDistrictCount();
- initDistrictCountByCity();
+ // 椤甸潰鍔犺浇鏃跺垵濮嬪寲
+ initAllDistrictCounts();
handleCameraChange();
// 璁剧疆 billboard 鐐瑰嚮浜嬩欢
});
@@ -467,9 +724,77 @@
height: 100vh;
position: absolute;
}
+
// // 淇敼鎸囧崡閽堜綅缃�
/deep/ .compass {
- right: 128px !important;
- top: 112px;
+ right: 128px !important;
+ top: 112px;
+}
+
+.diqiu {
+ position: absolute;
+ bottom: 8%;
+ right: 4%;
+ z-index: 9999;
+}
+
+.earthBox {
+ z-index: 9999;
+ width: 12%;
+ height: 7%;
+ background-color: rgba(0, 9, 9, 0.3);
+ position: absolute;
+ right: 8%;
+ bottom: 6%;
+ display: flex;
+ justify-content: space-evenly;
+ padding: 10px 6px;
+}
+
+.icon-wrapper {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ border: 1px solid transparent; /* 榛樿閫忔槑杈规鍗犱綅 */
+
+ img {
+ height: 100%;
+ width: auto; /* 纭繚鍥剧墖鎸夋瘮渚嬬缉鏀� */
+ margin: 0;
+ padding: 0;
+ display: block; /* 绉婚櫎鍥剧墖涓嬫柟鍙兘瀛樺湪鐨勭┖鐧介棿闅� */
+ }
+
+ .label {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ text-align: center;
+ color: white;
+ }
+}
+
+.item-container {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+}
+
+.item-container.active .icon-wrapper {
+ border: 1px solid #218967; /* 钃濊壊杈规 */
+}
+
+.item-container.active .label {
+ background-color: rgba(33, 137, 103, 0.8);
+}
+
+.diqiu.shift-right {
+ right: 10%;
+}
+.earthBox.shift-right {
+ right: 13%;
}
</style>
--
Gitblit v1.9.3