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

import route from "@/router/index";
import iconimg from "@/assets/img/dianweidingweiqizi.png";

import { geom, layer, source } from "ol";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import LineString from "ol/geom/LineString";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import CircleStyle from "ol/style/Circle";
import { fromLonLat, toLonLat } from "ol/proj";

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.icon === "9") {
              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.icon === "9") {
          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.lon}</p>
            </div>
            <div class="txt">
              <p class="p1">IP</p>
              <p class="p2">${attr.ip}</p>
            </div>
            <div class="txt">
              <p class="p1">纬度</p>
              <p class="p2">${attr.lat}</p>
            </div>
            <div class="txt">
              <p class="p1">状态</p>
              <p class="p2">${attr.isOnline ? "在线" : "离线"}</p>
            </div>
          </div>
        </div>
      `,
      {
        closeButton: false,
        hasZIndex: false,
        zIndex: 2
      }
    );
  }
}
export function mapUavFiex(options, map) {
  // 获取或创建矢量图层（对应 Mars3D 的 GraphicLayer）
  let graphicLayer = map
    .getLayers()
    .getArray()
    .find((layer) => layer.get("id") === "uavFiex");
  if (!graphicLayer) {
    graphicLayer = new VectorLayer({
      source: new VectorSource(),
      zIndex: 10
    });
    graphicLayer.set("id", "uavFiex");
    map.addLayer(graphicLayer);
  }

  let graphicLayerGJ = map
    .getLayers()
    .getArray()
    .find((layer) => layer.get("id") === "guiji");
  if (!graphicLayerGJ) {
    graphicLayerGJ = new VectorLayer({
      source: new VectorSource(),
      zIndex: 10
    });
    graphicLayerGJ.set("id", "guiji");
    map.addLayer(graphicLayerGJ);
  }

  let graphicLayerFSGJX = map
    .getLayers()
    .getArray()
    .find((layer) => layer.get("id") === "fsguiji");
  if (!graphicLayerFSGJX) {
    graphicLayerFSGJX = new VectorLayer({
      source: new VectorSource(),
      zIndex: 10
    });
    graphicLayerFSGJX.set("id", "fsguiji");
    map.addLayer(graphicLayerFSGJX);
  }

  if (options.length === 0) {
    graphicLayer.getSource().clear();
  } else {
    // 处理每个无人机和飞手
    options.forEach((item) => {
      // 处理无人机
      if (item.drone_lon !== 0 || item.drone_lat !== 0) {
        let graphic = graphicLayer.getSource().getFeatureById(item.BatchId);
        if (!graphic) {
          // 创建无人机 Feature
          graphic = new Feature({
            geometry: new Point(fromLonLat([item.drone_lon, item.drone_lat])),
            name: "无人机"
          });
          graphic.setId(item.BatchId);
          let imgUav = require("@/assets/img/icon_uav.png");
          // 无人机样式（用图标替代 GLTF 模型）
          graphic.setStyle(
            new Style({
              image: new Icon({
                src: imgUav, // 使用导入的图标
                scale: 1, // 合理缩放
                color: window.mapConfig?.uaColor || "#ff0000"
              })
            })
          );
          // 创建轨迹 Feature
          let track = new Feature({
            geometry: new LineString([
              fromLonLat([item.drone_lon, item.drone_lat])
            ]),
            name: "无人机轨迹"
          });
          track.setId(item.BatchId + "_track");

          graphicLayer.getSource().addFeature(graphic);
          graphicLayerGJ.getSource().addFeature(track);
          // graphicLayerGJ.setStyle(null);
        }

        // 更新无人机属性和位置
        graphic.set("attr", item);
        if (graphic.id_ === item.BatchId) {
          const point = fromLonLat([item.drone_lon, item.drone_lat]);
          graphic.getGeometry().setCoordinates(point);

          // 更新轨迹
          const track = graphicLayerGJ
            .getSource()
            .getFeatureById(item.BatchId + "_track");
          track.getGeometry().appendCoordinate(point);
          // graphicLayerGJ.setStyle(null);
        }

        // 绑定弹窗
        // bindPopup(graphicLayer, graphic, map);
      }

      // 处理飞手
      if (item.app_lon !== 0 || item.app_lat !== 0) {
        let appGraphic = graphicLayer
          .getSource()
          .getFeatureById(item.BatchId + "_app");
        if (!appGraphic) {
          // 创建飞手 Feature
          appGraphic = new Feature({
            geometry: new Point(fromLonLat([item.app_lon, item.app_lat])),
            name: "飞手",
            attr: item
          });
          appGraphic.setId(item.BatchId + "_app");

          let imgUavfs = require("@/assets/img/icon_user.png");
          // 飞手样式
          appGraphic.setStyle(
            new Style({
              image: new Icon({
                src: imgUavfs, // 飞手图标
                scale: 1, // 合理缩放
                color: window.mapConfig?.uaColor || "#ff0000"
              }),
              text: new Text({
                text: "飞手位置",
                font: "14px 微软雅黑",
                offsetY: -15,
                fill: new Fill({ color: "#000000" }),
                stroke: new Stroke({ color: "#ffffff", width: 2 })
              })
            })
          );

          // 创建飞手轨迹 Feature
          const appTrack = new Feature({
            geometry: new LineString([
              fromLonLat([item.app_lon, item.app_lat])
            ]),
            name: "飞手轨迹"
          });
          appTrack.setId(item.BatchId + "_app_track");

          graphicLayer.getSource().addFeature(appGraphic);
          graphicLayerFSGJX.getSource().addFeature(appTrack);
        }

        // 更新飞手位置
        const pointFS = fromLonLat([item.app_lon, item.app_lat]);
        appGraphic.getGeometry().setCoordinates(pointFS);

        // 更新飞手轨迹
        const point = fromLonLat([item.drone_lon, item.drone_lat]);
        const appTrack = graphicLayerFSGJX
          .getSource()
          .getFeatureById(item.BatchId + "_app_track");
        // const appTrackGeom = appTrack.getGeometry();
        // appTrackGeom.appendCoordinate(point);
        appTrack.getGeometry().setCoordinates([
          fromLonLat([item.app_lon, item.app_lat]), // 飞手位置
          fromLonLat([item.drone_lon, item.drone_lat]) // 无人机位置
        ]);
        graphicLayerFSGJX.setStyle(null);
        // 绑定弹窗
        // bindPopup(graphicLayer, appGraphic, map);
      }
    });
  }
}