この規則を使用してポイントのレイヤーを追加した後、実際にポイントのレイヤーを削除する方法を知っている人がいるのか、それとも誰かが知っているのか疑問に思っていました。
var pointsLayer, someFeatures = [{
//Hard coded for now
"type": "Feature",
"properties": {
"name": "Company A",
"show_on_map": true,
"icon": 'img/violations.png'
},
"geometry": {
"type": "Point",
"coordinates": [43.22519, -107.69348]
}
}, {
"type": "Feature",
.
.
.
}];
for(w=0; w < someFeatures.length; w++){
pointsLayer = L.marker(someFeatures[w].geometry.coordinates, {icon: violations})
.bindPopup("Company: "+someFeatures[w].properties.name);
//add map points
map.addLayer(pointsLayer);
}
典型的なremoveLayer(pointsLayer);同様のforループ内では機能しません。しかし、それはループスルーする方法がないという意味ではありません。正確にどのようになっているのかわかりません。私はポイントを追加しようとしていますが、それは機能していますが、イベントでそれらを削除します(機能していません)。何か案は?
皆さんありがとう。
追伸この質問が関連性があり、役立つと思われる場合は、古い親指をあきらめることを忘れないでください。
すべてのマーカーをマップに直接追加する代わりに、マーカーを別のレイヤー(つまり、var markers = new L.FeatureGroup();
)に追加してから、そのレイヤーをマップ(map.addLayer(markers);
)にループ外で追加できます。
例えば、
html
<button>remove all markers</button>
<div id="map"></div>
css
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
js
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
});
var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(cloudmade);
var markers = new L.FeatureGroup();
function getRandomLatLng(map) {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;
return new L.LatLng(
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
}
function populate() {
for (var i = 0; i < 10; i++) {
var marker = L.marker(getRandomLatLng(map));
marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>", {
showOnMouseOver: true
});
markers.addLayer(marker);
}
return false;
}
map.addLayer(markers);
populate();
function removeAllMarkers(){
map.removeLayer(markers);
}
document.querySelector('button').onclick=function(){removeAllMarkers()};
将来の使用でポイントを交換するためにマーカーレイヤーを削除またはクリアする必要がある場合:
markers.clearLayers();
map.removeLayer()
を使用します。
var circle = L.circle([lat, lng], 1000).addTo(map);
map.removeLayer(circle);
オブジェクト「マップ」ですべてのレイヤーを直接確認できます。
for ( key in map['_layers'] ){
if(typeof map['_layers'][key]['feature'] !== 'undefined') {
var l = map['_layers'][key];
if( l['feature']['properties']['name'] === 'Company A' ) l.removeFrom(map);}}