park-application-fe/src/views/park/inspectTaskTrail/trail-dialog.vue

<template>
  <el-dialog
    title="巡检任务轨迹"
    :visible.sync="centerDialogVisible"
    width="70vw"
    @closed="onDialogClose"
  >
    <div v-if="!destroyed" class="trail-dialog-content" style="width: 100%;height: 70vh;">
      <bd-map :loaded="loaded" map-id="room-map"/>
      <div class="map-ctrl">
        <el-button type="primary" @click="trailPlay">轨迹播放</el-button>
        <el-button type="primary" @click="showTrailTime">轨迹时间</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>

import BdMap from '@/components/map/index.vue';
import maphandle from '@/components/map/maphandle';
import position from '@/views/bd/realtimeLocation/icon/position.png';
import dayjs from 'dayjs';
// import {uuid} from "@/utils";

export default {
  name: 'trail-dialog',
  mixins: [maphandle],
  components: {
    BdMap
  },
  data() {
    return {
      centerDialogVisible: false,
      locationMarkers: {},
      mapIns: null,
      fencePolyLayer: null,
      trail: {},
      destroyed: false,
      playLine: null
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    this.markLayer && this.mapIns.removeLayersById('markerLayer');
    this.fencePolyLayer && this.fencePolyLayer.cust.clearLayer()
  },
  created() {

  },
  mounted() {
  },
  methods: {
    dayjs,
    onDialogClose() {
      this.markLayer = null;
      this.destroyed = true;
    },
    loaded(map) {
      this.markLayer = new BDLayers.Lib.Layer.CBVectorLayer('markerLayer', true);
      map.addCustomLayers(this.markLayer, 99);
      this.mapIns = map;
      map.setPitch(0);
      map.setCenter([118.86895, 32.01326]);
      this.fencePolyLayer = this.createLayer(map);
      this.addTrail()
    },
    show(data) {
      this.trail = data;
      this.destroyed = false;
      this.centerDialogVisible = true;
    },
    addTrail(data) {
      const coordinates = [
        [118.868474555524, 32.013913750075],
        [118.868459917135, 32.0138560330253],
        [118.868460650064, 32.0137600494265],
        [118.868469791963, 32.0135491295906],
        [118.868450597046, 32.0135969285238],
        [118.868451821878, 32.0134372342673],
        [118.868369085172, 32.0134271059761],
        [118.868229813542, 32.0134261784667],
        [118.868037844538, 32.0134249000077],
        [118.867988911263, 32.013424574126],
        [118.867990212059, 32.0132809893746],
        [118.867986825628, 32.0132395072755],
        [118.867987028075, 32.0132171885197],
        [118.867987432888, 32.0131725599655],
        [118.867984539806, 32.0130769425047],
        [118.867977454441, 32.0130291167663],
        [118.86797791828, 32.0129781711549],
        [118.867978150146, 32.0129527041872],
        [118.867974855578, 32.0129017568948],
        [118.868046176274, 32.0129117791912],
        [118.868121507934, 32.0128931867922],
        [118.868117943319, 32.0128708893801],
        [118.868126616248, 32.012737367597],
        [118.868127634971, 32.0126197858525],
        [118.868127662494, 32.0126166091195],
        [118.868165320753, 32.0126041528561],
        [118.868173101262, 32.0125724412675],
        [118.868240681514, 32.0125728913369],
        [118.868308235972, 32.0125765173023],
        [118.868334874981, 32.0125322352762],
        [118.868324305199, 32.012446455205],
        [118.868361835438, 32.0124467051483],
        [118.868364679658, 32.0125610134717],
        [118.868492254263, 32.0125713907483],
        [118.868541014618, 32.0125780675563],
        [118.868732580782, 32.012566639437],
        [118.868841456955, 32.0125673645282],
        [118.868976574771, 32.0125746162152],
        [118.869070453844, 32.0125720654824],
        [118.869096734551, 32.0125722405062],
        [118.869156822422, 32.0125694647922],
        [118.869179313588, 32.0125759664106],
        [118.869201684821, 32.0126047016424],
        [118.869186178487, 32.0126935647542],
        [118.869193065594, 32.0128080658432],
        [118.869192510216, 32.0129098661745],
        [118.86919198924, 32.0130053604978],
        [118.869179854563, 32.0131613771548],
        [118.869190250492, 32.0133240705021],
        [118.869185964264, 32.0134197772962],
        [118.86917071489, 32.0134547924615],
        [118.869159014503, 32.0135281642937],
        [118.869166174307, 32.0135953030259],
        [118.869165521059, 32.0137135723353],
        [118.869187426642, 32.0138416759025],
        [118.869153188005, 32.0138990608231],
        [118.868990969654, 32.0139203908971],
        [118.868768561862, 32.0139189097324],
        [118.868572541435, 32.0139176042992],
        [118.868557462941, 32.0139175038812],
      ];
      // 19FB03
      this.playLine = bdmap.comp.Trajectory.loadTrajectory({
        mapView: this.mapIns,
        latlons: coordinates,
        unitTime: 500,
        speedValue: 1,
        mapToCenter: false,
      });
      bdmap.comp.Trajectory.trajectoryPlay(this.playLine);
    },
    showTrailTime(data) {
      let location = [
        {
          lnglat: [118.868240681514, 32.0125728913369],
          date: '2024-12-11 06:10:00',
        },
        {
          lnglat: [118.869096734551, 32.0125722405062],
          date: '2024-12-11 06:13:00',
        },
        {
          lnglat: [118.869179854563, 32.0131613771548],
          date: '2024-12-11 06:15:30',
        },
        {
          lnglat: [118.868768561862, 32.0139189097324],
          date: '2024-12-11 06:25:33',
        }
      ]
      this.markLayer && this.markLayer.removeAll();
      location.forEach((item, i) => {
          const {
            lnglat,
            date,
          } = item;
          this.markLayer.addMarker(new BDLayers.Lib.Overlays.MarkerImg(
            `marker${date + i}`,
            lnglat,
            {
              imgurl: position,
              iconSize: [25, 30],
              labelText: `${date}`,
              labelTextColor: '#fff',
              labelTextSize: 10,
            },
          ));
        }
      );
    },
    trailPlay() {
      bdmap.comp.Trajectory.trajectoryCancel(this.playLine);
      bdmap.comp.Trajectory.trajectoryPlay(this.playLine);
    },
  },
};
</script>
<style scoped lang="scss">
.trail-dialog-content {
  display: flex;
  justify-content: center;
  align-items: center;

  .map-ctrl {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 20px;

    .el-button {
      margin-left: 0;
      margin-top: 10px;
    }
  }
}
</style>