Optimize setWaypoints performance (#312)

Loading a track as route with lots of waypoints (simplify tolerance of 0) caused a long pause before even handling the first route request.

This seems to be caused by a repaint for every added marker/layer. Adding them all at once in FeatureGroup.addTo(map) helps (although still added in a loop).
This commit is contained in:
Norbert Renner 2020-07-01 10:35:50 +02:00
parent 4892c2a1db
commit bacf60a3ba
3 changed files with 22 additions and 6 deletions

View file

@ -36,6 +36,7 @@ BR.Routing = L.Routing.extend({
onAdd: function(map) { onAdd: function(map) {
this._segmentsCasing = new L.FeatureGroup().addTo(map); this._segmentsCasing = new L.FeatureGroup().addTo(map);
this._loadingTrailerGroup = new L.FeatureGroup().addTo(map);
var container = L.Routing.prototype.onAdd.call(this, map); var container = L.Routing.prototype.onAdd.call(this, map);
@ -276,9 +277,24 @@ BR.Routing = L.Routing.extend({
}; };
this.fire('routing:setWaypointsStart'); this.fire('routing:setWaypointsStart');
// Workaround to optimize performance.
// Add markers/layers to map "at once" and avoid a repaint for every single one.
// Therefore remove and re-add FeatureGroup from/to map, also need to unset map reference,
// as LayerGroup.addLayer would add to map anyway.
this._waypoints.remove();
this._waypoints._map = null;
this._loadingTrailerGroup.remove();
this._loadingTrailerGroup._map = null;
for (i = 0; latLngs && i < latLngs.length; i++) { for (i = 0; latLngs && i < latLngs.length; i++) {
this.addWaypoint(latLngs[i], this._waypoints._last, null, callback); this.addWaypoint(latLngs[i], this._waypoints._last, null, callback);
} }
this._loadingTrailerGroup._map = this._map;
this._loadingTrailerGroup.addTo(this._map);
this._waypoints._map = this._map;
this._waypoints.addTo(this._map);
}, },
// patch to fix error when line is null or error line // patch to fix error when line is null or error line
@ -313,7 +329,7 @@ BR.Routing = L.Routing.extend({
dashArray: [10, 10], dashArray: [10, 10],
className: 'loading-trailer' className: 'loading-trailer'
}); });
loadingTrailer.addTo(this._map); this._loadingTrailerGroup.addLayer(loadingTrailer);
} }
L.Routing.prototype._routeSegment.call( L.Routing.prototype._routeSegment.call(
@ -322,7 +338,7 @@ BR.Routing = L.Routing.extend({
m2, m2,
L.bind(function(err, data) { L.bind(function(err, data) {
if (loadingTrailer) { if (loadingTrailer) {
this._map.removeLayer(loadingTrailer); this._loadingTrailerGroup.removeLayer(loadingTrailer);
} }
cb(err, data); cb(err, data);
}, this) }, this)

View file

@ -65,7 +65,7 @@
"leaflet-hotline": "^0.4.0", "leaflet-hotline": "^0.4.0",
"leaflet-plugins": "~3.0.0", "leaflet-plugins": "~3.0.0",
"leaflet-providers": "^1.5.0", "leaflet-providers": "^1.5.0",
"leaflet-routing": "nrenner/leaflet-routing#62bf722", "leaflet-routing": "nrenner/leaflet-routing#e94e153",
"leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev", "leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev",
"leaflet-triangle-marker": "^1.0.2", "leaflet-triangle-marker": "^1.0.2",
"leaflet.locatecontrol": "^0.60.0", "leaflet.locatecontrol": "^0.60.0",

View file

@ -4917,9 +4917,9 @@ leaflet-providers@^1.5.0:
resolved "https://registry.yarnpkg.com/leaflet-providers/-/leaflet-providers-1.5.0.tgz#06d598231ef36f8d0566c219cedf18cef2ff80f5" resolved "https://registry.yarnpkg.com/leaflet-providers/-/leaflet-providers-1.5.0.tgz#06d598231ef36f8d0566c219cedf18cef2ff80f5"
integrity sha512-btncloSyOHrgYNexoz2dRpCl+U9iDQME91RsOWQWNAD9jQUPAkq9mxuTvL/O9VOwrqcEtzhvuHBHIOacJAZDxQ== integrity sha512-btncloSyOHrgYNexoz2dRpCl+U9iDQME91RsOWQWNAD9jQUPAkq9mxuTvL/O9VOwrqcEtzhvuHBHIOacJAZDxQ==
leaflet-routing@nrenner/leaflet-routing#62bf722: leaflet-routing@nrenner/leaflet-routing#e94e153:
version "0.1.2" version "0.1.3"
resolved "https://codeload.github.com/nrenner/leaflet-routing/tar.gz/62bf72277a99d478f7d3f866ca85be0977089c13" resolved "https://codeload.github.com/nrenner/leaflet-routing/tar.gz/e94e153b7574510313cb0bfefcd8776edebf627e"
leaflet-sidebar-v2@nrenner/leaflet-sidebar-v2#dev: leaflet-sidebar-v2@nrenner/leaflet-sidebar-v2#dev:
version "3.0.2" version "3.0.2"