如何从OpenLayers 3中预先存在的矢量点图层轻松创建热图图层？

Question

就像标题所说的那样，我在OpenLayers地图上有一个点向量，需要将其转换为热图。 我已经在下面有了这段代码（对我来说很好用），但是我需要添加数千个点（在另一个数据文件中），并能够使用密度/热图可视化它。 它的当前状态是一张简单的开放式街道地图，在世界地图上绘制了一层位置！ 我会发布图片，但信誉规则...

<!DOCTYPE HTML>
<html>
<head>
<title>AIS Map Template</title>

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
  function init() {
    map = new OpenLayers.Map("mapdiv");
    var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
//  ADD POINTS TO A LAYER
    var pois = new OpenLayers.Layer.Vector("Ships", 
    {
    projection: new OpenLayers.Projection("EPSG:4326"),
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol:   new OpenLayers.Protocol.HTTP(
        {
        url:        "./AISdecoded.txt",
        format:     new OpenLayers.Format.Text(
            {
            extractStyles: true,
            extractAttributes: true
            })
        })
    });
//  ADD POINTS LAYER TO MAP
map.addLayer(pois);

var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
    map.addControl(layer_switcher);
    var lonlat = new OpenLayers.LonLat(0,0).transform(
        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
      );

    var zoom = 1;


    map.setCenter(lonlat, zoom);
  }
</script>

<style>
#mapdiv { width:900px; height:600px; }
div.olControlAttribution { bottom:3px; }
</style>

</head>

<body onload="init();">
<p>AIS Map Data</p>
<div id="mapdiv"></div>
</body>
</html>

测试数据如下所示：

lat lon title   description icon    iconSize    iconOffset  
49.4756 0.13138 227006760   Navigation Status: 0    ship_sea_ocean.png  16,16   -8,-8   
51.2377 4.41944 205448890   Navigation Status: 0    ship_sea_ocean.png  16,16   -8,-8

我尝试了各种方法来尝试生成热图，但不幸的是，在Javascript / HTML方面我有点缺乏。 我已经看过在线示例，包括OpenLayers提供的地震示例，但是其中有99％处理KML文件，并且由于我需要该应用程序在localhost服务器上脱机运行，所以我不能这样做。 我尝试了此尝试，但没有成功，其中包括：

       var heatmapLayer = new ol.layer.Heatmap({
            source: new OpenLayers.Layer.Vector("Ships", 
    {
    projection: new OpenLayers.Projection("EPSG:4326"),
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol:   new OpenLayers.Protocol.HTTP(
        {
        url:        "./AISdecoded.txt",
        format:     new OpenLayers.Format.Text(
            {
            extractStyles: true,
            extractAttributes: true
            })
        })
    }),
            opacity: 0.9
        });

        // Create a tile layer from OSM
        var osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        // Create the map with the previous layers
        var map = new ol.Map({
            target: 'map',  // The DOM element that will contains the map
            renderer: 'canvas', // Force the renderer to be used
            layers: [osmLayer, heatmapLayer],
            // Create a view centered on the specified location and zoom level
            view: new ol.View({
                center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
                zoom: 4
            })
        });

我觉得这比我想象的要容易得多，但是我已经尝试这样做大约一个星期了，我的耐心已接近尾声。 如果您知道该怎么做，那就太好了！ 但是，如果您不这样做，您能否将我推向正确的方向？ 非常感谢任何帮助，谢谢！

编辑

好的，所以我将代码完全编辑为OL3，并使用了geoJSON方法。 现在看起来像这样：

<!DOCTYPE HTML>
<html>
 <head>
<title>AIS Map Template</title>
<script src="http://openlayers.org/en/v3.5.0/build/ol.js" type="text/javascript"></script>
<link rel='stylesheet' href='http://ol3js.org/en/master/css/ol.css'>
<script>
  function init() {

var vector = new ol.layer.Heatmap({
  source: new ol.source.GeoJSON({
url: './AISdecoded.geojson',
projection: 'EPSG:3857'
  }),
    opacity: .9
 });

    var osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        // Create the map with the previous layers
        var map = new ol.Map({
            target: 'map',  // The DOM element that will contain the map
            renderer: 'canvas', // Force the renderer to be used
            layers: [osmLayer,vector],
            // Create a view centered on the specified location and zoom level
            view: new ol.View({
                center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
                zoom: 4
            })
        });
  }
</script>

<style>
#map { width:900px; height:600px; }
div.olControlAttribution { bottom:3px; }
</style>

</head>

 <body onload="init();">
  <p>AIS Map Data</p>
  <div id="map"></div>
 </body>
 </html>

但是它仍然无法正常工作，只有地图，没有图层。 这就是我通过类似这样的示例找到方法的方法。 Firebug说“ TypeError：ol.source.GeoJSON不是构造函数”，但我不知道该如何做。 请暂停，谢谢！

Answer 1

更改此：

var vector = new ol.layer.Heatmap({
source: new ol.source.GeoJSON({
url: './AISdecoded.geojson',
projection: 'EPSG:3857'
}),

至：

 var vector = new ol.layer.Heatmap({
   source: new ol.source.Vector({
   url: './AISdecoded.geojson',
   projection: 'EPSG:3857',
   format: new ol.format.GeoJSON()
   }),

如何从OpenLayers 3中预先存在的矢量点图层轻松创建热图图层？

问题描述

1 个解决方案

解决方案1
1 2016-05-05 14:20:39

如何从OpenLayers 3中预先存在的矢量点图层轻松创建热图图层？

问题描述

1 个解决方案

解决方案1 1 2016-05-05 14:20:39

解决方案1
1 2016-05-05 14:20:39