Сопоставьте полилинию GPS-трека с существующей полилинией на карте Leaflet Map

Я озадачен вопросом, и мне любопытно, сможет ли кто-нибудь направить меня в правильном направлении.

У меня есть две ломаные линии на карте Leaflet.

  1. Плавная ломаная линия, идущая по заданной дорожке
  2. Полилиния GPS-трекера, которая следует по тому же маршруту, но не является гладкой из-за сигнала GPS.

В первой половине скриншота я показал текущую ситуацию.

Я пытаюсь понять следующее. Как:

a) сопоставить GPS-трекер с предустановленной полилинией (как рисунок во 2-й половине скриншота)
b) передать переменную в предустановленную полилинию, когда GPS-трекер проходит по ней .

Какие-либо предложения?

Большое спасибо! Снимок экрана с моей проблемой


leaflet gps polyline
person sms27    schedule 11.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это не совсем то, что вам нужно, но вот способ добавить GPSMarker в строку:

smoothLine - правильная строка L.polyline()


var GPSmarker = L.marker([0,0]).addTo(map)
var GPSmarkerOnLine = L.marker([0,0]).addTo(map)
map.on('click',function(e){
    GPSmarker.setLatLng(e.latlng);
  var x = smoothLine.closestLayerPoint(map.latLngToLayerPoint(e.latlng)) // convert latlng to point and get closest point on the line
  var ll = map.layerPointToLatLng(x); // convert back to latlng
  GPSmarkerOnLine.setLatLng(ll);
  if(x.distance < 5){ // Distance lower then 5px or ll.distanceTo(e.latlng) < 5 --> Lower then 5 Meters
    console.log('MATCHED')
    L.marker(ll).addTo(map);
  }
})

С этим кодом у вас будет один GPS-маркер вместо линии GPS.

https://jsfiddle.net/falkedesign/tpogj6wb/

person Falke Design    schedule 11.08.2020