localization-management-system/src/views/deviceManage/map3d/mapRight.vue

<template>
  <div :style="{position: 'relative', width: '100%', height: '640px'}">
    <div id="fengmapRight" />
    <div class="rightMask" />
  </div>
</template>

<script>
import fengmap from '@/assets/fengmap/fengmap.map.min'
import { FMControlPosition, FMToolbar, FMScaleBar } from '@/assets/fengmap/fengmap.plugin.ui.min.js'
import '@/assets/fengmap/fengmap.effect.min'
import locationIcon from '@/assets/images/red.png'

export default {
  name: 'FengMap',
  props: {
    mapData: {
      type: Object,
      require: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      map: null,
      level: null,
      levelName: null,
      levels: null,
      marker: null,
      scrollFloorControl: null,
      scaleBar: null,
      areaFid: null
    }
  },
  watch: {
    mapData: {
      handler(newVal, oldVal) {
        if (!newVal) {
          console.log('newVal-null')
          return
        }
      },
      deep: true
    }
  },
  mounted() {
    console.log('mapData', this.mapData)
  },
  methods: {
    dispose() {
      if (this.scrollFloorControl) {
        this.scrollFloorControl.remove()
      }
      if (this.map) {
        this.map.dispose()
        this.map = null
      }
    },
    initMap() {
      window.vueInstance = null
      try {
        console.log('this.level', this.level)
        console.log('开始初始化地图')
        const options = {
          container: document.getElementById('fengmapRight'),
          appName: this.mapData && this.mapData.appName,
          key: this.mapData && this.mapData.mapKey,
          mapID: this.mapData && this.mapData.appId,
          // mapURL: '/fengmap/data/',
          // themeID: '1574346301450625025',
          // themeURL: '/fengmap/data/theme/',
          level: this.level,
          mapZoom: 19.5,
          backgroundColor: '#fff'
        }
        console.log('地图配置:', options)

        this.map = new fengmap.FMMap(options)
        console.log('地图实例已创建')

        // this.map.on('loadingProcess', (event) => {
        //   console.log('加载进度:', event.progress)
        //   this.debugInfo = `加载进度: ${event.progress}%`
        // })

        this.map.on('loaded', () => {
          console.log('地图加载完成')
          this.map.setViewMode(fengmap.FMViewMode.MODE_3D)

          // 楼层控件
          const scrollFloorCtlOpt = {
            position: FMControlPosition.RIGHT_TOP,
            floorButtonCount: 5,
            offset: {
              x: -20,
              y: 150
            },
            viewModeControl: true,
            floorModeControl: true,
            needAllLayerBtn: true
          }
          this.scrollFloorControl = new FMToolbar(scrollFloorCtlOpt)
          this.scrollFloorControl.addTo(this.map)

          // 比例尺控件
          const scrollScaleBarCtlOpt = {
            fontSize: 18,
            height: 30,
            position: FMControlPosition.LEFT_BOTTOM,
            offset: {
              x: 20,
              y: -20
            }
          }
          this.scaleBar = new FMScaleBar(scrollScaleBarCtlOpt)
          this.scaleBar.addTo(this.map)

          // 根据FID查询
          if (this.areaFid) {
            const floor = this.map.getFloor(this.level)
            console.log('floor', floor)
            const model = floor.getLayers(fengmap.FMType.MODEL_LAYER)[0].getFeatures().find(item => item.FID === this.areaFid)
            console.log('model', model)
            console.log('model', model.getData())
            // const feature = model.getData()

            this.marker = new fengmap.FMImageMarker({
              url: locationIcon,
              x: model.x,
              y: model.y,
              anchor: fengmap.FMMarkerAnchor.BOTTOM
            })

            model.setColor('#FF6633')
            this.marker.addTo(floor)
            this.map.setCenter({ x: model.x, y: model.y })
            this.map.setZoom({ 'zoom': 21 })
            // model.flash('red')
          }

          window.vueInstance = this
          console.log('Vue实例已全局挂载：', window.vueInstance)
        }, { passive: true })

        this.map.on('click', (e) => {
          this.marker && this.marker.remove()
          this.marker = null
        }, { passive: true })

        this.map.on('mapInitError', (err) => {
          console.error('地图初始化错误:', err)
          this.debugInfo = `地图初始化错误: ${err.message}`
        })

        this.map.on('levelChanged', function(event) {
          console.log('levelChanged:', event)
          console.log('当前楼层:', event.level)
          console.log('楼层name2', window.vueInstance.map.getFloor(event.level).name)
        })
      } catch (error) {
        console.error('初始化地图失败:', error)
        this.debugInfo = `初始化失败: ${error.message}`
      }
    },
    getCurrentLevel() {
      this.level = this.map.getLevel()
      this.levelName = this.map.getFloor(this.level).name
      // floorID level name
      console.log('楼层info', this.map.getFloor(this.level))
      console.log('楼层name1', this.map.getFloor(this.level).name)
      // 所有
      console.log('getFloorInfos', this.map.getFloorInfos())
      window.vueInstance.$emit('refreshLevel', this.level, this.levelName)
    }

  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/fengmap/toolBarStyle.css";

#fengmapRight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}
.rightMask{
  width: 162px;
  height: 42px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
}
</style>