ly-front/src/views/contentData/index.js

import route from "@/router/index";
import iconimg from "@/assets/img/dianweidingweiqizi.png";
export function allPositions(options, show, type, value) {
  options.forEach((item, index) => {
    let graphic = window.marsMap.getLayerById(item.id);
    // console.log(item,'item')
    if (!graphic) {
      //扩散效果
      graphic = new mars3d.layer.GeoJsonLayer({
        id: item.id,
        name: "zhendi",
        data: item,
        symbol: {
          type: "diffuseWall",
          merge: true,
          styleOptions: {
            color: "#0066cc", // 较深的蓝色（顶部）
            baseColor: "#002244", // 更深的蓝色（底部），增强对比
            opacity: 0.7, // 顶部略透明，突出渐变
            diffHeight: 120, // 高度适中，扩散明显
            speed: 5, // 中等速度
            outline: true,
            outlineColor: "#0066cc", // 轮廓使用较深蓝色
            outlineOpacity: 1,
            outlineWidth: 3.0 // 加粗轮廓，边界清晰
          }
        },
        show,
        popup: item.name
      });
      window.marsMap.addLayer(graphic);
    } else {
      graphic.show = show;
      graphic.setOptions({
        data: item
      });
    }
    let graphics = window.marsMap.getLayerById(item.id + 10);
    if (!graphics) {
      //区域
      graphics = new mars3d.layer.GeoJsonLayer({
        id: item.id + 10,
        name: "zhendi",
        data: item,
        symbol: {
          styleOptions: {
            fill: true,
            color: "#3388cc",
            opacity: 0.5,
            outline: true,
            outlineStyle: {
              width: 2,
              opacity: 0.1
              //   materialType: "CircleScan",
              //   materialOptions: {
              //     color: item.properties.color
              //   }
            }
          }
        },
        show,
        popup: item.name
      });
      window.marsMap.addLayer(graphics);
    } else {
      graphics.show = show;
      graphics.setOptions({
        data: item
      });
      if (type === "all") {
      } else {
        graphics.flyTo();
        console.log(value, item, "valueitem");

        let graphicLayer = window.marsMap.getLayerById("center");
        if (!graphicLayer) {
          graphicLayer = new mars3d.layer.GraphicLayer({ id: "center" });
          window.marsMap.addLayer(graphicLayer);
        } else {
          graphicLayer.clear();
        }
        let graphic = graphicLayer.getGraphicById(value.id);
        if (!graphic) {
          graphic = new mars3d.graphic.BillboardEntity({
            id: value.id,
            name: "中心点",
            position: [value.lon, value.lat, 0],
            style: {
              image: iconimg,
              scale: 1,
              width: 30,
              height: 50,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            }
          });
          graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
        }
      }
    }
    // if (item.regionModels.length !== 0) {
    //   item.regionModels.forEach((val, index) => {
    // }
  });
}
export function allDevices(options, type, show) {
  let graphicLayer = window.marsMap.getLayerById("devLog");
  if (!graphicLayer) {
    graphicLayer = new mars3d.layer.GraphicLayer({ id: "devLog" });
    window.marsMap.addLayer(graphicLayer);
  } else {
    graphicLayer.clear();
  }

  window.marsMap.on("morphStart", function (event) {
    console.log("开始变换模式", event);
  });
  if (type === "all") {
    options.forEach((item, index) => {
      if (item.devices.length !== 0) {
        item.devices.forEach((deviceItem, index) => {
          let graphic = graphicLayer.getGraphicById(deviceItem.id);
          if (!graphic) {
            graphic = new mars3d.graphic.BillboardEntity({
              id: deviceItem.id,
              name: "设备",
              position: new mars3d.LngLatPoint(
                deviceItem.lon,
                deviceItem.lat,
                0
              ),
              style: {
                image: deviceItem.isOnline
                  ? require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`)
                  : require(`@/assets/img/device/deviceIcon/${deviceItem.icon}-offline.png`),
                // visibleDepth:false,
                scale: 1.5,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                clampToGround: true,
                scaleByDistance: true,
                scaleByDistance_near: 100,
                scaleByDistance_nearValue: 0.5
              },
              attr: deviceItem,
              show
            });
            bindLayerPopup(graphicLayer, graphic);
            graphicLayer.addGraphic(graphic);
          } else {
            graphic.show = show;
            graphic.setOptions({
              style: {
                image: deviceItem.isOnline
                  ? require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`)
                  : require(`@/assets/img/device/deviceIcon/${deviceItem.icon}-offline.png`)
              }
            });
            if (deviceItem.isMove) {
              graphic.setOptions({
                position: new mars3d.LngLatPoint(
                  deviceItem.lon,
                  deviceItem.lat,
                  0
                )
              });
            }
          }
        });
      }
    });
  } else {
    options.devices.forEach((item, index) => {
      // const image = getImageSrc(item.deviceType.type);
      let graphic = graphicLayer.getGraphicById(item.id);
      if (!graphic) {
        graphic = new mars3d.graphic.BillboardEntity({
          id: item.id,
          name: "设备",
          position: new mars3d.LngLatPoint(item.lon, item.lat, 0),
          style: {
            image: item.isOnline
              ? require(`@/assets/img/device/deviceIcon/${item.icon}.png`)
              : require(`@/assets/img/device/deviceIcon/${item.icon}-offline.png`),
            // visibleDepth:false,
            scale: 1.5,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
            scaleByDistance: true,
            scaleByDistance_near: 100,
            scaleByDistance_nearValue: 0.5
          },
          attr: item,
          show
        });
        bindLayerPopup(graphicLayer, graphic);
        graphicLayer.addGraphic(graphic);
      } else {
        graphic.show = show;
        graphic.setOptions({
          style: {
            image: item.isOnline
              ? require(`@/assets/img/device/deviceIcon/${item.icon}.png`)
              : require(`@/assets/img/device/deviceIcon/${item.icon}-offline.png`)
          }
        });
        if (deviceItem.isMove) {
          graphic.setOptions({
            position: new mars3d.LngLatPoint(deviceItem.lon, deviceItem.lat, 0)
          });
        }
      }
    });
  }
}

