Question

我在Leaflet上建立了一个热图我的第一个目标是在打开地图时看到热图。如果缩放级别大于9，则第二个目标是不查看热图。

我试过了：

if (map.getZoom() >9 {
    map.removeLayer (heatmapLayer);     
};

但它没有用。
你有什么建议吗？谢谢！

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Application - version 1.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.css" />
<link rel="stylesheet" href="style_p.css" />

<style type="text/css"> 
html, body, #map {
margin: 0;
margin-top: 0%;
width: 100%;
height: 100%;
};

</style>

</head>

<!-- Favicon -->
<link rel="icon" href="california.ico" />


<body>

<div id="map"></div>

<script src="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet-src.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="jquery.js"></script>
<script type="text/javascript" src="heatmap.js"></script>
<script type="text/javascript" src="heatmap-leaflet.js"></script>
<script type="text/javascript" src="sloopjohnb.js"></script>
<script src="google.js"></script>
<script src="leaflet_search.js"></script>

<script type="text/javascript" charset="utf-8">  

$(function() {


var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var base = new L.TileLayer('http://129.206.74.245:8001/tms_r.ashx?x={x}&y={y}&z={z}');
var ggl2 = new L.Google('SATELLITE');

var heatmapLayer;
heatmapLayer = L.TileLayer.heatMap({
radius: 10,
opacity: 0.8,
gradient: {
0.45: "rgb(0,0,255)",
0.55: "rgb(0,255,255)",
0.65: "rgb(0,255,0)",
0.95: "yellow",
1.0: "rgb(255,0,0)"
}
});


var Data1={
max: 1,
data: sloopjohnb 
};
heatmapLayer.addData(Data1.data);

var baseMaps = {
"Fond OSM": osm,
"Fond de carte de base": base,
"Photo. aérienne Google" : ggl2

};

var overlayMaps = {
'Heatmap': heatmapLayer
};

map = new L.Map('map', {
minZoom : 1,
maxZoom : 11,
boxZoom : true,
layers: [base, heatmapLayer]
});

var controls = L.control.layers(baseMaps, overlayMaps, {position: 'bottomright'});
controls.addTo(map);

map.addControl(L.control.search());
L.control.scale().addTo(map);

map.attributionControl.addAttribution('<a href="http://www.patrick wied.at/static/heatmapjs/">Heatmap.js</a>');
map.setView(new L.LatLng(39.291,-5.9765),2);


// Disparition de la heatmap en fct du zoom
map.on('zoomend', function () {
if (map.getZoom() > 9) {
map.removeLayer(heatmapLayer);
}
}); 

});

</script>

</body>
</html>

Answer 1

您确定要正确创建侦听器吗？

例如，这似乎应该在用户缩放时调用。所以类似的东西：

的被修改

map.on('zoomend', function () { if (map.getZoom() > 9 && map.hasLayer(heatmapLayer)) { map.removeLayer(heatmapLayer); } if (map.getZoom() < 9 && map.hasLayer(heatmapLayer) == false) { map.addLayer(heatmapLayer); } });

如果您只想根据缩放添加/删除图层，请不要在此处将其添加到图层控件中：

var controls = L.control.layers(baseMaps, overlayMaps, {position: 'bottomright'});

controls.addTo（地图）;
您必须确保在必要时进行添加/删除。尝试搞砸这个设置，看看你得到了什么。此外，关于Documentation
的使用，L.tileLayer写得很好

Answer 2

您可以使用leaflet-zoom-show-hide库执行此操作。缩放时会自动显示/隐藏图层。

zsh = new ZoomShowHide(map);
var marker1 = L.marker([50.096, 14.425]);
//                    minzoom, maxzoom
zsh.addLayer(marker1, 10, 13);
var marker2 = L.marker([50.076, 14.425]);
zsh.addLayer(marker2, 8, null);

Leaflet：如果缩放级别大于9，则删除图层

2 个答案: