traffic-eff-backend/ruoyi-ui/src/views/bd/roomlocation/roommap/index.vue

<template>
  <el-dialog
      title="室内定位融合"
      :visible.sync="centerDialogVisible"
      width="70vw"
      center>
    <div style="width: 100%;height: 70vh;">
      <bd-map :loaded="loaded" map-id="room-map" />
      <socket-message
          v-if="centerDialogVisible"
          :key="`device_uwb001`" :onMessage="onMessage"
          :ws="`/ws/point/uwb001`"></socket-message>
    </div>

  </el-dialog>
</template>

<script>

import { pushDevcLocation } from '@/api/bd/fenceInfo';
import SocketMessage from '@/components/WebsocketMessage/index.vue';
import BdMap from '@/views/bd/map/index.vue';
import maphandle from '@/views/bd/map/maphandle';
import position from '@/views/bd/realtimeLocation/icon/position.png';
import dayjs from 'dayjs';

export default {
  name: 'room-map',
  mixins: [maphandle],
  components: {
    BdMap,
    SocketMessage,
  },
  data() {
    return {
      centerDialogVisible: false,
      locationMarkers: {},
      mapIns: null,
      playInterval: null,
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    this.markLayer && window.map.removeLayersById('markerLayer');
    this.playInterval && clearInterval(this.playInterval);
  },
  created() {

  },
  mounted() {
    this.play();
  },
  methods: {
    dayjs,
    loaded(map) {
      const vtLayer = new BDLayers.Lib.Layer.CBTileLayer('blayer_ng_s', {
        url: 'http://bd.xt.wenhq.top:8083/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=bdlayers:bdl_cyy_pingmian&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&Format=image/jpeg&TILECOL={x}&TILEROW={y}',
        maxZoom: 22,
        minZoom: 15,
      });
      map.addCustomLayers(vtLayer);
      this.markLayer = new BDLayers.Lib.Layer.CBVectorLayer('markerLayer', true);
      map.addCustomLayers(this.markLayer);
      this.mapIns = map;
      map.setPitch(0);
      map.setZoom(22);
      map.setCenter([118.869046506393, 32.0133281708171]);
    },
    show() {
      this.centerDialogVisible = true;
    },
    addMarker(data) {
      const {
        latitude,
        longitude,
        deviceId,
      } = data;
      const marker = new BDLayers.Lib.Overlays.MarkerImg(
          `marker${deviceId}`,
          [longitude, latitude],
          {
            imgurl: position,
            iconSize: [25, 30],
            symbol: {
              'textName': 'm4',
              'textSize': 14,
              'markerFile': position,
              'markerHorizontalAlignment': 'middle', // left, middle(默认), right
              'markerVerticalAlignment': 'middle', // top, middle, bottom(默认)
            },
          },
      );
      this.markLayer.addMarker(marker);
      return marker;
    },
    onMessage(a) {
      const data = JSON.parse(a.data);
      const {
        latitude,
        longitude,
        deviceId,
      } = data;
      console.log('>>>>>>>>>>>>>>>>>>>>>>>>', data);
      if (!this.locationMarkers[deviceId]) {
        this.locationMarkers[deviceId] = this.addMarker(data);
        return;
      }
      this.locationMarkers[deviceId].moveMarker([longitude, latitude], 2000, false);
    },
    play() {
      const gps = [
        [118.869125003231, 32.0132579193923],
        [118.869114609672, 32.0132582036815],
        [118.869115950776, 32.013238303438],
        [118.869116286052, 32.0132195403474],
        [118.869116286052, 32.0132144231402],
        [118.869113939119, 32.0132064630396],
        [118.869105557216, 32.0132021986996],
        [118.869093822552, 32.0132021986996],
        [118.869086111201, 32.0132021986996],
        [118.869077394021, 32.0132021986996],
        [118.869073370708, 32.0132021986996],
        [118.869070688499, 32.0132044730143],
        [118.869070353223, 32.013218118901],
        [118.869070353223, 32.0132323333641],
        [118.869071359051, 32.0132479692711],
        [118.869069012118, 32.0132536550547],
        [118.869064988805, 32.0132579193923],
        [118.869048224998, 32.0132570665248],
        [118.869028778983, 32.0132570665248],
        [118.869008327139, 32.0132525178981],
        [118.868998939408, 32.0132579193923],
        [118.868995586647, 32.0132604779947],
        [118.868992233885, 32.0132604779947],
        [118.868991228057, 32.0132621837296],
        [118.868982510878, 32.0132601937055],
        [118.868976140631, 32.0132601937055],
        [118.868968764556, 32.0132607622839],
        [118.868963735414, 32.0132607622839],
        [118.868965411795, 32.0132525178981],
        [118.868965747071, 32.0132394405949],
        [118.868965747071, 32.0132334705211],
        [118.868966082347, 32.0132127174044],
        [118.868965747071, 32.0132036201463],
        [118.868976811183, 32.0132002086742],
        [118.868985193087, 32.0132056101716],
        [118.868987204743, 32.0132175503224],
        [118.86898485781, 32.0132354605458],
        [118.868985528363, 32.0132402934625],
        [118.868999274684, 32.0132445578007],
        [118.869013021005, 32.0132439892223],
        [118.869029784811, 32.0132454106683],
        [118.869033472849, 32.0132431363547],
        [118.869036155058, 32.0132391563057],
        [118.869036155058, 32.0132320490749],
        [118.869037160886, 32.0132215303724],
        [118.869035484506, 32.0132067473289],
        [118.869035484506, 32.0132002086742],
        [118.86902039708, 32.0131987872275],
        [118.869002962721, 32.0131993558062],
        [118.868989551676, 32.0131993558062],
        [118.868975805355, 32.0131982186489],
        [118.86896239431, 32.0131976500702],
        [118.868952336026, 32.0131976500702],
        [118.868940266086, 32.0131996400956],
        [118.868936913324, 32.0131996400956],
        [118.868934231115, 32.0131996400956],
        [118.868921155346, 32.0131999243849],
        [118.868917132033, 32.0132010615423],
        [118.868910091234, 32.013200777253],
        [118.868910091234, 32.0132138545616],
        [118.868909085406, 32.0132272161577],
        [118.868909755958, 32.0132391563057],
        [118.868910091234, 32.0132488221386],
        [118.868910761786, 32.013257350814],
        [118.868909755958, 32.0132636051754],
        [118.868942277742, 32.0132627523079],
        [118.868973123146, 32.0132644580428],
        [118.869001621617, 32.0132638894645],
        [118.869058618558, 32.0132636051754],
        [118.869081082059, 32.0132624680188],
        [118.869094157828, 32.0132624680188],
        [118.869112933291, 32.0132624680188],
        [118.869124332679, 32.0132604779947],
        [118.869125003231, 32.0132579193923],
      ];
      let i = 0;
      this.playInterval && clearInterval(this.playInterval);
      this.playInterval = setInterval(() => {
        pushDevcLocation({
          devcKey: 'uwb001',
          lat: gps[i][1],
          lng: gps[i][0],
        });
        if (i === gps.length - 1) {
          i = 0;
          return;
        }
        i++;
      }, 2000);

    },
  },
};
</script>