openlayers热力图

最新推荐文章于 2024-01-31 22:51:03 发布
最新推荐文章于 2024-01-31 22:51:03 发布
阅读量7.4k 收藏 19
点赞数 1
分类专栏： openlayers GIS 文章标签： 热力图 openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaoyang89111/article/details/91411406
版权

直接上代码： 

<!DOCTYPE html>
<html>
<head>
<title>Earthquakes heatmap</title>
<script src="js/jquery.js"></script>
<link rel="js/ol.css" type="text/css">
<script src="js/ol-debug.js"></script>

</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
  <div class="span4">
    <form>
      <label>radius size</label>
      <input id="radius" type="range" min="1" max="50" step="1" value="5"/>
      <label>blur size</label>
      <input id="blur" type="range" min="1" max="50" step="1" value="15"/>
    </form>
  </div>
</div>

</div>

js代码 

    //底图
    var raster = new ol.layer.Tile({
      source: new ol.source.Stamen({
        layer: 'toner'
      })
    });
    var map = new ol.Map({
      layers: [raster],
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });
	
    var blur = document.getElementById('blur');
    var radius = document.getElementById('radius');
	blur.addEventListener('input', function() {
        vector.setBlur(parseInt(blur.value, 5));
      });

    radius.addEventListener('input', function() {
	  vector.setRadius(parseInt(radius.value, 10));
    });
	//矢量图层 获取gejson数据
    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(heatData,{
                                                    dataProjection : 'EPSG:4326',
                                                    featureProjection : 'EPSG:3857'
                                                  })
    });
    // Heatmap热力图             
    var vector = new ol.layer.Heatmap({
      source: vectorSource,
      blur: parseInt(blur.value, 10),
      radius: parseInt(radius.value, 10),
    });
    map.addLayer(vector);

其中的 heatData为热力图geojson数据，如下（为了篇幅删除大部分数据）：

var heatData = {
type: "FeatureCollection",
features: [
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 149.042007, -35.349998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -71.660004, -35.423000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 174.315994, -35.721001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -64.288002, -36.627998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -73.055000, -36.826000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 174.761002, -36.903999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 176.154999, -37.700001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 175.272995, -37.776001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 145.075104, -37.852959 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 178.016006, -38.659000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -62.274067, -38.725273 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -72.575996, -38.729000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -68.283333, -38.944908 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 174.078003, -39.070000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 176.841003, -39.639999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 175.035004, -39.930000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -62.995026, -40.815025 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 173.248001, -41.297001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -72.952003, -41.474998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 171.207001, -42.472000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 147.291000, -42.851002 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -65.099998, -43.299999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 172.638000, -43.523998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -72.702003, -45.402000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -67.500000, -45.830002 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 170.473999, -45.883999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 168.373001, -46.412998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -69.228996, -51.625000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -57.848999, -51.701000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -70.934654, -53.166161 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -68.297997, -54.792000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 129.054993, 35.158001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 23.331871, 42.707264 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -15.598000, 11.864000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 147.147949, -9.497187 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -74.080513, 4.630220 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 12.550000, 55.720001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 103.831787, 1.268858 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 126.935249, 37.542351 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 16.320986, 48.202118 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -58.449841, -34.622501 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 4.368000, 50.837002 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 96.826080, -12.157536 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -2.973783, 43.282158 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 126.907997, 35.153000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 128.591003, 35.863998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 100.310997, 5.364000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 165.500000, -21.500000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 166.916702, -0.516700 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 51.448002, 35.773998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 49.700001, 34.083332 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -5.316700, 35.883301 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 130.933304, 33.950001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 136.761993, 35.410000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 77.216751, 28.568726 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 35.225220, 31.773746 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 17.934000, 62.633999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 15.638000, 58.402000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 14.178000, 57.785999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 44.233002, 46.266998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 90.374001, 22.702999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 159.983002, 59.083000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 114.532997, 51.167000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 104.699997, 52.833000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 100.282997, 64.333000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 86.217003, 69.449997 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 69.000000, 61.016998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 54.667000, 59.016998 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 53.033001, 67.616997 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 44.783001, 43.233002 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 132.899994, 48.817001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 34.333000, 61.783001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 32.000000, 63.000000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 23.708000, 70.677002 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -53.553001, 69.244003 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -133.705994, 68.365997 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 64.040001, 67.504997 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -21.895000, 64.135002 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -149.897995, 61.202999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -66.810997, 54.800999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -130.309998, 54.320999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -2.971000, 53.423000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 22.311001, 48.622002 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 100.123001, 46.692001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -66.068001, 45.264000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 38.960999, 45.036999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 34.104000, 44.962002 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 42.063000, 44.282001 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 71.371002, 42.889000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 109.807999, 40.659000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 23.653000, 37.944000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 39.173000, 21.542999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -96.123001, 19.184999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 42.507999, 18.219999 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -15.978000, 18.084000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 74.843002, 12.869000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -10.797000, 6.301000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 7.068000, 6.215000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 9.454000, 0.391000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 15.299000, -4.321000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 34.743999, -4.817000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -77.044998, -12.082000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -57.283001, -25.406000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -71.332001, -29.959000 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 46.659145, 61.259964 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 174.807220, -41.334835 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 86.599289, 67.493851 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 177.480255, 64.755272 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 17.991455, 59.331165 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 76.280418, 9.970155 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -60.281559, 53.295090 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -2.674783, 42.850159 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ -68.541466, 63.755356 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 51.141739, 43.690456 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 20.412556, 44.799683 ] } }
,
{ "type": "Feature", "properties": { }, "geometry": { type: "Point", "coordinates": [ 19.400000, 42.500000 ] } }

]
};

 

