【OpenLayers】 ol3熱力圖的實現 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>

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