openlayers4 入门开发系列之热力图篇(附源码下载)
前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:
内容概览
1.基于 openlayers4 实现地图热力图
2.源代码 demo 下载
本篇的重点内容是利用 openlayers4 实现热力图功能,效果图如下:
实现思路
- 热力图界面设计
//热力图
"<div style='height:25px;background:#30A4D5;margin-top:2px;width: 98%;margin-left: 3px;'>" +
"<span style='margin-left:5px;font-size: 13px;color:white;'>热力图</span>" +
"</div>" +
'<div id="heatmapFeatureLayer" style="padding:5px;">' +
'<div style="float:left;">' +
'<input type="checkbox" name="heatmapFeatureLayer" id="heatmap1" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +
'<label style="font-weight: normal;vertical-align: middle;margin: auto;">热力图</label>' +
'</div>' +
'</div>' +
- 热力图点击事件
//加载热力图
$("#heatmapFeatureLayer input").bind("click", function () {
if (this.checked) {
if(!bxmap.olHeatMap.isLoad){
bxmap.olHeatMap.Init(bmap);
} else{
bxmap.olHeatMap.showHeatMapLayer();
}
//图例面板显示
$("#map_tl").css("display","block");
$("#map_tl>img").attr('src', getRootPath() +"js/main/olHeatMap/lend_dz.png");
$("#map_tl>img").css("width","165px");
$("#map_tl>img").css("height","165px");
}
else {
bxmap.olHeatMap.hideHeatMapLayer();
//图例面板隐藏
$("#map_tl").hide();
}
})
热力图初始化以及核心代码实现
Init:function(bmap){
//加载热力图
this.map = bmap.getMap();
this.isLoad = true;
this.initHeatMapLayer(dz);
},
/**
* 初始化加载-热力图
*/
initHeatMapLayer:function(data){
var num = data.features.length;
if (num > 0) {
var features = new Array(num);
for (var i = 0; i < num; i++) {
var geo = data.features[i].geometry;
var coordinate = [geo.x, geo.y];
features[i] = new ol.Feature({
geometry: new ol.geom.Point(coordinate),
weight: data.features[i].attributes[field_dz]
});
}
this.loadHeatLayer(features);
}
},
loadHeatLayer:function(features){
var self = bxmap.olHeatMap;
self.layer = self.createHeatMap({ features: features, radius: self.radius, gradient: self.gradient1 });//创建热力图层
self.map.addLayer(self.layer);
self.map.getView().on('change:resolution', self.handleHeatMap);
//缩放至范围
self.map.getView().fit(self.layer.getSource().getExtent(), self.map.getSize()); },
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
openlayers4 入门开发系列之热力图篇(附源码下载)的更多相关文章
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列五地图卷帘(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- openlayers4 入门开发系列之风场图篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...
- Cesium专栏-热力图(附源码下载)
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- openlayers4 入门开发系列之地图导航控件篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之聚合图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
随机推荐
- codeforces 983B XOR-pyramid
题意: 定义一个函数f(a): 给出一个数组a,有q个询问,每次询问回答在l到r的区间内,连续子串的f函数的最大值. 思路: 画图,来自codeforces SheepRanger 由此图可知,f(l ...
- MyBatis系列目录--5. MyBatis一级缓存和二级缓存(redis实现)
转载请注明出处哈:http://carlosfu.iteye.com/blog/2238662 0. 相关知识: 查询缓存:绝大数系统主要是读多写少. 缓存作用:减轻数据库压力,提供访问速度. 1. ...
- 剑指Offer_编程题之重建二叉树
题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...
- Java 面试知识点解析(四)——版本特性篇
前言: 在遨游了一番 Java Web 的世界之后,发现了自己的一些缺失,所以就着一篇深度好文:知名互联网公司校招 Java 开发岗面试知识点解析 ,来好好的对 Java 知识点进行复习和学习一番,大 ...
- Python web(Django)连接Sql server
(开开心心每一天~ ---虫瘾师) Python Web(Django) 与SQL SERVRE的连接----Come QQ群:607021567(里面有很多开源代码和资料,并且python的游戏也有 ...
- hackathon活动复盘
复盘: hackathon技术创新型.理念创新落地型评委的一个评估点:在公司怎么落地的问题5分钟的demonstration,要进行测试,5分钟很快的:表达方式:common language,让人能 ...
- client,server,nginx 在使用keepAlive 专题
2. TCP keepalive overview In order to understand what TCP keepalive (which we will just call keepali ...
- 关于JQuery的技巧、易错点(连载中.....)
JQuery的诞生让我们对原生态的js代码变得陌生起来,不得不说,他真的是很强大,接下来博主就浅谈一下我对JQuery的一些认知和小tips. JQuery:他是一个JavaScript库,他将原生态 ...
- 映射内网ftp服务器到公网报错问题解决
这两天公司测试环境有个需求要让合作方通过ftp推送数据,一般内网环境是不会对公网开放ftp服务的,但是因为是临时需求就帮着搭了ftp服务,并且做了公网映射.ftp服务搭好之后在内网访问正常,但是在公网 ...
- 求第n个丑数
参考http://www.cppblog.com/zenliang/articles/131094.html 什么是因子:因子*因子=乘积数如果一个数是丑数,那么这个数是2,3,5的乘积的结果.比如: ...