如何從OpenLayers 3中預先存在的矢量圖層輕鬆創建熱圖圖層？

之類的標題說我有，我需要轉成熱圖一的OpenLayers地圖上的點的矢量。我已經有了下面的代碼（這對我來說工作得很好），但我需要添加數千個點（在不同的數據文件中），並且能夠使用密度/熱圖來可視化它。它目前的狀態是一張簡單的開放式街道地圖，在世界地圖上繪製了一層位置！我會張貼圖片，但聲譽規則...如何從OpenLayers 3中預先存在的矢量圖層輕鬆創建熱圖圖層？

<!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

我已經嘗試了各種方法，試圖得到一個熱圖生產，但unfortunaetly我是在Javascript/HTML方面缺少一些東西。我已經看過了在線的例子包括提供的OpenLayers但其中99％的處理KML文件，因爲我需要這個應用程序到本地主機服務器上脫機運行，我不能那樣做的earthquake example。我嘗試這個沒有成功，除其他擺擺手：

 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不是構造函數」，但我不知道如何以其他方式做到這一點。請halp，謝謝！

來源

2015-06-08 trevinator

不能混搭OL2（例如'OpenLayers.Layer.Vector'）和OL3（如：'ol.layer.Heatmap '）代碼一起。此外，他說*「嘗試這個沒有成功」 *這裏不削減它這樣：你需要描述它是如何失敗的確切的症狀，包括儘可能多的相關詳細越好（如控制檯輸出，調試器調查結果，等。） – kryger

@kryger \t 行，所以我做了一些更多的，基本上包括我轉換爲OL3和使用GeoJSON的方法所以現在我的代碼看起來像它在編輯做以上。我看到的一個主要問題是Firebug的說：「類型錯誤：ol.source.GeoJSON不是構造函數」但我這樣做的唯一方式，我在這樣一個例子中看到：HTTP：//acanimal.github .io/thebookofopenlayers3/chapter02_06_heatmap_layer.html如果我創建了一個變量並將其用作熱圖圖層的源，它會更好嗎？ – trevinator

更改此：

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() 
    }),

來源

2016-05-05 14:20:39 jojojohn

如何從OpenLayers 3中預先存在的矢量圖層輕鬆創建熱圖圖層？

回答

相關問題