關(guān)注公眾號(hào)"seeling_GIS"，領(lǐng)取學(xué)習(xí)視頻資料

前序

1. 之前有網(wǎng)友留言出，希望出一個(gè)關(guān)于點(diǎn)位的歷史軌跡。點(diǎn)位的歷史軌跡，我想的是通過 L.polyline 修改對(duì)應(yīng)的點(diǎn)位數(shù)據(jù) latlngs 然后通過 setLatLngs 的方式更新即可。如下代碼所示。不知道是否是該網(wǎng)友所需要的答案。

// 代碼示例來(lái)自 https://leafletjs.com/reference-1.6.0.html#polyline
var latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polyline
map.fitBounds(polyline.getBounds()); 

2. 在實(shí)際工作中有對(duì)運(yùn)行軌跡的呈現(xiàn)需求，所有就參看了一些例子，實(shí)現(xiàn)的方式有很多種，但是發(fā)現(xiàn)mapv實(shí)現(xiàn)的方式效果會(huì)更好，接入也很方便，所有就有了這篇文章

效果

這里是直接使用百度案例中的數(shù)據(jù)，因?yàn)榻?jīng)緯度數(shù)據(jù)是百度偏轉(zhuǎn)后的數(shù)據(jù)，這里沒有做糾偏，所有看圖結(jié)果是和實(shí)際路網(wǎng)是有一定偏移的

track.gif

引入 MapV

// 通過npm添加 mapv
npm install mapv

import * as mapv from 'mapv' 

代碼實(shí)現(xiàn)

1. 使用mapv實(shí)現(xiàn)該效果相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，首先是創(chuàng)建數(shù)據(jù)集，然后設(shè)置樣式配制option，然后直接調(diào)用mapv分裝好的 leafletMapLayer 即可
2. 圖上效果是兩個(gè)圖層疊加后的結(jié)果，一個(gè)是軌跡線圖層，一個(gè)是運(yùn)動(dòng)軌跡圖層

// 軌跡線 option

let option= { 
        strokeStyle: "rgba(53,57,255,0.5)",
        shadowColor: "rgba(53,57,255,0.2)",
        shadowBlur: 3,
        lineWidth: 3.0,
        draw: "simple",
      };

// 運(yùn)動(dòng)軌跡 option
let aniOption =  {
        fillStyle: "rgba(255, 250, 250, 0.2)",
        globalCompositeOperation: "lighter",
        size: 1.5,
        animation: {
          stepsRange: {
            start: 0,
            end: 100,
          },
          trails: 3,
          duration: 5,
        },
        draw: "simple",
      };

// 初始化 dataset 數(shù)據(jù)
  this.axios.get("/data/mapv/od-xierqi.txt").then((res) => {
        var data = [];
        var timeData = [];
        let rs = res.data.split("\n");
        console.log(rs.length);
        var maxLength = 0;
        for (var i = 0; i < rs.length; i++) {
          var item = rs[i].split(",");
          var coordinates = [];
          if (item.length > maxLength) {
            maxLength = item.length;
          }
          for (let j = 0; j < item.length; j += 2) { 
            var x = (Number(item[j]) / 20037508.34) * 180;
            var y = (Number(item[j + 1]) / 20037508.34) * 180;
            y =
              (180 / Math.PI) *
              (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
            if (x == 0 || y == NaN) {
              continue;
            }
            coordinates.push([x, y]);
            timeData.push({
              geometry: {
                type: "Point",
                coordinates: [x, y],
              },
              count: 1,
              time: j,
            });
          }
          data.push({
            geometry: {
              type: "LineString",
              coordinates: coordinates,
            },
          });
        }

        let dataset = new mapv.DataSet(data);
        let timeDataset = new mapv.DataSet(timeData);

        // 添加圖層到map
        mapv.leafletMapLayer(dataset, option).addTo(map);
        mapv.leafletMapLayer(timeDataset, aniOption).addTo(map);

    });

更多內(nèi)容，歡迎關(guān)注公眾號(hào)

seeling_GIS