Follow the public account “seeling_GIS” to get the learning video materials

Before the order

  1. Before a netizen leave a message, hope to give a historical track about the point. I want to modify the corresponding point data latlngs by L.Polyline and then update it by setLatLngs. See the code below. Do not know whether this netizen needs the answer.
/ / the code examples from 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()); 

Copy the code
  1. In the actual work, there are requirements for the presentation of the running track, all refer to some examples, there are many ways to achieve, but found that the mapV implementation will be better, access is also very convenient, so there is this article

The effect

The data in The Baidu case is directly used here, because the longitude and latitude data is the data after 100 degree deflection, so there is no correction here. All the results of looking at the map are offset to some extent from the actual road network

The introduction of MapV

// Add mapV via NPM
npm install mapv

import * as mapv from 'mapv' 
Copy the code

Code implementation

  1. It is relatively simple to use MAPV to achieve this effect. The first step is to create the data set, then set the style configuration option, and then directly call the leafletMapLayer assembled by MAPV
  2. The image is the result of two layers superimposed, one is the track line layer, the other is the motion track layer
// Trace line option

let option= { 
        strokeStyle: "Rgba (53,57,255,0.5)".shadowColor: "Rgba (53,57,255,0.2)".shadowBlur: 3.lineWidth: 3.0.draw: "simple"};// Movement path 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"};// Initializes the dataset
  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);

        // Add layers to map
        mapv.leafletMapLayer(dataset, option).addTo(map);
        mapv.leafletMapLayer(timeDataset, aniOption).addTo(map);

    });
Copy the code

More content, welcome to pay attention to the public number