Question

如何使用Leaflet Routing Machine完全删除先前绘制的路线？要么docs here没有解释这是怎么做的，要么我以某种方式设法错过它。

通过conversation here阅读我目前正在做的事情如下

 if (routing)
 {
  routing.spliceWayPoints(0,2);
  removeControl(routing);
  routing = null;
 }

虽然这是有效的，但我不清楚它实际上是合法的做事方式，它不会导致内存泄漏。我希望这里有人有明确的解决方案。

Answer 1

根据Leaflet API文档，要删除控件，我们可以调用方法＆＃34;删除＆＃34;可在基类L.Control http://leafletjs.com/reference-1.2.0.html#control

中找到

另一种选择是使用＆＃34; removeControl＆＃34; L.map类http://leafletjs.com/reference-1.2.0.html

中提供的方法

为了说明这一点，我准备了一个小帮助脚本，以更面向对象的方式管理地图。您可以调用addRoutingControl和removeRoutingControl来添加并从地图中完全删除控件。

在这个例子中，我使用了＆＃34; removeControl＆＃34; Leaflet地图对象中的方法。

MapHelper = (function ($) {
    'use strict';

    var settings = {
        center: [0, 0],
        zoom: null,
    };

    var mapId = '';
    var map = null;
    var baseMaps = {};
    var overlayMaps = {};
    var routingControl = null;


    var init = function (mapLayerId, options) {
        settings = $.extend(settings, options);
        mapId = mapLayerId;
        initMap();
    };

    var getMap = function () {
        return map;
    };

    var addRoutingControl = function (waypoints) { 
        if (routingControl != null)
            removeRoutingControl();

        routingControl = L.Routing.control({
            waypoints: waypoints
        }).addTo(map);
    };

    var removeRoutingControl = function () {
        if (routingControl != null) {
            map.removeControl(routingControl);
            routingControl = null;
        }
    };

    var panMap = function (lat, lng) {
        map.panTo(new L.LatLng(lat, lng));
    }

    var centerMap = function (e) {
        panMap(e.latlng.lat, e.latlng.lng);
    }

    var zoomIn = function (e) {
        map.zoomIn();
    }

    var zoomOut = function (e) {
        map.zoomOut();
    }

    var initMap = function () {
        var $this = this;

        map = L.map(mapId, {
            center: settings.center,
            zoom: settings.zoom,
            crs: L.CRS.EPSG3857,
            attributionControl: true,
            contextmenu: true,
            contextmenuWidth: 140
        });

        baseMaps["OSM"] = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright" target="_blank">OpenStreetMap</a> contributors'
        }).addTo(map);
    };

    var invalidateMapSize = function () {
        map.invalidateSize();
    }

    return {
        init: init, addRoutingControl: addRoutingControl, removeRoutingControl: removeRoutingControl, 
        panMap: panMap, invalidateMapSize: invalidateMapSize, getMap: getMap
    }
}(jQuery));

然后你可以在你的页面中使用它：

<button id="addRoute">Add Route</button>
<button id="remoteRoute">Remove Route</button>
<div id="map" style="width: 400px; height: 400px;"></div>
<script>
    MapHelper.init('map', {
        zoom: 10,
        center: L.latLng(51.509865, -0.118092),
    });

    $('#addRoute').on('click', function() {
        MapHelper.addRoutingControl( [
            L.latLng(50.509865, -1.118092),
            L.latLng(51.509865, -0.118092)
        ]);
    });

    $('#remoteRoute').on('click', function() {
        MapHelper.removeRoutingControl();
    });
</script>

可在此处测试：https://codepen.io/anon/pen/GMXWMm

我们可以期待Leaflet正确管理它，事实上，如果您使用浏览器调试页面，您可以看到控件已从DOM树中完全删除。

Answer 2

对我来说，上述解决方案并没有完全奏效。它删除了路线和所有标记，是的...但除了起始标记，当我对图层进行控制台记录时，带有航点的图层仍在显示。我不知道为什么，我正在使用 lrm-graphhopper 扩展名，也许是因为这个？？无论如何，这是一个对我有用的解决方案..

this.map.eachLayer((layer: any) => {
  if (layer.options.waypoints && layer.options.waypoints.length) {
    this.map.removeLayer(layer);
   }
});

完全删除传单路线

2 个答案: