У меня есть наборы точек на моем листе, и я хочу иметь возможность показать / скрыть их Сейчас я делаю это грубым образом, то есть вызываю методы addLayer() и clearLayers() соответственно для ссылки на группу слоев var lg = new L.LayerGroup();.
Это работает нормально, но у меня много точек (300 КБ), и есть некоторая задержка, поскольку маркеры нужно перерисовывать с нуля. Однако я наткнулся на этот пост и пытаюсь адаптировать код под свои нужды.
Хотя это выглядит просто, я не могу заставить его работать на circleMarkers, так как все они выглядят так, как будто они находятся на одной панели, первой, которая устанавливается в опциях. Если у вас есть markers и circleMarkers, и вы выделяете разные панели для каждой, то это выглядит хорошо. Однако, когда вы вводите другой набор circleMarkers, скажем, другого цвета, тогда они не будут располагаться на своей собственной панели по желанию, а будут размещены на той же панели, что и другая circleMarkers. Следовательно, несмотря на наличие 3 разных наборов, только 2 панели имеют точки, одна для markers, а другая для circleMarkers. (см. фрагмент)
Кто-нибудь, чего мне не хватает, пожалуйста?
Спасибо!
<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<style>
html,
body,
#leaflet {
height: 90%
}
</style>
</head>
<body>
<button id="hidem1">Hide1</button>
<button id="showm1">Show1</button>
<button id="hidem2">Hide2</button>
<button id="showm2">Show2</button>
<button id="hidem3">Hide3</button>
<button id="showm3">Show3</button>
<div id="leaflet"></div>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"></script>
<script>
var map = L.map('leaflet', {
layers: [
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
})
],
center: [48.85, 2.35],
zoom: 12
});
// Example adapted from http://jsfiddle.net/b7LgG/3/
// provided by @danzel https://github.com/Leaflet/Leaflet/issues/4#issuecomment-35025365
// Images from Leaflet Custom Icons tutorial http://leafletjs.com/examples/custom-icons/
//We don't use shadows as you can't currently specify what pane shadows end up in
var greenIcon = L.icon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76]
});
var redIcon = L.icon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-red.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76]
});
//Create panes for each of the sets of markers
var pane1 = map.createPane('markers1');
var pane2 = map.createPane('markers2');
var pane3 = map.createPane('markers3');
populate();
function hide1() {
pane1.style.display = 'none';
}
function show1() {
pane1.style.display = '';
}
function hide2() {
pane2.style.display = 'none';
}
function show2() {
pane2.style.display = '';
}
function hide3() {
pane3.style.display = 'none';
}
function show3() {
pane3.style.display = '';
}
L.DomUtil.get('hidem1').onclick = hide1;
L.DomUtil.get('showm1').onclick = show1;
L.DomUtil.get('hidem2').onclick = hide2;
L.DomUtil.get('showm2').onclick = show2;
L.DomUtil.get('hidem3').onclick = hide3;
L.DomUtil.get('showm3').onclick = show3;
//Add 200 markers to each of the groups/layers
function populate() {
for (var i = 0; i < 200; i++) {
new L.marker(getRandomLatLng(), {
pane: pane1,
color: 'green',
//icon: greenIcon
}).addTo(map);
new L.circleMarker(getRandomLatLng(), {
pane: pane2,
color: 'red',
//icon: redIcon
}).addTo(map);
new L.circleMarker(getRandomLatLng(), {
pane: pane3,
color: 'blue',
//icon: redIcon
}).addTo(map);
}
return false;
}
function getRandomLatLng() {
return [
48.8 + 0.1 * Math.random(),
2.25 + 0.2 * Math.random()
];
}
</script>
</body>
</html>