Question

我想显示/隐藏Leaflet.heat（https://github.com/Leaflet/Leaflet.heat）层，新窗格应该以某种方式执行此操作。但是，Leaflet.heat上是否支持窗格？该代码不起作用。

var heatPane = map.createPane("heat");
var heat = L.heatLayer([], {
  radius: 10,
  maxZoom: 6,
  pane: "heat"
}).addTo(map);
heat.addLatLng([44,7])
heat.addLatLng([44,7])

UPD：我可以使用heat._heat._canvas.style.display =“ none”隐藏热层，但是我认为这不是一个好习惯。

谢谢。

Answer 1

leaflet-heat.js的当前发行版版本似乎不支持使用pane选项。您可以根据需要使用 beta / development 版本，只需在窗格中设置样式即可满足要求。

查看以下代码：

document.onreadystatechange = function(e){
  if(document.readyState != 'complete') return;

  var map = L.map('map').setView([44, 7], 12);
  var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {}).addTo(map);
  var heatPane = map.createPane("heat");
  var heat = L.heatLayer([[44, 7], [44, 7], [44, 7], [44, 7]], {
    radius: 10,
    maxZoom: 6,
    pane: "heat"
  }).addTo(map);

  document.getElementById("btnShow").onclick = function(){
    heatPane.style.display = 'block';
  };

  document.getElementById("btnHide").onclick = function(){
    heatPane.style.display = 'none';
  };
};

#map {
  width: 400px;
  height: 400px;
}

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.3.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.3.4/leaflet.js"></script>
<!-- <script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script> -->
<script src="http://leaflet.github.io/Leaflet.heat/src/HeatLayer.js"></script>
<script src="http://mourner.github.io/simpleheat/simpleheat.js"></script>

<div>
  <button id="btnHide">Hide</button>
  <button id="btnShow">Show</button>
</div>
<div id="map"></div>

PS ：您可以取消注释代码并使用脚本的发行版，但由于当前的letlet-heat发行版在默认地图图层上绘制画布，因此无法正常工作。

如何在窗格中使用leaflet.js heat？

1 个答案: