전단지 경로를 완전히 제거

Question

이전에 전단 시스템을 사용하여 그려진 경로를 완전히 제거하는 방법은 무엇입니까? docs here이 어떻게 수행되는지 설명하지 않거나 어떻게 든 그것을 놓칠 수있었습니다. 일을 할 수있는 합법적 인 방법은 실제로는 것을 나에게 분명하지 않다와 그렇지 않은이 작동하는 동안 나는 현재 다음

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

의 라인을 따라 뭔가를하고 오전 conversation here을 통해 읽기

메모리 누출을 초래할 수 있습니다. 나는 여기 누군가가 결정적인 해결책을 가지고 있기를 바라고있다.

Answer 1

전단지 API 문서, 우리는 방법은 http://leafletjs.com/reference-1.2.0.html#control

또 다른 옵션은 L.에서 사용할 수있는 "removeControl"방법을 사용하는 것입니다 기본 클래스 L.Control 가능 "제거"를 호출 할 수있는 컨트롤을 제거하기에 따르면 map 클래스 http://leafletjs.com/reference-1.2.0.html

이것을 설명하기 위해 좀 더 객체 지향적 인 방식으로 맵을 관리하기위한 약간의 도우미 스크립트를 준비했습니다. addRoutingControl 및 removeRoutingControl을 호출하여지도에서 컨트롤을 추가하고 완전히 제거 할 수 있습니다.

이 예제에서는 전단지 맵 개체에서 "removeControl"메서드를 사용했습니다.

<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> 

여기에 테스트 할 수 있습니다 :

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)); 

그럼 당신은 같은 페이지에서 사용할 수 있습니다 https://codepen.io/anon/pen/GMXWMm

당신이를 디버깅하는 경우 우리는 전단지가 제대로 사실이를 관리 할 것으로 예상 할 수있다 페이지에서 브라우저를 사용하면 컨트롤이 DOM 트리에서 완전히 제거 된 것을 볼 수 있습니다.