隐患点优化

guonan

2025-06-06 7909450b6142fd10c55690c5ce093137247310ef

隐患点优化

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

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




 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 {

 src/components/menu/Location.vue

@@ -71,22 +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";
// 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();
  }

 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 = []; // 存储创建的WMS图层

// 路由对应的 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";

// 设置二级区域点击处理（包含WMS图层）
const districtList = ref([]); // 当前区域的隐患点列表
const loadedPointIds = new Set(); // 已加载的隐患点ID集合

// 设置二级区域点击处理(请求隐患点，监测设备等)
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提供的loading图标类名
        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图层，则自动加载第一个二级点的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;
    }
  }
}

let clickHandler = null;

// 移除所有WMS图层
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. 发送GetFeatureInfo请求
  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>

 src/views/Home.vue

@@ -103,7 +103,7 @@
  setupTokenRefresh(); // 获取宏图token
  // getSimData(); //测试tr后端
  // 获取隐患点列表（因为中科软后端接口获取加载时间较长）
  getDangerPoint().then((res) => {
  getDangerPoint("110116110000").then((res) => {
    simStore.DangerPoint = res.data.pageData;
  });
  try {