本篇的重点内容是利用openlayers实现热力图功能,效果图如下:

实现思路

  • 热力图界面设计
//热力图
"<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());},/*** 创建热力图层* @method createHeatmap* @param  features 渲染热力图的要素集* @return Heatmap  返回热力图层*/createHeatMap:function(options){var vector = new ol.layer.Heatmap({source: new ol.source.Vector({//热力图数据来源
                features: options.features}),id: 'heat',extent: options.extent,weight: weightFunction,//设置权重,值在0-1之间
            gradient: options.gradient,blur: 15,//默认15radius: options.radius || 8//默认8
        });/**设置权重*/function weightFunction(feature) {var weight = feature.get('weight');weight = parseFloat(weight);//weight = parseFloat(weight) / 10;return weight;}return vector;},
……

openlayers入门开发系列之热力图篇相关推荐

  1. openlayers入门开发系列之地图属性查询篇

    本篇的重点内容是利用openlayers实现地图属性查询功能,效果图如下: 实现思路: 模糊查询点击事件 //模糊查询 $("#swatchQuery").bind("c ...

  2. vscode中安装webpack_leaflet-webpack 入门开发系列一初探篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址w ...

  3. openlayers4 入门开发系列之风场图篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. openlayers入门开发系列之地图工具栏篇

    本篇的重点内容是利用openlayers实现地图工具栏功能,包括地图缩放.移动.地图量算.地图打印.清空.全屏.鹰眼.比例尺.地图坐标显示等,效果图如下: 部分核心代码如下: 地图缩放 地图移动 地图 ...

  5. openlayers入门开发系列之图层控制

    本篇的重点内容是利用openlayers实现地图图层控制功能,效果图如下: 部分核心代码如下: 页面引用ztree插件 图层管理器界面布局 图层管理器初始化js LayerSwitcher类定义 详细 ...

  6. openlayers4 入门开发系列之地图工具栏篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. arcgis开发 多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)...

    你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...

  8. 克里金插值详细步骤_openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇(附源码下载)...

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列之船讯篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

最新文章

  1. elasticsearch 客户端工具_elasticsearch初使用
  2. sonarqube使用教程
  3. 造成java.io.IOException: Stream Closed异常的代码
  4. 百度小程序opencard书法字典名家书法等测试日志记录
  5. 【Linux】一步一步学Linux——dnsdomainname命令(174)
  6. 九齐NY8B072A单片机使用笔记(一)TIMER0定时器
  7. Java核心篇之Java锁--day2
  8. 如何将手机号码批量导入手机通讯录
  9. 解决mysql1336
  10. Pandas:写了一个简易的销量异常检测器
  11. 典故:一文钱难倒英雄汉
  12. 基于springboot的医院体检预约管理系统
  13. 调试基础知识0(串口调试助手对比 丁丁 大傻 友善)
  14. Varscan2 Call snp_indel
  15. 一张属于程序员的图片
  16. C语言——百钱百鸡问题分析(最优解法)
  17. 2022-2028全球与中国ABF基板市场现状及未来发展趋势
  18. VC++ CStdioFile文本文件读写
  19. java/php/net/python长途汽车站售票系统设计
  20. 文件锁-FileLock

热门文章

  1. javascript系统系列:浅析js中的浏览器循环事件(eventLoop)
  2. JavaScript运算符的优先级(案例讲解)
  3. PCA与SVD的数学原理
  4. python兔子和獾_少儿编程分享:手把手教你用PYTHON编写兔獾大作战(三)
  5. Snabbdom(虚拟dom)
  6. 6-9 统计个位数字 (15 分)
  7. 没串口怎么操作核心板的Linux?ADB(以点灯为例)
  8. java导入lang_为什么java.lang不需要导放
  9. c++ double 只输出五位_C/C++编程笔记:C语言入门知识点(一),请收藏C语言最全笔记...
  10. oracle rlw,Oracle数据库终于支持R语言 发力数据挖掘