提交

guonan

2025-06-06 cf4ed06dea0076e518319de24c5120bb3fe0dae9

提交

 src/api/hpApi.js

@@ -69,8 +69,8 @@
  return response.data;
}

// 获取监测设备信息
export async function getDeviceInfo(data) {
// 获取琉璃庙镇监测设备信息
export async function getDeviceInfoShg(data) {
  const response = await axios.post("/hp/deviceInfo/getData", {
    filterObject: {
      "dictDeviceType": data,
@@ -81,18 +81,97 @@
  return response.data;
}

// 获取北京市监测设备信息
export async function getDeviceInfo(data) {
  const response = await axios.post("/hp/deviceInfo/getData", {

    "currentPage": 1,
    "pageSize": 10000,
    "filterObject": {
      "belongObjList": [
        "1797461961110261762"
      ]
      // "id": "",
      // "deviceName": "",
      // "deviceCode": "",
      // "deviceClientId": "",
      // "dictDeviceType": "",
      // "hdName": "",
      // "installUnit": "",
      // "rtuUnit": "",
      // "dictDisasterType": "",
      // "dictCommunicationType": "",
      // "dictDeviceStatus": "",
      // "divisionDistrict": "",
      // "townCode": ""
    },
    "sortedList": [
      {
        "sorted": "createTime",
        "type": "desc"
      }
    ]
  })

  return response.data;
}


// 获取隐患点信息
export async function getDangerPoint(data) {
  const response = await axios.post("/hp/sinoDzHiddenDangerPoint/getData", {
    filterObject: {
      "divisionCounty": "110116000000",
      "divisionTown": "110116110000"
      "divisionTown": "110116110000",
      // "divisionCounty": null,
      // "divisionTown": null,
      "year": 2025
    },
    "pageSize": 10000
  });
  return response.data;
}

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 // 添加当前页码参数
      });

      const pageData = response.data?.data?.pageData;

      if (!Array.isArray(pageData)) {
        console.error("Expected an array in 'pageData', but got:", typeof pageData, pageData);
        break;
      }

      if (pageData.length === 0) break; // 没有更多数据了

      // 调用传入的回调函数，用于更新页面内容
      loadCallback(pageData);

      if (pageData.length < pageSize) break; // 如果本次返回的数据少于pageSize，说明已获取完所有数据

      currentPage++; // 更新下一页的页码
    } catch (error) {
      console.error("Error fetching danger points:", error);
      break;
    }
  }
}



