Question

我想在使用OpenLayer生成的地图上显示热图我尝试了两种不同的方法来获得热图，第一种。

<html><body>
<div id="demoMap"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("demoMap");
map.addLayer(new OpenLayers.Layer.OSM());
map.zoomToMaxExtent();
var layer = new OpenLayers.Layer.OSM();
heatmap = new OpenLayers.Layer.Heatmap("Heatmap Layer", map, layer, null,
 {visible: true, radius: 15},
 {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
var lon, lat, c;
for(var i=0; i<100; i++) {
 lon = i;
 lat = i;
 c = Math.floor(Math.random()*50);
 heatmap.addDataPoint(new OpenLayers.LonLat(lon, lat), c);
}

</script>
</body></html>

第二个

<html><body>
 <div id="demoMap"></div>
 <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 <script>
 var testData={
 max: 46,
 data: [{lat: 33.5363, lon:-117.044, count: 1}, {lat: 35.8278, lon:-78.6421, count: 1}]
 };
 layer = new OpenLayers.Layer.MapServer( "OpenLayers WMS",
 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}
 );
 map = new OpenLayers.Map("demoMap");
 map.addLayer(new OpenLayers.Layer.OSM());
 map.zoomToMaxExtent();
 heatmap = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, layer,
 {visible: true, radius:10}, {isBaseLayer: false, opacity: 0.3}
 );
 heatmap.setDataSet(testData);
 map.addLayer(heatmap);
  </script>
</body></html>

我只能在没有热图图层的情况下可视化地图。提前感谢您的任何建议。

Answer 1

正如您应该在Javascript控制台中看到的那样，问题是OpenLayers.Layer.Heatmap不存在。 github repo中也没有对它的引用。

您可以通过以下方式确认：

git clone https://github.com/openlayers/openlayers.git
grep -ri HeatMap openlayers/lib/OpenLayers

有一个很棒的heatmap example，但请注意这是在camptocamp沙箱中，需要一个自定义构建并包含几个额外的类，可以在这里看到：http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/lib/OpenLayers/Layer/Vector/其中一个是OpenLayers.Layer.Vector.Heatmap班。

在OpenLayer3中，热图是主干的一部分，请参阅this example。

Answer 2

Openlayers热图有2个库，另外在上一个答案中提到：

1）解决方案1：

Javascript代码＆amp;示例位于以下URL：
https://github.com/hoehrmann/openlayers-heatmap

代码片段：

var heat = new Heatmap.Layer("Heatmap");
heat.addSource(new Heatmap.Source(new OpenLayers.LonLat(9.434, 54.740)));
heat.addSource(new Heatmap.Source(new OpenLayers.LonLat(9.833, 54.219)));
...
map.addLayer(heat);
map.zoomToExtent(heat.getDataExtent());

2）解决方案2
下面的库包含Openlayers，Arcgis，googlemaps，传单的热图 http://www.java2s.com/Open-Source/Javascript_Free_Code/Canvas_Library/Download_heatmap_js_Free_Java_Code.htm

OpenLayers：简单的示例热图

2 个答案: