完全移走传单路线
如何彻底移除以前使用传单路由机绘制的路线？要么是医生来了没有解释这是如何做到的，要么是我设法错过了它。
通过阅读这里的谈话，我目前正在按以下思路做一些事情
if (routing)
{
routing.spliceWayPoints(0,2);
removeControl(routing);
routing = null;
}虽然这是可行的，但我不清楚它实际上是做事情的合法方式，并且不会导致内存泄漏。我希望在座的人有明确的解决办法。
回答 2
Stack Overflow用户
发布于 2017-10-13 13:46:06
根据传单API文档，要删除控件，我们可以调用基类L.Control http://leafletjs.com/reference-1.2.0.html#control中可用的方法“删除”。
另一个选项是使用L.map类http://leafletjs.com/reference-1.2.0.html中可用的“http://leafletjs.com/reference-1.2.0.html”方法。
为了说明这一点，我准备了一个小助手脚本，以更面向对象的方式管理地图。您可以调用addRoutingControl和removeRoutingControl来添加并从映射中完全删除控件。
在本例中，我使用了传单映射对象中的"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: '© <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
我们可以期望传单能够正确地管理这一点，实际上，如果您使用浏览器调试页面，则可以看到该控件已从DOM树中完全删除。
Stack Overflow用户
发布于 2021-05-27 20:32:06
对我来说，上述解决方案并没有完全奏效。它移走了路线，还有所有标记，是的.但是除了起始标记外，当我console.logged这些层时，带有路径点的层仍在显示。我不知道为什么，我使用的是图形漏斗扩展，也许就是因为这个？？不管怎样，这里有一个对我有用的解决方案..。
this.map.eachLayer((layer: any) => {
if (layer.options.waypoints && layer.options.waypoints.length) {
this.map.removeLayer(layer);
}
});https://stackoverflow.com/questions/46542342
复制相似问题
腾讯云开发者
