百度地圖升級7：mapV的引用 - 曲線加流動動畫

我的資源：https://download.csdn.net/download/Hei_lovely_cat/12545427 

先上效果圖

1、引用

<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 

//見資源中此文件，如果是vue項目記得放到static中哦~

 <script src="./static/js/mapv.js"></script>  

 <script src="https://mapv.baidu.com/build/mapv.min.js"></script>

2、代碼詳解

• 引用地圖

  this.map = new BMap.Map("allmap", { 
          enableMapClick: false,
          // minZoom: 10,
          // maxZoom: 19
        }); //構造底圖時，關閉底圖可點功能
        this.map.centerAndZoom(new BMap.Point(114.646861, 38.054677), 11);
        this.map.enableScrollWheelZoom(true); // 開啓縮放 
  //處理數據
        this.getMapData();

   

• 對接口的解析

  //對數據的處理，從哪流向哪           
  let qianxiData = [] //弧線
  for (var i in this.maps) {
     var obj = {}
     obj.from = {
        lng: this.maps[i].outletLng,
        lat: this.maps[i].outletLat
        }
     obj.to = {
        lng: this.maps[i].endLng,
        lat: this.maps[i].endLat
     }
     qianxiData.push(obj)
  }
  this.mapvLine(qianxiData)

   

•  動態曲線+流動動畫，直接引用即可

  //動態河流
        mapvLine(qianxiData) {
          var showType = '遷入'; //判斷條件	
          var lineData = []; //線
          var timeData = []; //動畫
          var citys = {}
          for (var i = 0; i < qianxiData.length; i++) {
            var fromColumn = showType == '遷入' ? 'from' : 'to';
            var toColumn = showType == '遷入' ? 'to' : 'from';
            var fromCenter = qianxiData[i][fromColumn];
            var toCenter = qianxiData[i][toColumn];
            if (!fromCenter || !toCenter) {
              continue;
            }
            var point = citys[qianxiData[i].from] = qianxiData[i].count;
            var point = showType == '遷入' ? fromCenter : toCenter;
            var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]); //弧線圖層
  
            for (var j in curve) {
              timeData.push({
                geometry: {
                  type: 'Point',
                  coordinates: curve[j]
                },
                count: 1,
                time: j
              });
            }
            lineData.push({
              geometry: {
                type: 'LineString',
                coordinates: curve
              },
            });
          }
          var lineDataSet = new mapv.DataSet(lineData);
          var lineOptions = {
            strokeStyle: 'rgba(64,158,255, 1)',
            shadowColor: 'rgba(255, 250, 50, 1)',
            shadowBlur: 20,
            lineWidth: 4,
            zIndex: 100,
            draw: 'simple'
          }
          var lineLayer = new mapv.baiduMapLayer(this.map, lineDataSet, lineOptions);
          var pointOptions = {
            fillStyle: 'rgba(255, 250, 250, 0.5)',
            strokeStyle: 'rgba(255, 250, 250, 1)',
            lineWidth: 4,
            size: 10,
            zIndex: 300,
            draw: 'simple'
          }
          var timeDataSet = new mapv.DataSet(timeData);
          var timeOptions = {
            fillStyle: 'rgba(255, 250, 250, 0.5)',
            zIndex: 150,
            size: 2.5,
            animation: {
              type: 'time',
              stepsRange: {
                start: 0,
                end: 50
              },
              trails: 10,
              duration: 2,
            },
            draw: 'simple'
          }
          var timeMapvLayer = new mapv.baiduMapLayer(this.map, timeDataSet, timeOptions);
        },

  注意：處理的數據格式要按上方格式來~