Question

我正在尝试使用Leaflet.Heat在一个文档中绘制两个热图。但是，在第一张地图中，加热保持相对于地图框架的位置（即，当您放大/缩小地图时它不会移动）。第二个映射表现如预期。

两张地图应该是相同的，所以我错过了什么？

注意： html不是我特别熟悉的语言，因此我可能错过了一些显而易见的内容，此代码最终会以r markdown document

代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<body>
<!-- heatmap-->
<div id="map1">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<style>
  #map1 { width: 800px; height: 600px; }
  body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
  .ghbtns { position: relative; top: 4px; margin-left: 5px; }
  a { color: #0077ff; }
</style> 

<script>
  var map1 = L.map('map1').setView([47.5982623,-122.3415519], 12);
  var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map1);
  var heat = L.heatLayer([[47.5982623,-122.3415519, 20], [47.6182623,-122.3417519,50]]).addTo(map1);
</script>
</div>

Plotting another map

<div id="map2">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script> 
<style>
  #map2 { width: 800px; height: 600px; }
  body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
  .ghbtns { position: relative; top: 4px; margin-left: 5px; }
  a { color: #0077ff; }
</style> 

<script>
  var map2 = L.map('map2').setView([47.5982623,-122.3415519], 12);
  var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map2);
  var heat = L.heatLayer([[47.5982623,-122.3415519, 20], [47.6182623,-122.3417519,50]]).addTo(map2); 
</script>
</div>

</body>
</html>

更新 - 解决方案

经过大量的反复试验，删除了第二个

<script scr="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js

解决了它。我不知道为什么这是错误的原因，所以如果有人能在答案中提供解释我会乐意接受它。

Answer 1

正如您所知，您只需要一个传单脚本实例，您可以重复使用它来创建多个地图。您的插件也是如此：仅加载一次就足够了。通常，对于所有JavaScript库都是如此：不要多次加载同一个文件。因此，如果你还没有这样做，你应该摆脱第二次加载“leaflet-heat.js”。

发生的情况纯粹是由于JavaScript的指定行为。第二个传单加载会覆盖全局L变量。之前的L内容仍然存在于内存中，仍然与您的第一个map，tiles和heat相关联。这就是第一张地图仍在工作的原因（您可以使用键盘导航进行缩放和平移）。

然而，第一个热图不是（通过用鼠标拖动来防止平移）。这是因为Leaflet.heat插件没有按照模块定义技术（例如UMD）进行包装，所以它插入初始L（即加载时），同时使用当前{{ 1}}在交互期间（因此重新加载传单后的新值）。这种差异打破了它的算法并引入了意想不到的行为，就像你已经看到你的热图重新绘制但没有更新（值和位置）。第二个热图很好，因为它插入并使用L（重新加载的）的相同值。

但如果该插件在加载后没有使用L，或者正确引用它最初的内容，那么它就不会破坏。如您所见，多次加载相同的脚本文件可能会也可能不会引入错误，具体取决于算法的构建方式。 这正是模块定义技术发明的原因。

还有一个L.noConflict method可以解决这种情况，但是由于Leaflet.heat插件没有像上面所说的那样被包装成模块，所以在你的情况下也无济于事，所以即使你使用这个技巧，第一个或第二个热图都被打破了。

如果该插件得到纠正，一切都会神奇地起作用。可能有机会在插件GitHub回购中打开一个问题，并用Leaflet recommendation指出这种不合规（由Leaflet作者本人...... :-)）。

演示加载Leaflet和Leaflet.heat两次，但是第二个插件通过模块定义：http://jsfiddle.net/psraudy5/（所以它仍然需要调用L来恢复第一个热图行为）。

顺便说一下，不要忘记更正第二个脚本调用的结束标记：L.noConflict应为</s cript>。浏览器应该足够智能，以容忍这个错误。 Web技术可以容忍许多错误，但缺点是它们可以默默地引入错误，就像你的初始帖子一样。

HTML - 用传单绘制两个热图

1 个答案: