vue-baidu-map 多点之间画动态的线Polyline

vue-baidu-map 多点之间画动态的线Polyline

• 安装

npm i vue-baidu-map@0.21.22 --save

• main.js

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: '你的ak'
})

• 示例

<template>
    <baidu-map
      style="width: 100%; height: 100%"
      :center="mapCenter"
      :zoom="mapZoom"
      :dragging="true"
      :scroll-wheel-zoom="true"
      mapType="BMAP_HYBRID_MAP"
      @ready="handler"
    >
    </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      map: '',
      BMap: '',
      mapCenter: {
        lng: 129.138542,
        lat: 44.430244,
      },
      mapZoom: 15,
      pointsList: [
        {
            lng: 129.138542,
            lat: 44.430244,
        },
        {
            lng: 129.122236,
            lat: 44.442156,
        },
        {
            lng: 129.122566,
            lat: 44.462756,
        },
      ],
      lineList: [],
    }
  },
  mounted() {
  },
  methods: {
    handler({ BMap, map, BBezierCurve }) {
      this.map = map
      this.BMap = BMap

      for (let i = 0; i < this.pointsList.length; i++) {
        if (i < this.pointsList.length - 1) {
          var fromCenter = new BMap.Point(this.pointsList[i].lng, this.pointsList[i].lat)
          var toCenter = new BMap.Point(this.pointsList[i + 1].lng, this.pointsList[i + 1].lat)
          // 连接线
          var line = new BMap.Polyline([fromCenter, toCenter], {
            enableEditing: false,
            enableClicking: false,
            strokeWeight: 10,
            strokeColor: '#000',
            strokeOpacity: 0.5,
            strokeStyle: 'solid',
          })
          this.map.addOverlay(line)

          // 运动的线
          var line2 = new BMap.Polyline([], {
            enableEditing: false,
            enableClicking: false,
            strokeWeight: 10,
            strokeColor: 'rgb(255, 234, 0)',
            strokeOpacity: 1,
            strokeStyle: 'solid',
          })
          this.lineList.push({
            line: line2,
            fromCenter: fromCenter,
            toCenter: toCenter,
          })
          this.map.addOverlay(line2)
        }
      }

      this.lineList.forEach((element, index) => {
        this.animateLine(element.line, element.fromCenter, element.toCenter)
      })
    },
    // 动画函数
    animateLine(polyline, startPoint, endPoint, totalSteps = 100, interval = 100, currentStep = 0) {
      if (currentStep >= totalSteps) {
        polyline.setPath([])
        this.animateLine(polyline, startPoint, endPoint)
        return
      }
      var stepX = (endPoint.lng - startPoint.lng) / totalSteps
      var stepY = (endPoint.lat - startPoint.lat) / totalSteps
      var newPoint = new BMap.Point(
        startPoint.lng + stepX * currentStep,
        startPoint.lat + stepY * currentStep
      )
      polyline.getPath().push(newPoint)
      polyline.setPath(polyline.getPath())

      setTimeout(() => {
        this.animateLine(polyline, startPoint, endPoint, totalSteps, interval, currentStep + 1)
      }, interval)
    },
  },
}
</script>

<style scoped></style>