GISER_A
关注
  • 1
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+OpenLayers7入门到实战：OpenLayers7实现点聚集热力图效果
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
02-29 96
本章介绍如何使用OpenLayers7在地图上实现热力图效果。热力图可以直观的把不同区域业务数据聚集数量以不同颜色区块呈现。
Openlayers 热力图和权重热力图
linzi19900517的博客
05-14 4581
Openlayers在页面渲染数据有多种方式，数据量比较大的话，直接渲染会卡顿，热力图是一种解决方式，也是常用的数据展示方式。
openLayers2热力图.zip
08-30
openlayers2还没将heatmap类加入，到openlayers3采用。但是考虑到浏览器的兼容性兼容到更低本版的IE，所以这里采用openlayers2版本开发gis。想要进行热力图开发就必须先对其扩展 （heatmap-openlayers.js）。下载直接可用
Openlayers 生成热力图
02-10
Openlayers 生成热力图 heatmap
openlayers热力图用heatmap.js
07-25
openlayers热力图用heatmap.js
openlayers3 热力图
06-30
openlayers3 热力图
【WebGIS初学到入职】（七）用OpenLayers绘制热力图
ReBeX
10-11 3015
一、前言 做地图开发，往往需要掌握专题地图制作的技能。今天就继续用OpenLayers6来做一个热力图的效果吧。 来自——官网实例：EarthquakesHeatmap 二、开始 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
openlayers学习——15、openlayers加载热力图
记录生活点滴
08-12 1562
openlayers学习——15、openlayers加载热力图
openlayer展示热力图
~~
08-03 2479
一，安装openlayer cnpm i -S ol 二， <!-- home --> <template> <div class="home"> <div class="width:500px;height:300px"> <span>blur</span> <el-slider v-model="option_heatmap.blur" show-input></el-
openlayers实现热力图效果
大家好，我是 ed.
09-08 1714
这个在之前的博客里面分享过了，再稍微说一下。先说效果，最终实现的效果就是下面这个样子的，如果需要的话就接着看，如果不是这个样子就不要看了。
OpenLayers6入门，OpenLayers6实现点聚集热力图效果
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-13 933
热力图可以直观的把不同区域业务数据聚集数量以不同颜色区块呈现。本章使用OpenLayers实现热力图效果。
基于openLayers2所写的热力图
07-21
本人用的是openLayers2地图引擎,所写的一个简单的热力图或者叫热点图,如果无法运行请正确配置js路劲
vue3+ts+openlayers实现热力图
weixin_59855825的博客
01-05 554
随着地理信息系统（GIS）的发展，热力图成为了一种常见的数据可视化方式，用于展示密度或者权重分布。OpenLayers 提供了强大的地图功能和丰富的插件，其中之一就是热力图插件。接下来，你需要定义热力图的数据源，可以是本地的 JSON 文件，也可以是远程的数据接口。OpenLayers 的热力图插件是一个基于 Canvas 的图层，它可以根据提供的数据创建热力图效果。热力图插件可以根据权重值的不同，在地图上呈现不同的颜色和强度。热力图是一种有效的数据可视化方式，可以帮助我们更好地理解数据的分布和权重。
openlayers：实现添加热力图（附完整源码）
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 93
openlayers：实现添加热力图（附完整源码）
openlayers 入门（15）热力图
qq_53079432的博客
10-16 247
热力图 要使用Heatmap类
openlayers6【十九】vue HeatmapLayer热力图层实现热力图效果详解
@必意玲
07-20 8175
文章目录1. 写在前面2. Heatmap 类实现热力图2.1 Heatmap 参数2.2 实现热力图3. 完整代码4. 添加删除map图层的方法5. 热力图自身的get，set方法 1. 写在前面 我们主要看热力图的效果，区域绘制效怎么设置详细内容可以访问 openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解 在 openlayers 中，图层是使用 layer 对象表示的，主要有 WebGLPoints Layer、热度图(HeatMap L
openlayers3 ol3热力图 json
会飞的程序猿的博客
06-30 5764
最近分配一个 gis地图的 任务，要我弄个热力图巨坑啊，当时就是没啥想，后来想想。 后面弄完 确实发现简单，为了方便广大网友 也方便自己写在博客                     radius size             blur size             //底图 var raster = ne
openlayers绘制图形后清空图形要素失败
technician_ing的博客
03-21 1007
对draw进行监听，绘制结束后清空图层要素。但是实际上并没有达到想要的效果，这是因为监听事件是一个异步的过程，在draw没有完成之前，就已经执行了clear操作。clear设置为异步操作后，会和监听事件一起作为异步事件进行异步队列排队。并且监听事件优于clear操作，这样即使设置的延迟时间为0，绘制结束后也会清空图层要素。对图层添加要素事件进行监听，等待添加要素完成之后再执行操作。解决方案一：将clear设置为异步代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值