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

<template>
  <pannel class="rooms-container">
    <template v-slot:title>
      室内定位
    </template>
    <template v-slot:action>

    </template>
    <template v-slot:content>
      <div class="location-list">
        <template v-for="room in roomList">
          <div :key="`room_${room.id}`" class="list-item">
          <span class="over-flow-hidden" style="width: 80%">
            {{ room.room }}
          </span>
            <span class="over-flow-hidden" style="width: 20%">
          </span>
          </div>
        </template>
        <socket-message :onMessage="onMessage" :ws="ws"></socket-message>
      </div>
    </template>
  </pannel>
</template>

<script>

import SocketMessage from '@/components/WebsocketMessage/index.vue';
import { uuid } from '@/utils';
import maphandle from '@/views/bd/map/maphandle';
import Pannel from '@/views/bd/pannel/index.vue';
import dayjs from 'dayjs';
import room_location from './icon/room_location.jpg';

export default {
  name: 'room-location',
  mixins: [maphandle],
  components: {
    SocketMessage,
    Pannel,
  },
  data() {
    return {
      roomList: [],
      fp: null,
      ws: null,
      markLayer: null,
      markLayerId: '',
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    this.markLayer && window.map.removeLayersById(this.markLayerId);
  },
  created() {
    if (this.markLayer) {
      return;
    }
    this.markLayerId = `real_time_markerLayer${uuid()}`;
    this.markLayer = new BDLayers.Lib.Layer.CBVectorLayer(this.markLayerId, {
      enableAltitude: true,
    });
    window.map.addCustomLayers(this.markLayer, 5);
  },
  mounted() {
    this.getRoom();
  },
  methods: {
    dayjs,
    getRoom() {
      this.roomList = [
        {
          id: 1,
          room: '创研院C4',
          poly: 'POLYGON((118.869042069359 32.0131156239015, 118.86839482667 32.0131180416999, 118.868399686907 32.0133391503578, 118.869046506393 32.0133281708171, 118.869042069359 32.0131156239015))',
          altitude: 11.4,
        },
      ];
      // this.roomList.forEach(item => {
      //   const {
      //     id,
      //     room,
      //     poly,
      //     altitude,
      //   } = item;
      //   const polygon = this.drawPoly({
      //     name: room,
      //     altitude,
      //     coordinates: this.polygonToCoordinates(poly),
      //     bizAttr: {
      //       id,
      //       name: room,
      //     },
      //   });
      // });
      // var marker = new BDLayers.Lib.Overlays.UIMarker('marker00', [118.869042069359, 32.0131156239015],
      //     {
      //       'draggable': false,
      //       'single': false,
      //       'content': `<div class="text_marker" style="color:#fff"><img src="${room_location}" width="40px" height="40px"/></div>`,
      //       altitude: 800,
      //     });
      var marker = new BDLayers.Lib.Overlays.MarkerImg(
          'marker01',
          [118.869046506393,32.0133281708171], {
            imgurl: room_location,
            iconSize: [90, 54],
            altitude: 20,
          },
      );
      marker.on('click', () => {

      });
      this.markLayer.addMarker(marker);
      // marker.getMarker().addTo(window.map.map);
    },
    onMessage(a) {
      const data = JSON.parse(a.data);
      console.log('>>>>>>>>>>>>>>>>>>>>>>>>', data);
      this.$notify({
        title: '警告',
        message: `${data.msg.fenceName}发生闯禁事件。`,
        type: 'warning',
      });
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />