OpenLayers 教程

Openlayers在页面渲染数据有多种方式，数据量比较大的话，直接渲染会卡顿，热力图是一种解决方式，也是常用的数据展示方式。

之前用热力图展示的数据有：设备点位信息、虫害数量分布等。除了对点位的热力图渲染，往往需要加权展示，比如设备点监测的数量信息，设备监测数量多则颜色深，数量少则颜色浅。

Openlayers 中提供了热力图的示例，本示例主要演示加权之后的热力图以及关键参数（radius、blur）介绍。

官方示例（本人服务器镜像）

注意：热力图不能展示太多数据，万级就差不多了。

Openlayers 热力图和权重热力图

<html lang="en">
<head><meta charSet="utf-8"><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css"><style>/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */.map {height: 400px;width: 100%;float: left;}</style><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><script src="http://openlayers.vip/examples/resources/ol.js"></script><script src="./turf.min.js"></script><script src="./tiandituLayers.js"></script><title>OpenLayers example</title>
</head>
<body>
<h2>OpenLayers feature topology</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div><script type="text/javascript">var map = new ol.Map({// 地图容器target: 'map',// 地图图层，比如底图、矢量图等layers: [getIMG_CLayer(),getIBO_CLayer(),getCIA_CLayer(),],// 地图视野view: new ol.View({projection: "EPSG:4326",// 定位center: [115.67724700667199, 37.73879478106912],// 缩放zoom: 6,maxZoom: 18,minZoom: 1,})});// 点数组var features = [];addHeatMapLayer();// 热力图图层对象var heatMap;// 添加热力图function addHeatMapLayer(weight) {// 模拟数据for (let i = 1; i <= 15; i++) {var feature = getFeatureByWKT("POINT(" + (113 + (i / 10)) + " " + (35 + (i / 10)) + ")");var feature2 = getFeatureByWKT("POINT(" + (113 + ((i + 5) / 10)) + " " + (35 + (i / 10)) + ")");var feature3 = getFeatureByWKT("POINT(" + (113 + ((i + 9) / 10)) + " " + (35 + (i / 10)) + ")");// weight 取值范围为 0-1；推荐将数量最大的 feature 设置为1，其他的 feature 数量除以最大 feature。// 比如 feature1 的权重值为100，feature2 的权重值为80；那么将 feature 的 weight 设置为1，将 feature2 的权重值设置为 80/100=0.8weight && feature.set('weight', i / 15);weight && feature2.set('weight', i / 15);weight && feature3.set('weight', i / 15);features.push(feature)features.push(feature2)features.push(feature3)}// 创建热力图heatMap = new ol.layer.Heatmap({source: new ol.source.Vector({// 点数据features: features,}),// 热力图半径，数值越大，点越融合radius: 14,// 热力图聚焦，数值越小越聚焦，越大越散blur: 23,// 权重回调函数weight: function (fea) {var weight = fea && fea.get('weight') || 1;weight = parseFloat(weight);return weight;},});map.addLayer(heatMap);map.getView().fit(heatMap.getSource().getExtent(), {duration: 1,//动画的持续时间,callback: null,});}/*** @todo wkt格式数据转化成图形对象* @param {string} wkt   "POINT(112.7197265625,39.18164062499999)" 格式数据* @param {string|Projection} sourceCode 源投影坐标系* @param {string|Projection} targetCode 目标投影坐标系* @returns {Feature}*/function getFeatureByWKT(wkt, sourceCode, targetCode) {try {let view = map.getView();if (!wkt) {return null;}let format = new ol.format.WKT();let feature;feature = format.readFeature(wkt, {featureProjection: targetCode || view.getProjection(),dataProjection: sourceCode || view.getProjection(),});return feature;} catch (e) {console.log(e);return null;}}// 加权热力图function weight() {heatMap && map.removeLayer(heatMap);addHeatMapLayer(true);}// 调整半径function radiusFunc(this_) {heatMap.setRadius(parseInt(this_.value, 10));}// 调整焦点function blurFunc(this_) {heatMap.setBlur(parseInt(this_.value, 10));}</script><label>调节半径</label>
<input id="radiusInput" onchange="radiusFunc(this)" type="range" min="1" max="50" step="1" value="5"/>
<label>调节焦点</label>
<input id="blurInput" onchange="blurFunc(this)" type="range" min="1" max="50" step="1" value="15"/><button id="weight" onClick="weight()">加权热力图</button>
</body>
</html>

在线示例

Openlayers 热力图：Openlayers heatmap

Openlayers 热力图和权重热力图相关推荐

【Matlab】绘制热力图和三维热力图
文章目录 cdata = [1 2 3 4 5; 5 4 3 2 1; 1 2 3 4 5; 5 4 3 2 1; 1 2 3 4 5]; xvalues = {'1x', '2x', '3x', ' ...
R语言可视化热力图：相关性矩阵热力图、数据热力图实战
R语言可视化热力图:相关性矩阵热力图.数据热力图实战目录 R语言可视化热力图:相关性矩阵热力图.数据热力图实战
python 百度地图api热力图_【热力图】区域地图热力图，百度地图api
最简单的地图热力图,用的是百度的api,所以取经纬度的时候最好也用百度地图. 这里已经填好百度api的key了,但还是建议大家注册使用自己的key,因为有每日额度,超过访问次数了就不可用了. 效果展示 ...
python 日历热力图_pyecharts日历热力图
pyecharts是一个用于生成 Echarts 图表的类库 Echarts 是百度开源的一个数据可视化 JS 库 pyecharts中文文档 pyecharts已发布1.0版本,绘图部分代码已经重构 ...
python echarts 热力图_pyecharts日历热力图
pyecharts是一个用于生成 Echarts 图表的类库 Echarts 是百度开源的一个数据可视化 JS 库 pyecharts中文文档 pyecharts已发布1.0版本,绘图部分代码已经重构 ...
R语言绘图——组间差异箱线图图，小提琴图、聚类热力图、相关系数热力图
生物医学工程常用图箱线图:使用ggboxplot()函数来展示数据在多组间的差异小提琴图:使用ggviolin()函数来展示数据在多组间的比较热力图:pheatmap()展示聚类热图反映数据在多 ...
html制作热力图制作,首页热力图.html
首页热力图 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; ...
python相关系数热力图_python绘制热力图heatmap
本文实例为大家分享了python绘制热力图的具体代码,供大家参考,具体内容如下 python的热力图是用皮尔逊相关系数来查看两者之间的关联性. #encoding:utf-8 import numpy ...
java热力图分布_热力图-自有数据图层-示例中心-JS API 示例 | 高德地图API
热力图 html, body, #container { margin: 0; padding: 0; width: 100%; height: 100%; } 显示热力图关闭热力图 var map ...

Openlayers 热力图和权重热力图

Openlayers 热力图和权重热力图

OpenLayers 教程

Openlayers 热力图和权重热力图

在线示例

Openlayers 热力图和权重热力图相关推荐

最新文章

热门文章