xjsaas-ui/src/views/big-screen/overview-components/components/inspection-follow.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-15 13:14:03
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-03 14:32:34
 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
 * @Description: 总览大屏-巡检车辆-跟车弹窗
-->

<template>
  <div class="inspection-content">
    <fssm-map ref="carMap" :baseMap="'img_c'"></fssm-map>
  </div>
</template>

<script>
// websocket
import logo from "@/assets/xc.png";
import FssmMap from "@/components/map/fssm-map.vue";
import { Point } from "ol/geom";
import { Feature } from "ol";
import { Style, Icon } from "ol/style";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";

export default {
  name: "InspectionFollow",
  components: {
    FssmMap,
  },
  data() {
    return {
      // 小车图层数据源
      carLayerSource: null,
      // 病害图层数据源
      defectLayerSource: null,
    };
  },
  created() {
    this.handleMessage();
  },
  methods: {
    /**
     * @description: 处理websocket消息
     * @return {*}
     */
    handleMessage() {
      this.$ws.on("message", (item) => {
        if (item.type === "carPosition") {
          if (!this.carMapPointSource) {
            this.drawCarMapPoint(item.data);
          } else {
            // 获取当前位置和目标位置
            const currentLocation = this.carMapPointSource
              .getFeatures()[0]
              .getGeometry()
              .getCoordinates();
            const targetLocation = item.data.location;
            // 计算两点之间的差值
            const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
            const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;

            // 设置计数器
            let count = 0;
            // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
            const timer = setInterval(() => {
              count++;
              if (count >= 100) {
                clearInterval(timer);
                return;
              }

              // 计算当前帧的位置
              const x = currentLocation[0] * 1 + dx * count;
              const y = currentLocation[1] * 1 + dy * count;
              // 更新小车位置
              const [features] = this.carMapPointSource.getFeatures();
              features.setGeometry(new Point([x, y]));
              features.setStyle([
                new Style({
                  image: new Icon({
                    crossOrigin: "anonymous",
                    src: logo,
                    // 图标缩放比例
                    scale: 0.03,
                    // 将角度转换为弧度,并除以180*π
                    rotation: (item.data.direction - 90) * (Math.PI / 180),
                  }),
                }),
              ]);
            }, 10);
          }
        } else if (item.type === "defect") {
          if (!this.defectLayerSource) {
            this.drawDefectMapPoint(item.data);
          } else {
            const feature = new Feature({
              geometry: new Point(item.geometry.coordinates),
              data: item,
              type: "defectPoint",
            });
            this.defectLayerSource.addFeature(feature);
          }
        }
      });
    },

    /**
     * @description: 绘制小车地图点位
     * @param {object} item
     * @return {void}
     */
    drawCarMapPoint(item) {
      const features = [];
      const feature = new Feature({
        geometry: new Point(item.location),
        data: item,
        type: "carPoint",
      });
      // 可以给点位设置样式
      feature.setStyle([
        new Style({
          image: new Icon({
            crossOrigin: "anonymous",
            src: logo,
            // 图标缩放比例
            scale: 0.03,
            // 将角度转换为弧度,并除以180*π
            rotation: item.direction * (Math.PI / 180),
          }),
        }),
      ]);
      features.push(feature);
      this.carMapPointSource = new VectorSource({
        features,
      });
      const carMapPointLayer = new VectorLayer({
        source: this.carMapPointSource,
        properties: {
          type: "carPoint",
        },
      });
      this.$nextTick(() => {
        const map = this.$refs.carMap.instance.get("map");
        map.addLayer(carMapPointLayer);
      });
    },

    /**
     * @description: 绘制病害地图点位
     * @param {object} item
     * @return {void}
     */
    drawDefectMapPoint(item) {
      const features = [];
      const feature = new Feature({
        geometry: new Point(item.geometry.coordinates),
        data: item,
        type: "defectPoint",
      });
      // 可以给点位设置样式
      feature.setStyle([
        new Style({
          image: new Icon({
            crossOrigin: "anonymous",
            src: require(`@/assets/screen/index/${item.defecttype}.png`),
            // 图标缩放比例
            scale: 0.5,
          }),
        }),
      ]);
      features.push(feature);
      this.defectLayerSource = new VectorSource({
        features,
      });
      const carMapPointLayer = new VectorLayer({
        source: this.defectLayerSource,
        properties: {
          type: "defectPoint",
        },
      });
      this.$nextTick(() => {
        const map = this.$refs.carMap.instance.get("map");
        map.addLayer(carMapPointLayer);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.inspection-content {
  width: 100%;
  height: 45rem;

  ::v-deep .baseLayerClass {
    filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
      brightness(80%) saturate(550%);
  }
}
</style>