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

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

【OpenLayers】 ol3热力图的实现 Heatmap相关推荐

Vue+Openlayers创建热力图
Vue+Openlayers创建热力图,参考文档学习地址 https://www.jianshu.com/p/3cd6f6439512 openlayers: https://openlayers.o ...
openlayers3 ol3热力图 json
最近分配一个 gis地图的任务,要我弄个热力图巨坑啊,当时就是没啥想,后来想想. 后面弄完确实发现简单,为了方便广大网友也方便自己写在博客 <body> <div class= ...
如何用python画下三角矩阵的相关热力图？sns.heatmap详解
python如何绘制下三角矩阵的热力图,先看一下效果图加载必要的包 import pandas as pd import numpy as np import matplotlib.pyplot a ...
【数据可视化】Python 热力图（seaborn.heatmap）
Python数据可视化-热力图热力图 cmap center annot annot_kws fmt linewidths linecolor xticklabels yticklabels mas ...
Echart在Openlayers的应用-热力图
概述在前文中,有一篇文章讲述了Openlayers2结合Echart实现地图统计图,还以一篇文章讲述了结合heatmap.js实现Openlayers中热力图的展示.在本文,书接前文,讲述Openl ...
openlayers入门开发系列之热力图篇
本篇的重点内容是利用openlayers实现热力图功能,效果图如下: 实现思路热力图界面设计 //热力图 "<div style='height:25px;background:#3 ...
Openlayers 热力图和权重热力图
Openlayers 热力图和权重热力图 OpenLayers 教程 Openlayers 热力图和权重热力图在线示例 OpenLayers 教程 Openlayers在页面渲染数据有多种方式,数据 ...
Cesium实现热力图(含源代码)
对于热力图,在我们的GIS业务中经常用到,二维的leaflet.openlayers都有成熟的案例,对于Cesium,在进行热力图功能研发的时候发现前辈造好的轮子,由于刚处在Cesium学习阶段,对于 ...
geoserver发布热力图服务
一.背景项目需要热力图的效果,对比了各种结合cesium生成的热力图效果和数据量大的局限性,决定采用切片加载的方式加载热力图,原因如下: 1. 数据量大的话,从前端通过后台查询比较费时,3000条就 ...

【OpenLayers】 ol3热力图的实现 Heatmap

【OpenLayers】 ol3热力图的实现 Heatmap相关推荐

最新文章

热门文章