// 根据年份获取雨量数据
export async function getRainfallDataYears(data) {
  const response = await axios.post("/hp/rainfallCountyCity/getData", {

 src/api/requestHT.js

@@ -3,7 +3,7 @@
// 创建 Axios 实例
const instance = axios.create({
  baseURL: "/", // 使用你配置的 /auth 代理
  timeout: 1000 * 60, // 请求超时时间（单位：毫秒）
  // timeout: 1000 * 60, // 请求超时时间（单位：毫秒）
  headers: {
    "Content-Type": "application/json", // 默认请求头
  },

 src/components/menu/Device.vue

@@ -74,7 +74,7 @@
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { createPoint, removeEntities } from "@/utils/map";
import { deviceDictList, getDictName } from "@/constant/dict.js";
import { getDeviceInfo } from "@/api/hpApi";
import { getDeviceInfoShg, getDeviceInfo } from "@/api/hpApi";
import { initeWaterPrimitiveView } from "@/utils/water"; //相机flyTo函数，后续options列表中有对应经纬度后弃用
import { useSimStore } from "@/store/simulation";
import { Loading } from "@element-plus/icons-vue";
@@ -87,7 +87,7 @@
  try {
    await getData();
    await loadDeviceList(selectValue.value);
    initeWaterPrimitiveView();
    // initeWaterPrimitiveView();
  } finally {
    isLoading.value = false;
  }
@@ -124,9 +124,9 @@
    removeEntities(item.deviceId);
  });
};
const initializeDevicePoints = () => {
const initializeDevicePoints = (val) => {
  const list = [];
  deviceListAll.value.forEach((item, index) => {
  val.forEach((item, index) => {
    // 根据需求可增删
    item.type = getDictName(deviceDictList, item.dictDeviceType);
    item.name = item.deviceName.split(selectValue.value)[1] || item.deviceName;
@@ -141,7 +141,7 @@
};
const allDevices = ref([]);
const getData = async () => {
  const res = await getDeviceInfo();
  const res = await getDeviceInfoShg();
  allDevices.value = res.data.pageData;
};
// 根据区域名称加载设备列表
@@ -149,14 +149,38 @@
  try {
    isLoading.value = true;
    handleCleanup();
    // const res = await getDeviceInfo();
    // const res = await getDeviceInfoShg();
    // const allDevices = res.data.pageData;
    const devicesInArea = allDevices.value.filter((item) =>
      item.deviceName?.includes(areaName)
    );
    deviceListAll.value = devicesInArea;
    deviceListAll.length = 0;
    initializeDevicePoints();
    // deviceListAll.value = devicesInArea;
    getDeviceInfo().then((res) => {
      const list = res.data.pageData;
      deviceListAll.value = [];

      let index = 0;
      const batchSize = 50; // 每次处理的数量
      const delay = 100; // 每隔多少毫秒处理一次

      const intervalId = setInterval(() => {
        // 取出当前批次的数据
        const batch = list.slice(index, index + batchSize);

        if (batch.length === 0) {
          clearInterval(intervalId); // 数据处理完了，停止定时器
          return;
        }

        // 把当前批次的数据 push 到 deviceListAll
        deviceListAll.value = [...deviceListAll.value, ...batch];

        // 对当前批次执行初始化方法
        initializeDevicePoints(batch);

        index += batchSize;
      }, delay);
    });
  } catch (error) {
    console.error("加载设备信息失败", error);
  } finally {

 src/components/menu/Location.vue

@@ -71,6 +71,22 @@
import { initeWaterPrimitiveView } from "@/utils/water"; //相机flyTo函数，后续options列表中有对应经纬度后弃用
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { Loading } from "@element-plus/icons-vue";
import { fetchAndLoadDangerPoints } from "@/api/hpApi.js";

const districtList = ref([]);

const displayData = ref([]);

const loadCallback = async (newData) => {
  districtList.value = [...newData];
  console.log(districtList.value, "aaaaaaaaaaaaaaaaaaaaaaaaa");

  await initializeDevicePoints();
};

onMounted(() => {
  fetchAndLoadDangerPoints(loadCallback);
});

const simStore = useSimStore();
// onBeforeRouteUpdate((to, from, next) => {
@@ -115,7 +131,6 @@
  },
]);

const districtList = ref([]);
const loading = ref(true); // 控制加载状态

function handleClick(district) {
@@ -152,7 +167,7 @@
    })
  );
};
// 根据区域名称过滤数据

const filterDataByArea = async (areaName) => {
  handleCleanup();
  if (!areaName || !simStore.DangerPoint || simStore.DangerPoint.length === 0) {
@@ -164,7 +179,8 @@
  );

  if (JSON.stringify(districtList.value) !== JSON.stringify(filteredData)) {
    districtList.value = filteredData;
    // districtList.value = filteredData;

    await initializeDevicePoints();
  }
};

 src/components/tools/LayerTree.vue

@@ -28,7 +28,7 @@
import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area";
import { checkedKeys } from "@/store/index";
import { getDuanMainData, getDistrictListData } from "@/api/index.js";
import { getDeviceInfo, getDangerPoint } from "@/api/hpApi";
import { getDeviceInfoShg, getDangerPoint } from "@/api/hpApi";

import { useSimStore } from "@/store/simulation";

@@ -254,7 +254,7 @@

// 监测设备列表
const getDevicetList = async () => {
  const res = await getDeviceInfo(); // 调整getDeviceInfo以接受动态参数，如果需要的话
  const res = await getDeviceInfoShg(); // 调整getDeviceInfoShg以接受动态参数，如果需要的话
  devicetList.value = res.data.pageData.filter((item) =>
    item.deviceName?.includes("孙胡沟")
  );

 src/store/simulation.js

@@ -106,6 +106,7 @@

    const startZHJC = () => {
        init()
        flyToHomeView()
        functionShow.value = true
        deviceShow.value = true
        isShowEarth.value = true
@@ -114,6 +115,7 @@

    const startMNFZ = () => {
        init()
        flyToHomeView()
        leftShow.value = true
        isShowEarth.value = false


 src/views/GisView.vue

@@ -44,7 +44,7 @@
import { EventBus } from "@/eventBus"; // 引入事件总线
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();

/////////////////////////地图影像选择/////////////////////////
const views = [
  { label: "地图", value: "map", icon: "地图.png" },
  { label: "影像", value: "image", icon: "影像.png" },
@@ -105,8 +105,11 @@
    });
  }
};
/////////////////////////地图影像选择/////////////////////////

const route = useRoute();
let handler = null;
/////////////////////////初始化地图/////////////////////////
function initMap() {
  window.Cesium = SmartEarth.Cesium;
  window.earthCtrl = new SmartEarth.EarthCtrl("gis-view");
@@ -114,24 +117,19 @@

  // 1. 设置初始时间
  const date = new Date(2025, 3, 11, 12, 0, 0, 0);
  // const date = new Date(2024, 6, 13, 5, 5, 50);
  const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date);
  // earthCtrl.viewer.clock.currentTime = julianDate;

  // // 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
  // 开启大气散射效果
  earthCtrl.atmosphere.enable();
  // 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",
@@ -139,13 +137,10 @@
    style: "default",
    format: "image/jpeg",
    maximumLevel: 18,
    layer: "",
    tileMatrixSetID: "",
  });
  // 关闭地形深度检测
  // viewer.scene.globe.depthTestAgainstTerrain = false;
}

