完全删除传单路线

Question

如何使用“ Leaflet Routing Machine”完全删除先前绘制的路线？要么这里的文档没有说明如何完成此操作，要么我设法以某种方式错过了它。

在这里阅读整个对话，我目前正在按照以下方式做一些事情

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

尽管这行得通，但我仍然不清楚这实际上是做事的合法方法，并且不会导致内存泄漏。我希望这里有人能提供明确的解决方案。

Answer 1

根据 Leaflet API 文档，要删除控件，我们可以调用基类 L.Control http://leafletjs.com/reference-1.2.0.html#control 中可用的方法“remove”

另一种选择是使用 L.map 类http://leafletjs.com/reference-1.2.0.html 中提供的“removeControl”方法

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

在这个例子中，我使用了 Leaflet 地图对象中的“removeControl”方法。

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 树中完全删除。