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

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;
      }
    });
  }
}

//设备广告牌
function bindLayerPopup(graphicLayer, graphic) {
  let attr = graphic.attr;
  console.log(attr, "attr");
  graphic.bindPopup(
    ` <div class="mians">
        <div class="title">${attr.name}</div>
        <div class="imgs"><img src="${
          attr.img !== null
            ? process.env.VUE_APP_API_URL + 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
    }
  );
}