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 官网在线例子 ...
随机推荐
- 【多线程】-Thread
Thread介绍(实例化): Thread类可以创建和控制线程,Thread类的构造函数重载为接受ThreadStart和ParameterizedThreadStart类型的委托参数.微软官网给出的 ...
- MySql配置优化总结
当我们被人雇来监测MySQL性能时,人们希望我们能够检视一下MySQL配置然后给出一些提高建议.许多人在事后都非常惊讶,因为我们建议他们仅仅改动几个设置,即使是这里有好几百个配置项.这篇文章的目的在于 ...
- Hibernate中的常用API
1.Configuration 1.1 加载核心配置文件, 加载hibernate.properties时:Configuration configuration = new Configuratio ...
- API Gateway性能比较:NGINX vs. ZUUL vs.Cloud Gateway vs. Linkerd[译]
2018-03-04 15:07 联发科的反思 前几天拜读了 OpsGenie 公司(一家致力于 Dev & Ops 的公司)的资深工程师 Turgay elik 博士写的一篇文章(链接在 ...
- Linux kernel的中断子系统之(五):驱动申请中断API
返回目录:<ARM-Linux中断系统>. 总结:二重点区分了抢占式内核和非抢占式内核的区别:抢占式内核可以在内核空间进行抢占,通过对中断处理进行线程化可以提高Linux内核实时性. 三介 ...
- 通过VirtualBox安装Linux系统(CentOS7)
本文目的:创建虚拟系统.在windows系统中通过虚拟工具VirtualBox创建一个虚拟系统CentOS. 备注:(1)版本如下:VirtualBox-5.2.12-122591-Win 和Cent ...
- Re:从零开始的领域驱动设计
领域驱动的火爆程度不用我赘述,但是即便其如此得耳熟能详,但大多数人对其的认识,还只是停留在知道它的缩写是DDD,知道它是一种软件思想,或者知道它和微服务有千丝万缕的关系.Eric Evans对DDD的 ...
- 关于jquery日期控件及时间格式转换2017.05.27
开始时间:<input type="date" id="starttime" class="time"/>//data为日期控件 ...
- bootstrap模态框内容替换时会重新触发模态框?<a>标签到底有哪些特殊的特性呢?
segmentfault提问 这个问题我将bootstrap导航栏的<a>去除就解决了,那么问题来了,<a>标签到底有哪些特殊的特性呢? 主要属性href 链接href 这是一 ...
- Android 源码解析 之 setContentView
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41894125,本文出自:[张鸿洋的博客] 大家在平时的开发中,对于setCont ...