/////////////////////////新建方案区域选择/////////////////////////
const MULTIPOLYGON_COORDS = ref([]);
let previousEntities = []; // 用于存储之前创建的实体
const flyToHeight = ref(null);
@@ -262,6 +257,7 @@
  clearPreviousEntities();
  flyToHomeView();
});
/////////////////////////新建方案区域选择/////////////////////////

function addCityPolygon() {
  const url = `/json/110000.geo.json`;
@@ -283,8 +279,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")
@@ -388,136 +382,257 @@
  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.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,
        });
      });
///////////////////////// 区域标记点管理系统 /////////////////////////
// 存储所有创建的HTML实体（地图上的标记点）
const htmlEntityList = [];
const wmsLayers = []; // 存储创建的WMS图层

      htmlEntityList.push(html);
    });
  });
// 路由对应的 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 = {
  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,
    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,
    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 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,
        });
      });

      htmlEntityList.push(html);
// 初始化区域统计
function initDistrictCount(level = "secondary") {
  const getPoint =
    level === "secondary" ? getDistrictCount : getDistrictCountByCity;
  const config = LEVEL_CONFIG[level];

  getPoint()
    .then((res) => {
      res.data.forEach((item) => {
        processDistrictItem(item, config, 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);
  }

  htmlEntityList.push(html);
}

// 设置二级区域点击处理（包含WMS图层）
function secondaryHandler(html, item, config) {
  html.element.addEventListener("click", async () => {
    try {
      // 先飞向目标位置
      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();

      // 添加新的点击事件
    } catch (error) {
      console.error("区域点击处理失败:", error);
    }
  });
}

const validPaths = ["/", "/yhgl"];
// 设置一级区域点击处理
function primaryHandler(html, item, config) {
  html.element.addEventListener("click", () => {
    flyToDistrict(item.longitude, item.latitude, config.flyToHeight);
    console.log(item.districtCode, "itemitemitemitem");
  });
}

// 统一数据格式和添加默认配置
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 (!validPaths.includes(val)) {
      // clusterLayer.dataSource.show = false
      htmlEntityList.forEach((item) => {
        item.show = false;
      });
      removeCameraChange();
    } else {
    const isValidPath = validPaths.includes(val);

    // 更新 WMS 图层配置
    updateWmsLayerByRoute(val);

    // 控制HTML实体显示
    htmlEntityList.forEach((item) => {
      item.show = isValidPath
        ? isVisibleDistance(item.minVisibleDistance, item.maxVisibleDistance)
        : false;
    });

    // 控制相机变化监听
    if (isValidPath) {
      handleCameraChange();
      // clusterLayer.dataSource.show = true
      htmlEntityList.forEach((item) => {
        item.show = isVisibleDistance(
          item.minVisibleDistance,
          item.maxVisibleDistance
        );
      });

      // 如果满足可视范围，尝试重新加载 WMS 图层
      const cameraHeight = viewer.camera.positionCartographic.height;
      // loadWmsImg(cameraHeight);
    } else {
      removeCameraChange();
      removeAllWmsLayers();
    }
  }
);
function handleCameraChange() {
  viewer.camera.changed.addEventListener(toggleHtmlLayerByVisibleDistance);

// 自动加载 WMS 图层
async function loadWmsImg(cameraHeight) {
  const config = LEVEL_CONFIG.secondary;

  // 判断是否处于二级可视范围内
  if (cameraHeight <= config.minVisibleDistance) {
    // 如果当前没有WMS图层，则自动加载第一个二级点的WMS图层
    if (wmsLayers.length === 0 && htmlEntityList.length > 0) {
      const firstItem = htmlEntityList[0]; // 可以选任意一个二级点
      removeAllWmsLayers(); // 清除可能存在的残留图层

      earthCtrl.factory
        .createImageryLayer(config.wmsOptions)
        .then((wmsLayer) => {
          wmsLayers.push(wmsLayer);
        });
    } else {
      // 已有图层但URL变了，需要更新
      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) {
    // 如果超出可视范围且已有WMS图层，则清除
    removeAllWmsLayers();
    // 可以在这里移除事件监听器
    if (clickHandler) {
      clickHandler.destroy();
      clickHandler = null;
    }
  }
}
function removeCameraChange() {
  viewer.camera.changed.removeEventListener(toggleHtmlLayerByVisibleDistance);

let clickHandler = null;

// 移除所有WMS图层
function removeAllWmsLayers() {
  wmsLayers.forEach((layer) => {
    layer.removeFromMap();
  });
  wmsLayers.length = 0; // 清空数组
}

let cameraChangeTimer = null;

function toggleHtmlLayerByVisibleDistance() {
@@ -526,27 +641,117 @@
    cameraChangeTimer = null;
    return;
  }

  cameraChangeTimer = setTimeout(() => {
    const cameraHeight = viewer.camera.positionCartographic.height;

    // 更新HTML实体显示状态
    htmlEntityList.forEach((item) => {
      item.show = isVisibleDistance(
        item.minVisibleDistance,
        item.maxVisibleDistance
      );
    });

    // 检查是否需要自动加载或清除WMS图层
    // loadWmsImg(cameraHeight);
  }, 100);
}

function handleCameraChange() {
  viewer.camera.changed.addEventListener(toggleHtmlLayerByVisibleDistance);
}

function removeCameraChange() {
  viewer.camera.changed.removeEventListener(toggleHtmlLayerByVisibleDistance);
}

// 初始化函数
function initAllDistrictCounts() {
  initDistrictCount("secondary"); // 二级区域
  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. 发送GetFeatureInfo请求
  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);
  flyToHomeView();
  initDistrictCount();
  initDistrictCountByCity();
  // 页面加载时初始化
  initAllDistrictCounts();
  handleCameraChange();
  // 设置 billboard 点击事件
});

 src/views/left/KGSimOption/RealTimeSimulation.vue

@@ -78,7 +78,7 @@
import { initeWaterPrimitiveView } from "@/utils/water";
import { SimAPIStore } from "@/store/simAPI";
import { EventBus } from "@/eventBus"; // 引入事件总线
import { getDeviceInfo } from "@/api/hpApi";
import { getDeviceInfoShg } from "@/api/hpApi";

// 获取 Store 实例
const simStore = SimAPIStore();
@@ -117,7 +117,7 @@
const getRainListAll = () => {
  // 雨量计类型id
  const ids = "1874719366287368194";
  getDeviceInfo(ids).then((res) => {
  getDeviceInfoShg(ids).then((res) => {
    rainListNoFilter.value = res.data.pageData;
    // 根据当前选择的区域自动过滤
    updateShgListByArea();