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

import route from "@/router/index";
export function allPositions(options, show) {
  options.forEach((item, index) => {
    let graphic = window.marsMap.getLayerById(
      item.geometry.coordinates[0][0][0]
    );
    // console.log(item,'item')
    if (!graphic) {
      //扩散效果
      graphic = new mars3d.layer.GeoJsonLayer({
        id: item.geometry.coordinates[0][0][0],
        name: "zhendi",
        data: item,
        symbol: {
          type: "diffuseWall",
          merge: true,
          styleOptions: {
            color: "#3388cc",
            opacity: 1,
            outline: true,
            outlineColor: "#3388cc",
            outlineOpacity: 1,
            outlineWidth: 2.0,
            diffHeight: 70, // 高度
            speed: 5 // 速度
          }
        },
        show,
        popup: item.name,
        flyTo: true
      });
      window.marsMap.addLayer(graphic);
    } else {
      graphic.show = show;
    }
    let graphics = window.marsMap.getLayerById(
      item.geometry.coordinates[0][0][0] + 10
    );
    if (!graphics) {
      //区域
      graphics = new mars3d.layer.GeoJsonLayer({
        id: item.geometry.coordinates[0][0][0] + 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.flyTo();
    }
    // 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();
  }
  if (type === "all") {
    options.forEach((item, index) => {
      console.log(item, "item");
      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: require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`),
                // visibleDepth:false,
                scale: 1,
                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;
          }
        });
      }
    });
  } else {
    options.devices.forEach((item, index) => {
      console.log(options, "item");
      // 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: require(`@/assets/img/device/deviceIcon/${item.icon}.png`),
            // visibleDepth:false,
            scale: 1,
            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;
      }
    });
  }
}

import imgUav from "@/assets/img/uavimg.png";
//设备广告牌
function bindLayerPopup(graphicLayer, graphic) {
  let attr = graphic.attr;
  console.log(attr, graphic, "attr");
  if (graphic.name === "无人机") {
    graphic.bindPopup(
      ` <div class="mians" style="height: 410px;">
          <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="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 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 = maxSpeed + "m/s";
      }
    });
  } 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.state ? "在线" : "离线"}</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) => {
      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
          },

          attr: item
        });
        graphicLayer.addGraphic(graphic);
      }

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

      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);
      }
      // 起始点位
      // if (item.lon !== 0 && item.lat !== 0) {
      //   if (!startPoint) {
      //     // eslint-disable-next-line no-undef
      //     startPoint = new mars3d.graphic.BillboardEntity({
      //       id: item.BatchId + "start",
      //       // eslint-disable-next-line no-undef
      //       position: new mars3d.LngLatPoint(item.lon, item.lat, item.alt),
      //       style: {
      //         image: require("@/assets/img/uav.svg"),
      //         scale: 1,
      //         // eslint-disable-next-line no-undef
      //         horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      //         // eslint-disable-next-line no-undef
      //         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      //         label: {
      //           text: "起始点",
      //           font: "14px Arial",
      //           color: "#ffffff",
      //           outline: true,
      //           outlineColor: "#000000",
      //           outlineWidth: 2,
      //           // eslint-disable-next-line no-undef
      //           horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      //           // eslint-disable-next-line no-undef
      //           verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      //         }
      //       },
      //       show: false,
      //       attr: item
      //     });
      //     graphicLayer.addGraphic(startPoint);
      //   }
      // }
      let graphicDevice = window.marsMap.getLayerById("devLog");
      if (graphicDevice) {
        let deviceGraphic = graphicDevice.getGraphicById(item.DeviceId);
        console.log(deviceGraphic, "deviceGraphic");
        deviceGraphic.setOptions({
          style: {
            scale: 1.5
          }
        });
      }
    });
    //绑定气泡弹窗
    graphicLayer.eachGraphic((car) => {
      // 取出对应无人机的轨迹列表
      options.map((item) => {
        if (item.BatchId === car.id) {
          // eslint-disable-next-line no-undef
          const point = new mars3d.LngLatPoint(
            item.drone_lon,
            item.drone_lat,
            item.height
          );
          car.addDynamicPosition(point, 0);
        } else if (item.BatchId + "_app" === car.id) {
          console.log(item.app_lon, item.app_lat, "item");
          // eslint-disable-next-line no-undef
          const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0);
          car.addDynamicPosition(point, 0);
        }
      });
    });
  }
}