import imgUav from "@/assets/img/uavimg.png";
//设备广告牌
function bindLayerPopup(graphicLayer, graphic) {
  let attr = graphic.attr;
  if (graphic.name === "无人机") {
    graphic.bindPopup(
      ` <div class="mians" style="height: 435px;">
          <div class="title">${attr.device_type}</div>
          <div class="imgs"><img src="${imgUav}" /></div>
          <div class="device-type" style="margin-top: 8%;">
            <div class="txt">
              <p class="p1">频段</p>
              <p class="p2">${attr.freq}</p>
            </div>
            <div class="txt">
              <p class="p1">距离</p>
              <p class="p2" id="lblDistance">${attr.distance}</p>
            </div>
            <div class="txt">
              <p class="p1">型号</p>
              <p class="p2">${attr.device_type}</p>
            </div>
            <div class="txt">
              <p class="p1">高度</p>
              <p class="p2" id="lblHeight">${attr.height}</p>
            </div>
            <div class="txt">
              <p class="p1">SN码</p>
              <p class="p2">${attr.serial_number}</p>
            </div>
            <div class="txt">
              <p class="p1">中心点</p>
              <p class="p2" id="lblCenter">${attr.centerdistance}</p>
            </div>
            <div class="txt1">
              <p class="p1">三维速度</p>
              <p class="p2" id="lblSpeed">${attr.height}</p>
            </div>
          </div>
        </div>
      `,
      {
        closeButton: false,
        hasZIndex: false,
        zIndex: 2
      }
    );
    graphic.on(mars3d.EventType.popupRender, function (event) {
      const container = event.container; // popup对应的DOM

      const params = graphic?.attr;
      if (!params) {
        return;
      }
      const lblHeight = container.querySelector("#lblHeight");
      if (lblHeight) {
        lblHeight.innerHTML = params.height + "米";
      }

      const lblDistance = container.querySelector("#lblDistance");
      if (lblDistance) {
        lblDistance.innerHTML = Math.round(params.distance) + "米";
      }
      const lblCenter = container.querySelector("#lblCenter");
      if (lblCenter) {
        lblCenter.innerHTML = Math.round(params.centerdistance) + "米";
      }

      const lblSpeed = container.querySelector("#lblSpeed");
      if (lblSpeed) {
        // const speeds = [params.speed_E, params.speed_N, params.speed_U].filter(
        //   (speed) => speed !== undefined
        // );
        // const maxSpeed = speeds.length > 0 ? Math.max(...speeds) : undefined;
        lblSpeed.innerHTML =
          "E：" +
          params.speed_E +
          " N：" +
          params.speed_N +
          " U：" +
          params.speed_E;
      }
    });
  } else if (graphic.name === "飞手") {
  } else {
    let wPath = window.document.location.href;
    let pathName = route.path;
    let pos = wPath.indexOf(pathName);
    let localhostPath = wPath.substring(0, pos);
    let uploadUrl =
      process.env.VUE_APP_API_URL === "/"
        ? localhostPath
        : process.env.VUE_APP_API_URL;
    graphic.bindPopup(
      ` <div class="mians">
          <div class="title">${attr.name}</div>
          <div class="imgs"><img src="${
            attr.img !== null
              ? uploadUrl + attr.img
              : require("@/assets/img/nopic.png")
          }" /></div>
          <div class="device-type">
            <div class="txt">
              <p class="p1">序列号</p>
              <p class="p2">${attr.deviceSN}</p>
            </div>
            <div class="txt">
              <p class="p1">状态</p>
              <p class="p2">${attr.isOnline ? "在线" : "离线"}</p>
            </div>
            <div class="txt">
              <p class="p1">位置</p>
              <p class="p2">${attr.lon}</p>
            </div>
            <div class="txt">
              <p class="p1">纬度</p>
              <p class="p2">${attr.lat}</p>
            </div>
          </div>
        </div>
      `,
      {
        closeButton: false,
        hasZIndex: false,
        zIndex: 2
      }
    );
  }
}

