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

<template>
  <el-dialog
      title="室内定位"
      :visible.sync="centerDialogVisible"
      width="60%"
      center>
    <div style="width: 100%;height: 50vh;">
      <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 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,
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    this.markLayer && window.map.removeLayersById('markerLayer');
  },
  created() {

  },
  mounted() {
  },
  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: [60, 45],
            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);
    },
  },
};
</script>