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

在最后我要强烈提醒你们一点，千万不要打错字母！因为我自己就是因为打错一个字母导致热力图没展示，然后我和一个后台同志找了一天才找到问题所在！大坑啊！！！

转载自：https://blog.csdn.net/IT429/article/details/73277517