L.rectangle (boxes [i])을 제거하는 방법

Question

며칠 전 나는 내 요구에 완벽하게 작동하는 routingControl = L.Routing.control ({...})을 구현했습니다. 그러나 나는 또한 그것을 구현할 수있는 RouteBoxer 내 고객 중 하나가 필요합니다. 이제 내 코드를 따라 새로운 맵을 그리기 위해 내 맵에서 상자를 제거하려고합니다. 그러나 2 일 후에 나는 포기한 해결책을 찾으려고 노력했다. wideroad는 10,20,30 km 등

function routeBoxer(wideroad) { 
    this.route = []; 
    this.waypoints = []; //Array for drawBoxes 
    this.wideroad = parseInt(wideroad); //Distance in km 
    this.routeArray = routingControl.getWaypoints(); 
    for (var i=0; i<routeArray.length; i++) { 
    waypoints.push(routeArray[i].latLng.lng + ',' + routeArray[i].latLng.lat); 
    } 
    this.route = loadRoute(waypoints, this.drawRoute); 
}; //End routeBoxer() 

drawroute = function (route) { 
    route = new L.Polyline(L.PolylineUtil.decode(route)); // OSRM polyline decoding 
    boxes = L.RouteBoxer.box(route, this.wideroad); 
    var bounds = new L.LatLngBounds([]); 
    for (var i = 0; i < boxes.length; i++) { 
    **L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);** 
    bounds.extend(boxes[i]); 
    } 
    console.log('drawRoute:',boxes); 
    this.map.fitBounds(bounds); 
    return route; 
}; //End drawRoute() 

loadRoute = function (waypoints) { 
    var url = '//router.project-osrm.org/route/v1/driving/'; 
    var _this = this; 
    url += waypoints.join(';'); 
    var jqxhr = $.ajax({ 
    url: url, 
    data: { 
     overview: 'full', 
     steps: false, 
     //compression: false, 
     alternatives: false 
    }, 
    dataType: 'json' 
    }) 
    .done(function(data) { 
    _this.drawRoute(data.routes[0].geometry); 
    //console.log("loadRoute.done:",data); 
    }) 
    .fail(function(data) { 
    //console.log("loadRoute.fail:",data); 
    }); 
}; //End loadRoute() 

글쎄, 내 문제는 사용 wideroad 변화의 새를 그리기 위해 이전에 그려진 상자를 제거하는 방법을 지금은 드롭 다운 목록에서 오는 PARAM입니다 드롭 다운 목록 이 코드의 대부분은 전단지 - 라우트 박스 응용 프로그램에서 가져 왔습니다. 미리 도움을 주셔서 감사합니다 ...

Answer 1

직사각형에 대한 참조를 유지해야 나중에 (제거 할 수 있도록) 조작 할 수 있습니다. 전단지와 전단지는 귀하를 대신하여 발송하지 않습니다. 당신이 L.rectangle() 인스턴스에 대한 참조를 저장하지 않는 경우

예컨대 :

if (this._currentlyDisplayedRectangles) { 
    for (var i = 0; i < this._currentlyDisplayedRectangles.length; i++) { 
     this._currentlyDisplayedRectangles[i].remove(); 
    } 
} else { 
    this._currentlyDisplayedRectangles = []; 
} 

for (var i = 0; i < boxes.length; i++) { 
    var displayedRectangle = L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map); 
    bounds.extend(boxes[i]); 
    this._currentlyDisplayedRectangles.push(displayedRectangle); 
} 

, 당신은 분명히 나중에 조작 할 수 없습니다. 이는 다른 전단 층에도 적용됩니다. 전단 층에 대한 명시적인 참조를 저장하지 않는 것이 전단지 예제의 일반적인 패턴입니다.