ly-front/src/components/myMars.vue

<template>
  <div class="ditu">
    <div class="main">
      <div
        id="marsContainer-mymap"
        ref="marsMaps1"
        class="mars3d-container"
      ></div>
    </div>
  </div>
</template>

<script>
"use script";
export default {
  name: "myMars",
  props: {
    historyList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      inputs: "",
      checkInterval: null,
      time: null
    };
  },
  components: {},
  watch: {
    historyList: {
      handler(val) {
        let value = JSON.parse(JSON.stringify(val));
        if (value) {
          this.startCheckTimer(value);
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getMapJson();
  },
  methods: {
    getMapJson() {
      // eslint-disable-next-line no-undef
      mars3d.Util.fetchJson({
        url: "/configJson/mapMars.json"
      }).then((res) => {
        this.initMarsMap({
          // 合并配置项
          ...res.map3d
        });
      });
    },
    initMarsMap(options) {
      // eslint-disable-next-line no-undef
      this.mapMars = new mars3d.Map(this.$refs.marsMaps1, options);
      this.mapMars.unbindContextMenu(); //map上解绑默认菜单
      const layerId = `marsContainer-warningMap`;
      this.graphicLayer = this.mapMars.getLayerById(layerId);
      if (!this.graphicLayer) {
        // eslint-disable-next-line no-undef
        this.graphicLayer = new mars3d.layer.GraphicLayer({ id: layerId });
        this.mapMars.addLayer(this.graphicLayer);
      }
      // eslint-disable-next-line no-undef
      this.clockAnimate = new mars3d.control.ClockAnimate({});
      this.mapMars.addControl(this.clockAnimate);

      // map构造完成后的一些处理
      this.onMapLoad();
      // map.on(mars3d.EventType.dblClick, map_dblClickHandler, graphicLayer);
      // map.on(mars3d.EventType.click, map_clickHandler, graphicLayer)
    },
    onMapLoad() {
      // 设置鼠标操作习惯,更换中键和右键
      this.mapMars.changeMouseModel(true);
      // eslint-disable-next-line no-undef
      this.mapMars.scene.mode = Cesium.SceneMode.SCENE3D;
      // 时间轴
      // const timeline = new mars3d.control.Timeline();
      // this.mapMars.addControl(timeline);
    },
    // 计时器
    startCheckTimer(value) {
      if (this.checkInterval) {
        clearInterval(this.checkInterval);
      }

      this.checkInterval = setInterval(() => {
        if (this.mapMars !== undefined) {
          clearInterval(this.checkInterval);
          this.onProcessTraceability(value);
        }
      }, 100);
    },
    onProcessTraceability(mapList) {
      // eslint-disable-next-line no-undef
      const property = new Cesium.SampledPositionProperty();
      // eslint-disable-next-line no-undef
      property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD;

      const app_property = new Cesium.SampledPositionProperty();
      // eslint-disable-next-line no-undef
      app_property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD;

      let start;
      let stop;
      for (let i = 0, len = mapList.length; i < len; i++) {
        const item = mapList[i];
        const lng = Number(item.lon); // 经度
        const lat = Number(item.lat); // 纬度
        const app_lng = Number(item.app_lon); // 经度
        const app_lat = Number(item.app_lat); // 纬度
        const height = item.alt || 5; // 高度5 是避免与geojson高度冲突
        const outputDate = item.createTime.replace(" ", "T");

        const time = outputDate; // 时间
        let position = null;
        let app_position = null;
        if (lng !== 0 && lat !== 0) {
          if (lng && lat) {
            // eslint-disable-next-line no-undef
            position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
            app_position = Cesium.Cartesian3.fromDegrees(app_lng, app_lat, 0);
          }
          let juliaDate = null;
          if (time) {
            // eslint-disable-next-line no-undef
            juliaDate = Cesium.JulianDate.fromIso8601(time);
          }
          if (position && juliaDate) {
            property.addSample(juliaDate, position);
          }
          if (app_position && juliaDate) {
            app_property.addSample(juliaDate, app_position);
          }

          if (i === 0) {
            start = juliaDate;
          } else if (i === len - 1) {
            stop = juliaDate;
          }
        } else {
          console.log("经纬度为0，忽略该数据");
        }
      }
      // 设置时钟属性
      if (stop === undefined) {
        stop = start;
      }
      this.mapMars.clock.startTime = start.clone();
      this.mapMars.clock.stopTime = stop.clone();
      this.mapMars.clock.currentTime = start.clone();
      // eslint-disable-next-line no-undef
      this.mapMars.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
      this.mapMars.clock.multiplier = 1;
      if (this.mapMars.controls.timeline) {
        this.mapMars.controls.timeline.zoomTo(start, stop);
      }

      //根据当前时间改变左侧绿灯颜色
      // this.mapMars.on("clockTick", function (clock) {
      //   // const time = Cesium.JulianDate.toIso8601(clock.currentTime)
      //   // let times = moment(time).format('HH:mm:ss')
      //   console.log(clock);
      // });
      this.clearDraw();
      // 创建无人机对象
      let pathEntity = this.graphicLayer.getGraphicById("pathIdsss");
      if (!pathEntity) {
        pathEntity = new mars3d.graphic.ModelEntity({
          id: "pathIdsss",
          position: property,
          orientation: new Cesium.VelocityOrientationProperty(property),
          billboard: {
            image: require("@/assets/img/uav.svg"),
            scale: 0.5,
            minimumPixelSize: 30,
            distanceDisplayCondition_far: 1000000,
            distanceDisplayCondition_near: 1000
          },
          path: {
            width: 2,
            color: "#FF0000"
          },
          flyTo: true,
          flyToOptions: {
            duration: 2,
            minHeight: 5000,
            maxHeight: 8000
          }
        });
        this.graphicLayer.addGraphic(pathEntity);
      }
      // 飞手位置
      let app_pathEntity = this.graphicLayer.getGraphicById(
        "pathIdsss" + "_app"
      );
      if (!app_pathEntity) {
        app_pathEntity = new mars3d.graphic.ModelEntity({
          id: "pathIdsss" + "_app",
          position: app_property,
          orientation: new Cesium.VelocityOrientationProperty(app_property),
          point: {
            color: "#00ffff",
            pixelSize: 8,
            outlineColor: "#ffffff",
            outlineWidth: 2
          },
          path: {
            width: 2,
            color: "#FF0000"
          },
          style: {
            label: {
              text: "飞手位置",
              font_size: 14,
              font_family: "微软雅黑"
            }
          }
        });
        this.graphicLayer.addGraphic(app_pathEntity);
      }
    },
    clearDraw() {
      if (this.graphics) {
        this.mapMars.removeLayer(this.graphics);
      }
      if (this.graphicLayer) {
        this.graphicLayer.clear();
      }
    },
    clearInterval() {
      clearInterval(this.time);
    }
  },
  beforeDestroy() {
    if (this.mapMars) {
      this.mapMars.destroy();
      this.mapMars = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.ditu {
  width: 100%;
  height: 100%;
  position: relative;

  .main {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: flex-start;
    #marsContainer-mymap {
      width: 100%;
      height: 50vh;
      // margin-left: 8%;
    }
    //历史轨迹气泡
    #trajectoryPopup {
      padding: 10px 10px 0px 10px;
      .popTitle {
        margin-bottom: 5px;
      }
      .mars3d-popup-background {
        background: rgba(13, 40, 64, 0.9);
      }
      .popLonLat {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      #copyBtn {
        width: max-content;
        border: 0.5px solid #fff;
        border-radius: 2px;
        padding: 3px 9px;
        color: #fff;
        background: linear-gradient(
          90deg,
          rgba(77, 154, 247, 1) 0%,
          rgba(8, 98, 205, 1) 100%
        );
        cursor: pointer;
        font-size: 12px;
        font-weight: 500;
        margin-right: 5px;
      }
    }
    #marsContainer-map {
      width: 35vh;
      height: 35vh;
      margin-left: 8%;
      .mars3d-divlayer {
        .mars3d-divGraphic {
          .lbPopup {
            .mars3d-popup-background {
              background: rgba(13, 40, 64, 0.9);
            }
            .mars3d-popup-content-wrapper {
              width: 300px;
              .mars3d-popup-content {
                .popLonLat {
                  display: flex;
                  align-items: center;
                  justify-content: space-around;
                  .popTitle {
                    font-size: 12px;
                  }
                  #copyBtn {
                    border: 0.5px solid #fff;
                    border-radius: 2px;
                    padding: 3px 9px;
                    color: #fff;
                    background: linear-gradient(
                      90deg,
                      rgba(77, 154, 247, 1) 0%,
                      rgba(8, 98, 205, 1) 100%
                    );
                    cursor: pointer;
                    font-size: 12px;
                    font-weight: 500;
                    margin-right: 5px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>