export function mapUavFiex(options) {
  let map = window.marsMap; // 记录map
  let graphicLayer = map.getLayerById("uavFiex");
  if (!graphicLayer) {
    // eslint-disable-next-line no-undef
    graphicLayer = new mars3d.layer.GraphicLayer({ id: "uavFiex" });
    map.addLayer(graphicLayer);
  }
  if (options.length === 0) {
    graphicLayer.remove();
  } else {
    options.forEach((item) => {
      if (item.drone_lon !== 0 || item.drone_lat !== 0) {
        let graphic = graphicLayer.getGraphicById(item.BatchId);
        // let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
        //发现无人机
        if (!graphic) {
          // eslint-disable-next-line no-undef
          graphic = new mars3d.graphic.Route({
            id: item.BatchId,
            name: "无人机",
            maxCacheCount: -1,
            polyline: {
              width: 2,
              opacity: 1,
              randomColor: true,
              show: true
            },
            // billboard: {
            //   image: require("@/assets/img/uav.svg"),
            //   scale: 0.5,
            //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            // },
            model: {
              scale: window.mapConfig.uavSize || 8,
              url: "/uav/scene.gltf",
              // 航向
              heading: 0,
              // 俯仰
              pitch: 0,
              // 滚转
              roll: 0.0,
              color: window.mapConfig.uaColor,
              show: true
            },
            attr: item
          });
          graphicLayer.addGraphic(graphic);
        }

        graphic.attr = item;
        bindLayerPopup(graphicLayer, graphic);
      }

      if (item.app_lon !== 0 || item.app_lat !== 0) {
        let app_graphic = graphicLayer.getGraphicById(item.BatchId + "_app");
        // let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
        //发现飞手
        if (!app_graphic) {
          // eslint-disable-next-line no-undef
          app_graphic = new mars3d.graphic.Route({
            id: item.BatchId + "_app",
            name: "飞手",
            maxCacheCount: -1,
            label: {
              text: "飞手位置",
              font_size: 14,
              font_family: "微软雅黑"
            },
            polyline: {
              width: 2,
              opacity: 1,
              randomColor: true,
              show: true
            },
            point: {
              color: "#00ffff",
              pixelSize: 8,
              outlineColor: "#ffffff",
              outlineWidth: 2
            },

            attr: item
          });
          graphicLayer.addGraphic(app_graphic);
        }
      }
      // 更新发现无人机设备的大小
      let graphicDevice = window.marsMap.getLayerById("devLog");
      if (graphicDevice) {
        let deviceGraphic = graphicDevice.getGraphicById(item.DeviceId);
        if (deviceGraphic !== undefined) {
          deviceGraphic.setOptions({
            style: {
              scale: 2
            }
          });
        }
      }
    });
    //绑定气泡弹窗
    graphicLayer.eachGraphic((car) => {
      // 取出对应无人机的轨迹列表
      options.map((item) => {
        if (item.BatchId === car.id) {
          if (item.drone_lon !== 0 || item.drone_lat !== 0) {
            // eslint-disable-next-line no-undef
            const point = new mars3d.LngLatPoint(
              item.drone_lon,
              item.drone_lat,
              item.height || 10
            );
            car.addDynamicPosition(point, 0);
          }
        } else if (item.BatchId + "_app" === car.id) {
          if (item.app_lon !== 0 || item.app_lat !== 0) {
            // eslint-disable-next-line no-undef
            const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0);
            car.addDynamicPosition(point, 0);
          }
        }
      });
    });
  }
}