devicesmgt/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue

<template>
  <div>
    <!-- 地图弹框 展示设备轨迹 -->
    <el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" @close="close">
      <!-- 表单 根据日期查询设备轨迹 -->
      <el-card shadow="hover">
        <el-form :model="queryForm" inline>
          <el-form-item label="查询日期">
            <el-date-picker
              v-model="queryForm.date"
              type="daterange"
              range-separator="至"
              start-placeholder="请选择开始日期"
              end-placeholder="请选择结束日期"
              style="width: 330px"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleQuery">轨迹查询</el-button>
          </el-form-item>
        </el-form>
        <div>
          <h2>{{ equipment }}</h2>
          <div class="equipment">定位设备编号: {{ equipmentNumber }}</div>
          <div class="equipment">{{ engineering }}工程</div>
        </div>

        <!-- 地图 -->
        <div v-if="openMap" id="container" style="height: 500px; background-color: #bfc; margin-top: 13px"></div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MapDialog',
  data() {
    return {
      openMap: false, // 是否打开地图弹框
      queryForm: {
        date: '',
      },
      equipment: '', // 设备名称
      equipmentNumber: 'H906L', // 设备编号
      engineering: '大禹治水', // 工程
      map: null,
      // 轨迹点
      linePointList: [
        {
          lng: 116.297611,
          lat: 40.047363,
        },
        {
          lng: 116.302839,
          lat: 40.048219,
        },
        {
          lng: 116.308301,
          lat: 40.050566,
        },
        {
          lng: 116.305732,
          lat: 40.054957,
        },
        {
          lng: 116.304754,
          lat: 40.057953,
        },
        {
          lng: 116.306487,
          lat: 40.058312,
        },
        {
          lng: 116.307223,
          lat: 40.056379,
        },
      ],
    }
  },
  mounted() {
    this.getEquipmentInfo()
  },
  methods: {
    async handleQuery() {
      console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
      const params = {
        date: this.queryForm.date,
      }
      this.getEquipmentInfo(params)
      // 先销毁地图 再重新初始化
      this.map.clearOverlays()
      this.map = null
      await this.initMap()
    },
    openMapDialog(val) {
      this.openMap = val
      this.initMap()
    },
    close() {
      this.openMap = false
      this.$emit('getList')
    },
    // 获取装备信息
    getEquipmentInfo(params = {}) {
      console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
      // 接口(params).then(res => {
      //   this.equipment = res.equipment
      //   this.equipmentNumber = res.equipmentNumber
      //   this.engineering = res.engineering
      //   this.linePointList = res.linePointList
      // })
    },
    // 初始化地图和轨迹
    initMap() {
      this.$nextTick(() => {
        this.map = new BMapGL.Map('container') // 创建地图实例
        let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
        console.log('🚀 ~ this.$nextTick ~ point:', point)
        this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
        this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小

        // 添加轨迹
        let pointList = []
        if (this.linePointList.length === 0) return
        for (var i = 0; i < this.linePointList.length; i++) {
          pointList.push(new BMapGL.Point(this.linePointList[i].lng, this.linePointList[i].lat))
        }
        let polyline = new BMapGL.Polyline(pointList)
        // 修改线的样式
        polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
        // polyline.setStrokeWeight(2) // 线宽

        let trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
          overallView: true, // 动画完成后自动调整视野到总览
          tilt: 30, // 轨迹播放的角度，默认为55
          duration: 5000, // 动画持续时长，默认为10000，单位ms
          delay: 2000, // 动画开始的延迟，默认0，单位ms
        })

        trackAni.start()
        // 设置起点终点图标
        this.triggerMovement()
      })
    },
    // 添加起点和终点的标记
    addStartEndMarkers(startLatLng, endLatLng) {
      let startIcon = new BMapGL.Icon(require('/src/assets/images/startIcon.png'), new BMapGL.Size(32, 32))
      let startMarker = new BMapGL.Marker(startLatLng, { icon: startIcon })
      this.map.addOverlay(startMarker)

      let endIcon = new BMapGL.Icon(require('/src/assets/images/endIcon.png'), new BMapGL.Size(32, 32))
      let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
      this.map.addOverlay(endMarker)
    },
    // 轨迹运动结束后的回调
    triggerMovement() {
      // 轨迹运动结束后获取起点和终点的经纬度坐标
      let startLatLng = new BMapGL.Point(this.linePointList[0].lng, this.linePointList[0].lat)
      let endLatLng = new BMapGL.Point(
        this.linePointList[this.linePointList.length - 1].lng,
        this.linePointList[this.linePointList.length - 1].lat
      )

      // 添加起点和终点的图标
      this.addStartEndMarkers(startLatLng, endLatLng)
    },
  },
}
</script>

<style lang="scss" scoped>
.equipment {
  font-weight: 600;
  font-size: 15px;
  margin-top: 10px;
}
</style>