优化

guonan

2025-07-08 687d15815ed738173c5a82495f0056fb2c9d7f25

 src/utils/map.js

@@ -1,4 +1,8 @@
import { showDeviceDetail, deviceDetail, className, dialogPositon } from "@/store";

import { useSimStore } from '@/store/simulation'


export function addTerrain(url) {
  // console.log("加载地形");
  var terrainProvider = new Cesium.CesiumTerrainProvider({
@@ -57,10 +61,13 @@
}

let entities = [];
const pointEntityMap = new Map(); // key: id, value: entity

export function createPoint(option) {
  const {
    id,
    type = "",
    deviceTypeName = "",
    name = "默认名称",
    view,
    latitude,
@@ -71,100 +78,95 @@
    imgHeight = 67,
    showBillboard = true,
    showLabel = true,
    className = "device",
    className = "device"
  } = option;
  let position = Cesium.Cartesian3.fromDegrees(longitude, latitude, 50);


  const realType = type || deviceTypeName;

  // 如果已经存在该 id 的 entity，则跳过创建
  if (pointEntityMap.has(id)) {
    clearAllPoints()
    console.log(`点 ${id} 已存在，已清除重建`);
  }

  let position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height || 50);

  let model = {
    id,
    name: name,
    position: position,
    type: type,
    type: realType,
    view: view,
    attrs: option,
    className: className,
    label: {
      // 文本。支持显式换行符“ \ n”
      text: name || "默认标签",
      // 字体样式，以CSS语法指定字体
      font: "14pt Source Han Sans CN",
      // 字体颜色

      fillColor: type.includes("active") ? Cesium.Color.AQUA : Cesium.Color.WHITE,
      // 背景颜色
      fillColor: (typeof realType === 'string' && realType.includes("active"))
        ? Cesium.Color.AQUA
        : Cesium.Color.WHITE,
      // fillColor: Cesium.Color.WHITE,
      backgroundColor: showBillboard ? Cesium.Color.BLACK.withAlpha(0.5) : Cesium.Color.SKYBLUE,
      // 是否显示背景颜色
      showBackground: true,
      // 字体边框
      outline: false,
      // 字体边框颜色
      outlineColor: Cesium.Color.WHITE,
      // 字体边框尺寸
      outlineWidth: 0,
      // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
      scale: 1.0,
      scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
      // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      // 相对于坐标的水平位置
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
      // 相对于坐标的水平位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
      pixelOffset: new Cesium.Cartesian2(0, -40),
      // pixelOffset: new Cesium.Cartesian2(0, 0),
      // 显示在距相机的距离处的属性，多少区间内是可以显示的
      distanceDisplayCondition: type.includes("河流")
      distanceDisplayCondition: (typeof realType === 'string' && realType.includes("河流"))
        ? new Cesium.DistanceDisplayCondition(0, 5000000)
        : new Cesium.DistanceDisplayCondition(0, 50000),
      // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),
      heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      // 是否显示
      show: showLabel,
    },
  };

  model.billboard = {
    // 图像地址，URI或Canvas的属性
    image: type ? `/images/poi/${type}.png` : `/images/poi/村庄.png`,
    // 高度（以像素为单位）
    height: imgHeight || 20,
    // 宽度（以像素为单位）
    width: imgWidth || 20,
    // 逆时针旋转
    // 大小是否以米为单位
    sizeInMeters: false,
    // 相对于坐标的垂直位置
    verticalOrigin: Cesium.VerticalOrigin.CENTER,
    // 相对于坐标的水平位置
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
    pixelOffset: new Cesium.Cartesian2(0, 3),
    // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
    scale: 0.8,
    scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
    // 显示在距相机的距离处的属性，多少区间内是可以显示的
    distanceDisplayCondition: type.includes("河流")
    distanceDisplayCondition: (typeof realType === 'string' && realType.includes("河流"))
      ? new Cesium.DistanceDisplayCondition(0, 5000000)
      : new Cesium.DistanceDisplayCondition(0, 50000),
    // 是否显示
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 50000),

    show: showBillboard,
    heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
    backgroundColor: showBillboard ? Cesium.Color.BLACK.withAlpha(0.8) : Cesium.Color.SKYBLUE,
  };

  // 创建新实体并添加到地图中
  const entity = viewer.entities.add(model);
  entities.push(entity);
  pointEntityMap.set(id, entity); // 存入 map

  return entity;
}
// export function removeEntities() {
//   entities.forEach(entity => {
//     viewer.entities.remove(entity)
//     entity.show = false;
//   });
//   // entities = []
// }


/**
 * 删除所有已创建的点
 */
export function clearAllPoints() {
  for (let [id, entity] of pointEntityMap.entries()) {
    viewer.entities.remove(entity);
  }
  pointEntityMap.clear();
}

export function removeEntities(id) {
  entities.forEach((entity, index) => {
  pointEntityMap.forEach((entity, index) => {
    if (entity.id === id) {
      viewer.entities.remove(entity);
    }
@@ -197,7 +199,18 @@

    if (Cesium.defined(picked) && id) {
      const entity = picked?.id;
      if (entity && entity.className) {
      const simStore = useSimStore()
      if (entity && !simStore.openDia && entity.attrs.type == '泥位计') {
        let obj = {
          deviceName: entity.attrs.deviceName,
          latitude: entity.attrs.latitude,
          longitude: entity.attrs.longitude
        }
        simStore.selectNWJ = obj
        showDeviceDetail.value = false;
        console.log(simStore.selectNWJ, 'map.js点击泥位计')
      }
      if (entity && entity.className && simStore.openDia) {
        showDeviceDetail.value = true;
        deviceDetail.value = entity.attrs;
        className.value = entity.className;