openlayer3热力图的实现 Heatmap
来源:互联网 发布:win7 443端口服务 编辑:程序博客网 时间:2024/05/21 15:05
先来看下效果图,由于保密原因,不能将项目的效果图往上放,我就直接截了张官方示例的图吧。顺便也把网址给你们。
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>
在最后我要强烈提醒你们一点,千万不要打错字母!因为我自己就是因为打错一个字母导致热力图没展示,然后我和一个后台同志找了一天才找到问题所在!大坑啊!!!
阅读全文
1 0
- openlayer3热力图的实现 Heatmap
- Openlayer结合heatmap热力图的实现
- 借用heatmap.js热力图实现
- Heatmap 热力图(1)
- Leaflet+heatmap实现离线地图加载和热力图应用
- Leaflet+heatmap实现离线地图加载和热力图应用
- js使用heatmap热力图的一些操作
- heatmap.js 一个用canvas画热力图的利器
- heatmap.js 一个用canvas画热力图的利器
- heatmap.js 一个用canvas画热力图的利器
- heatmap.js 一个用canvas画热力图的利器
- Openlayers中热力图的实现
- heatmap.js调用百度地图api做热力图
- python/folium绘制中国人口数量热力图(HeatMap)
- Cesium热力图实现
- 基于HTML5实现的Heatmap热图3D应用
- SuperMap超图的热力图
- Echarts数据可视化series-heatmap热力图,开发全解+完美注释
- 单点登录简介
- 170614 杂项-.NET平台基本概念
- Linux等待队列waitqueue
- 89C52单片机之流水灯中断
- 数据结构—栈的应用
- openlayer3热力图的实现 Heatmap
- Manifest merger failed with multiple errors, see logs问题处理
- 记录C++学习bug历程
- Android7.0中文文档(API)-- Toolbar
- java集合类的一些内建函数分析
- 单链表习题(进阶二)——复杂链表复制
- 使用连接mysql的jdbc驱动最新版引发的问题
- android Service发送广播
- sqlite3用法