gpt4 book ai didi

leaflet - 宣传单: remove layer if zoom level greater than 9

转载 作者:行者123 更新时间:2023-12-04 16:34:18 25 4
gpt4 key购买 nike

我在Leaflet上建立了一个热图。
我的第一个目标是打开 map 时查看热图。第二个目标是,如果缩放级别大于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>

最佳答案

确定要正确创建监听器吗?

例如,当用户缩放时,似乎应该调用它。所以像这样:

编辑

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(map);
您只需要确保在必要时进行添加/删除即可。尝试弄乱此设置,看看会得到什么。另外,关于 Documentation的用法, L.tileLayer写得很好

关于leaflet - 宣传单: remove layer if zoom level greater than 9,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23017318/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com