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提供的earthquake example，但其中99％处理KML文件，因为我需要这个应用程序在本地主机服务器上脱机运行，我不能这样做。我试图在没有成功的情况下取得成功，其中包括：

       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>

但它仍然无效，只有地图，没有图层。这是我通过this one等示例找到的方法。 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 个答案: