openlayers入门开发系列之热力图篇
本篇的重点内容是利用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入门开发系列之热力图篇相关推荐
- openlayers入门开发系列之地图属性查询篇
本篇的重点内容是利用openlayers实现地图属性查询功能,效果图如下: 实现思路: 模糊查询点击事件 //模糊查询 $("#swatchQuery").bind("c ...
- vscode中安装webpack_leaflet-webpack 入门开发系列一初探篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址w ...
- openlayers4 入门开发系列之风场图篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers入门开发系列之地图工具栏篇
本篇的重点内容是利用openlayers实现地图工具栏功能,包括地图缩放.移动.地图量算.地图打印.清空.全屏.鹰眼.比例尺.地图坐标显示等,效果图如下: 部分核心代码如下: 地图缩放 地图移动 地图 ...
- openlayers入门开发系列之图层控制
本篇的重点内容是利用openlayers实现地图图层控制功能,效果图如下: 部分核心代码如下: 页面引用ztree插件 图层管理器界面布局 图层管理器初始化js LayerSwitcher类定义 详细 ...
- openlayers4 入门开发系列之地图工具栏篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- arcgis开发 多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)...
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
- 克里金插值详细步骤_openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇(附源码下载)...
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之船讯篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
最新文章
- elasticsearch 客户端工具_elasticsearch初使用
- sonarqube使用教程
- 造成java.io.IOException: Stream Closed异常的代码
- 百度小程序opencard书法字典名家书法等测试日志记录
- 【Linux】一步一步学Linux——dnsdomainname命令(174)
- 九齐NY8B072A单片机使用笔记(一)TIMER0定时器
- Java核心篇之Java锁--day2
- 如何将手机号码批量导入手机通讯录
- 解决mysql1336
- Pandas:写了一个简易的销量异常检测器
- 典故:一文钱难倒英雄汉
- 基于springboot的医院体检预约管理系统
- 调试基础知识0(串口调试助手对比 丁丁 大傻 友善)
- Varscan2 Call snp_indel
- 一张属于程序员的图片
- C语言——百钱百鸡问题分析(最优解法)
- 2022-2028全球与中国ABF基板市场现状及未来发展趋势
- VC++ CStdioFile文本文件读写
- java/php/net/python长途汽车站售票系统设计
- 文件锁-FileLock
热门文章
- javascript系统系列:浅析js中的浏览器循环事件(eventLoop)
- JavaScript运算符的优先级(案例讲解)
- PCA与SVD的数学原理
- python兔子和獾_少儿编程分享:手把手教你用PYTHON编写兔獾大作战(三)
- Snabbdom(虚拟dom)
- 6-9 统计个位数字 (15 分)
- 没串口怎么操作核心板的Linux?ADB(以点灯为例)
- java导入lang_为什么java.lang不需要导放
- c++ double 只输出五位_C/C++编程笔记:C语言入门知识点(一),请收藏C语言最全笔记...
- oracle rlw,Oracle数据库终于支持R语言 发力数据挖掘