openlayer3熱力圖的實現 Heatmap


先來看下效果圖,由於保密原因,不能將項目的效果圖往上放,我就直接截了張官方示例的圖吧。順便也把網址給你們。
http://openlayers.org/en/v3.2.1/examples/

這里寫圖片描述

接下來我們來看該怎么實現(這里最重要的就是heatmap.kml文件了,就是通過解析他來生成熱力圖的。我把官方示例中的kml文件也down下來了)

var vector = new ol.layer.Heatmap({
source: new ol.source.Vector({
url: 'heatmap.kml', //重點
projection: 'EPSG:3857',
format: new ol.format.KML({
extractStyles: false
})
}),
radius: 10
});
vector.getSource().on('addfeature', function(event) {
// standards-violating <magnitude> tag in each Placemark. We extract it from
// the Placemark's name instead.
var name = event.feature.get('name');
var magnitude = parseFloat(name.substr(2));
event.feature.set('weight', magnitude - 5);
});

var raster = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner'
})
});

var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});

官方的kml(2012的地震數據源):主要就是通過coordinates這個標簽里的坐標來進行繪制熱力圖。那么問題來了,我們前端該怎么生成這個kml呢?如果數據是固定的,那么就按這個方式寫死它,然后讀取。如果數據不固定呢?那么就要去和后台都同志談個判了,由於數據不固定,所以必須需要后台同志來生成這個kml文件,然后你前端再去讀取來展示。至於后台同志怎么生成那就要靠你們自己了,哈哈。因為我也不會后台,只能幫你們到這里了。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<name>2012 Earthquakes, Magnitude 5</name>
<atom:author>
<atom:name>U.S. Geological Survey</atom:name>
</atom:author>
<atom:link href="http://earthquake.usgs.gov"/>
<Folder>
<name>Magnitude 5</name>
<Placemark id="2012 Jan 15 13:40:16.40 UTC">
<name>M 5.9 - 2012 Jan 15, SOUTH SHETLAND ISLANDS</name>
<magnitude>5.9</magnitude>
<Point>
<coordinates>-56.072,-60.975,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>

在最后我要強烈提醒你們一點,千萬不要打錯字母!因為我自己就是因為打錯一個字母導致熱力圖沒展示,然后我和一個后台同志找了一天才找到問題所在!大坑啊!!!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com