绘制传单地图的线条

Question

我有一张实时显示位置的工作传单地图。 lat 和 long 值每秒出现一次，地图根据每次更改的值显示。现在我想在折线中显示最后 10 个位置历史记录，但要将最后 10 个位置显示为折线，我需要有一个包含 10 个位置的数组。我如何创建一个包含最近 10 个位置历史记录的数组？

这是我所做的

import L from 'leaflet';

componentDidMount() {
  const { currentValue } = this.props;
  const latestValue = currentValue.split(':');
  const lat = getNumber(latestValue[0]);
  const long = getNumber(latestValue[1]);
  this.map = L.map(this.element).setView([lat, long], 15);

  // Google Map
  L.tileLayer('*****', {
    maxZoom: 20,
  }).addTo(this.map);

  this.marker = L.marker([lat, long], { icon: MarkerIcon });
  this.marker.addTo(this.map);
  const polyLinePoints = [
    new L.LatLng(lat, long),
    new L.LatLng(lat, long),
    new L.LatLng(lat, long),
    new L.LatLng(lat, long),
  ];
  const polyLineOptions = {
    color: 'blue',
    weight: '5',
    opacity: 0.9
  };
  const polyline = L.polyline(polyLinePoints, polyLineOptions).addTo(this.map);
  this.map.fitBounds(polyline.getBounds());
}

componentDidUpdate() {
  const { currentValue } = this.props;
  const latestValue = currentValue.split(':');
  const lat = getNumber(latestValue[0]);
  const long = getNumber(latestValue[1]);
  console.log('lat', lat, long);
  // latlng.push([lat,long]);
  const polyLinePoints = [
    new L.LatLng(lat, long),
    new L.LatLng(lat, long),
    new L.LatLng(lat, long),
    new L.LatLng(lat, long),
  ];
  const polyLineOptions = {
    color: 'blue',
    weight: '5',
    opacity: 0.9
  };
  this.marker.remove();
  this.marker = L.marker([lat, long], { icon: MarkerIcon });
  this.marker.addTo(this.map);
  // invalidateSize forces map to recalculate its size
  // next, move the center to given coordinate
  this.map.invalidateSize(false).setView([lat, long]);
  const polyline = L.polyline(polyLinePoints, polyLineOptions).addTo(this.map);
  this.map.fitBounds(polyline.getBounds());
}

render() {
  const { width, height } = this.props;
  return (
    <div
      ref={(element) => { this.element = element; }}
      style={{ width, height }}
    ></div>
  );
}
}

我使用的是 leaflet 而不是 react-leaflet 和 immutablejs。

Answer 1

每次位置更新后：

存储 10 个最新景点的列表
删除之前的多段线（就像您对标记所做的一样 - 删除之前的多段线，否则我们会发生内存泄漏）
根据最新的地点列表创建新的折线。

你也应该创建一些常量（这将是 MAX_SPOT = 10 和 polyLineOptions - 将它移到 componentDidMount() 之外，这样我们就可以在每次新的折线时重新使用它绘制）：

// These can be outside of your react class declaration
const MAX_SPOT = 10;
const polyLineOptions = {
  color: 'blue',
  weight: '5',
  opacity: 0.9
};

创建一些变量来存储 polyLinePoints 和 polyline（在构造函数中）：

constructor(props){
  super(props);
  // ...
  this.polyLinePoints = [];
  this.polyline = false;
}

下一个：

componentDidMount() {
  // ... keep your previous logics here
  this.polyLinePoints.push(new L.LatLng(lat, long);

  // NOTE HERE: just after the component is mounted, 
  // perhaps there's only 1 location captured, so the polyline should not be created yet
  //this.polyline = L.polyline(this.polyLinePoints, polyLineOptions)
  //this.polyline.addTo(this.map);
  //this.map.fitBounds(this.polyline.getBounds());
}

componentDidUpdate() {  
  // ...your previous logics here
  if (this.polyLinePoints.length < MAX_SPOT) {
    this.polyLinePoints.push(new L.LatLng(lat, long));
  }
  else {
    for (let i = 0; i < MAX_SPOT - 1; i++) { // basic for loop ^^
      this.polyLinePoints[i] = this.polyLinePoints[i + 1];
    }
    this.polyLinePoints[MAX_SPOT] = new L.LatLng(lat, long); 
    // so the polyLinePoints should always have 10 latest spots
  }
  this.marker.remove();
  this.marker = L.marker([lat, long], { icon: MarkerIcon });
  this.marker.addTo(this.map);
  // invalidateSize forces map to recalculate its size
  // next, move the center to given coordinate

  // SET THE POLYLINE HERE, remember to remove the previous one, just like your above marker
  // Try..Catch here because the first polyline after componentDidMount() was not created, so your map cannot find the polyline ^^
  try {
    this.map.removeLayer(this.polyline);
  }
  catch(err) {
    console.log(err);
  }     
  this.polyline = L.polyline(this.polyLinePoints, polyLineOptions)
  this.polyline.addTo(this.map); // the polyline should be added to the map here, should not on the same line as its creation
  this.map.fitBounds(this.polyline.getBounds());
}

这就是思路和算法，如果还不行，请在控制台上显示一些错误，谢谢！

绘制传单地图的线条

plot lines to leaflet map

javascript

leaflet

reactjs

immutable.js