代码之家 › 专栏 › 技术社区 › SERG

如何在窗格中使用Spealet.js Heat?

leaflet

0

SERG · 技术社区 · 7 年前

我想展示/隐藏传单。( https://github.com/Leaflet/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”来隐藏热层,但我认为这不是一个好的实践。

谢谢。

1 回复 | 直到 7 年前

1

Dipen Shah 7 年前

似乎是最新的释放 Spealet-heat.js版本不支持使用 pane 选择权。你可以使用 测试版/开发版 如果需要,您可以通过在窗格上设置样式来实现您的需求。

查看以下代码:

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>

附笔 :您可以取消对代码的注释并使用脚本的发布版本,但它将不起作用,因为传单heat的当前发布版本在默认地图层上绘制画布。