我的传单视觉效果上有一些要点，我希望能够显示/隐藏它们。现在，我以粗略的方式进行此操作，即分别调用图层组引用addLayer()的clearLayers()和var lg = new L.LayerGroup();方法。
可以，但是我有很多点（300K），并且由于必须从头开始重画标记而有些延迟。但是，我遇到了这个post，我正在尝试使代码适应我的需求。
尽管它看起来很简单，但我无法使其用于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/[email protected]/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/[email protected]/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>最佳答案
而不是像在这里那样传递窗格对象：
new L.marker(getRandomLatLng(), {
pane: pane1, // <-- pane object
color: 'green',
//icon: greenIcon
}).addTo(map);
您需要输入窗格的名称：
new L.marker(getRandomLatLng(), {
pane: 'markers1', // <-- name of the pane
color: 'green',
//icon: greenIcon
}).addTo(map);
完整的代码示例答案：
<!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/[email protected]/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/[email protected]/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: 'markers1',
color: 'green',
//icon: greenIcon
}).addTo(map);
new L.circleMarker(getRandomLatLng(), {
pane: 'markers2',
color: 'red',
//icon: redIcon
}).addTo(map);
new L.circleMarker(getRandomLatLng(), {
pane: 'markers3',
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>