OpenLayers绘制热力图 代码记录
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
做地图开发，往往需要掌握专题地图制作的技能。今天用OpenLayers6来做一个热力图的效果。
页面效果：
代码部分:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热力图</title>
<link rel="stylesheet" href="/css/ol.css">
<script src="/js/ol.js"></script>
<script src="heatmap.js"></script>
<script type="text/javascript">
window.onload = function () {map();}
</script>
<style>
#map{
position: fixed;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<form style="position: absolute;left: 200px;z-index: 999;color: blue;">
<label>半径大小</label>
<input id="radius" type="range" min="1" max="50" step="1" value="20" />
<label>模糊大小</label>
<input id="blur" type="range" min="1" max="50" step="1" value="25" />
</form> <div id="map"></div>
</body>
</html>
JavaScript部分：
/*
* heatmap.js
*/
var map1;
function map(){
map1 = new ol.Map({
target: 'map', //地图容器div的id
loadTilesWhileInteracting: true,
layers: [],
view: new ol.View({
center: [12622513, 2636878], //地图初始中心点
zoom: 9, //地图初始显示级别
}),
controls: ol.control.defaults({}).extend([])
}); // 开始做热力图相关功能
let blur = document.getElementById("blur");
let radius = document.getElementById("radius"); var wandaVector = new ol.source.Vector({
url: "/热力图/wanda.geojson",
format: new ol.format.GeoJSON()
});
//定义热力图图层
let vector = new ol.layer.Heatmap({
source: wandaVector,
blur: parseInt(blur.value, 10),
radius: parseInt(radius.value, 10),
}); // 模糊按钮的回调函数
let blurHandler = function (){
vector.setBlur(parseInt(blur.value, 10));
};
blur.addEventListener("input", blurHandler);
blur.addEventListener("change", blurHandler); // 半径按钮的回调函数
let radiusHandler = function () {
vector.setRadius(parseInt( radius.value, 10));
};
radius.addEventListener("input", radiusHandler);
radius.addEventListener("change", radiusHandler); //添加OSM地图作为底图
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
map1.addLayer(osm);
map1.addLayer(vector);
}
数据部分：wanda.geojson
{
"type": "FeatureCollection",
"name": "wanda",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "万达影城(增城万达广场店)", "lng": 113.821841, "lat": 23.281847, "address": "广州市增城区荔城街增城大道69号万达广场F4" }, "geometry": { "type": "Point", "coordinates": [ 113.821841, 23.281847 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(南沙万达广场店)", "lng": 113.538016, "lat": 22.800097, "address": "广州市南沙区双山大道3号万达广场4层" }, "geometry": { "type": "Point", "coordinates": [ 113.538016, 22.800097 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(万胜广场店)", "lng": 113.388917, "lat": 23.103397, "address": "广东省广州市海珠区新港东路1236号万胜广场五层" }, "geometry": { "type": "Point", "coordinates": [ 113.388917, 23.103397 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(融创茂店)", "lng": 113.240693, "lat": 23.431699, "address": "广州市花都区凤凰北路63号融创茂购物中心3楼" }, "geometry": { "type": "Point", "coordinates": [ 113.240693, 23.431699 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(广州番禺万达广场店)", "lng": 113.356523, "lat": 23.012651, "address": "广州市番禺区南村镇汉溪大道东389号番禺万达广场4层" }, "geometry": { "type": "Point", "coordinates": [ 113.356523, 23.012651 ] } },
{ "type": "Feature", "properties": { "name": "万达影城（广州海珠万达广场店）", "lng": 113.320582, "lat": 23.089375, "address": "广州市海珠区广州大道南978号601铺" }, "geometry": { "type": "Point", "coordinates": [ 113.320582, 23.089375 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(白云万达广场店)", "lng": 113.273067, "lat": 23.178271, "address": "广州市白云区云城东路503号万达广场娱乐楼三层" }, "geometry": { "type": "Point", "coordinates": [ 113.273067, 23.178271 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(盈熙广场店)", "lng": 113.293956, "lat": 23.07975, "address": "广州市海珠区江南大道南689-709号盈熙广场2层" }, "geometry": { "type": "Point", "coordinates": [ 113.293956, 23.07975 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(萝岗万达店)", "lng": 113.47294, "lat": 23.174362, "address": "广州市黄埔区开创大道与科丰路交汇处万达广场F4" }, "geometry": { "type": "Point", "coordinates": [ 113.47294, 23.174362 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(万科广场店)", "lng": 113.411133, "lat": 23.172774, "address": "广州市天河区华观路天河万科广场4层" }, "geometry": { "type": "Point", "coordinates": [ 113.411133, 23.172774 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(广州万达影城番禺奥园广场店)", "lng": 113.365178, "lat": 22.929663, "address": "广州市番禺区桥南街福德路281号奥园广场三楼万达影城" }, "geometry": { "type": "Point", "coordinates": [ 113.365178, 22.929663 ] } },
{ "type": "Feature", "properties": { "name": "万达影城(亚运城广场店)", "lng": 113.482628, "lat": 22.94697, "address": "广东省广州市番禺区石楼镇康体路43号亚运城广场3楼" }, "geometry": { "type": "Point", "coordinates": [ 113.482628, 22.94697 ] } },
{ "type": "Feature", "properties": { "name": "广州永和万达电影城(永和里享家店)", "lng": 113.574286, "lat": 23.201214, "address": "广东省广州市黄埔区新业路23号" }, "geometry": { "type": "Point", "coordinates": [ 113.574286, 23.201214 ] } },
{ "type": "Feature", "properties": { "name": "万达国际影城(广州新塘万达广场店)", "lng": 113.624387, "lat": 23.158623, "address": "广州市增城区新塘镇新福路9号新塘万达广场4F万达影城" }, "geometry": { "type": "Point", "coordinates": [ 113.624387, 23.158623 ] } },
{ "type": "Feature", "properties": { "name": "万达影城", "lng": 113.237061, "lat": 23.430949, "address": "广州市花都区蓝楹街融创茂" }, "geometry": { "type": "Point", "coordinates": [ 113.237061, 23.430949 ] } }
]
}
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
OpenLayers绘制热力图 代码记录的更多相关文章
- R语言绘图：在地图上绘制热力图
使用ggplot2在地图上绘制热力图 ######*****绘制热力图代码*****####### interval <- seq(0, 150000, 25000)[-2] #设置价格区间 n ...
- MVVM 代码记录
一.XML <Page x:Class="MVVM.MainPage" xmlns="http://schemas.microsoft.com/winfx/20 ...
- OpenLayers绘制图形
OpenLayers绘制图形 OpenLayers的显示构成由外向内为: ol.Map:地图对象. ol.layer.Vector:图层对象layer.Map含有多个layer,最终的显示效果是由 ...
- Echarts基于动态数据初步使用 及问题 代码记录.
ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...
- ArcGIS JS 3.x使用webgl绘制热力图
ArcGIS Js Api 3.x 热力图在数据量达到三万左右的时候,绘制速度不尽人意,数据量再大些,缩放时候就会很卡,非常影响客户体验. 参考了一下网上webgl热力图,能达到更流畅 ...
- OpenCV学习代码记录——人脸检测
很久之前学习过一段时间的OpenCV,当时没有做什么笔记,但是代码都还在,这里把它贴出来做个记录. 代码放在码云上,地址在这里https://gitee.com/solym/OpenCVTest/tr ...
- OpenCV学习代码记录—— Snake轮廓
很久之前学习过一段时间的OpenCV,当时没有做什么笔记,但是代码都还在,这里把它贴出来做个记录. 代码放在码云上,地址在这里https://gitee.com/solym/OpenCVTest/tr ...
- OpenCV学习代码记录——Hough线段检测
很久之前学习过一段时间的OpenCV,当时没有做什么笔记,但是代码都还在,这里把它贴出来做个记录. 代码放在码云上,地址在这里https://gitee.com/solym/OpenCVTest/tr ...
- OpenCV学习代码记录——轮廓(contour)检测
很久之前学习过一段时间的OpenCV,当时没有做什么笔记,但是代码都还在,这里把它贴出来做个记录. 代码放在码云上,地址在这里https://gitee.com/solym/OpenCVTest/tr ...
- Leaflet绘制热力图【转】
http://blog.csdn.net/giser_whu/article/details/51485871 时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了,le ...
随机推荐
- 探索C语言的内存魔法：动态内存管理解析
欢迎大家来到贝蒂大讲堂 养成好习惯,先赞后看哦~ 所属专栏:C语言学习 贝蒂的主页:Betty's blog 1. 静态开辟内存 通过前面的学习,我们已经掌握了两种开辟内存的方法,分别是: #incl ...
- CF1499
A 氵 B 如果 11 后出现了 00 就不行. C 枚举走几段. 横竖可以分开算. 一定是:除了费用最小的都是走长度 \(1\),费用最小的包揽剩下的. D \(c\cdot lcm(a,b)-d\ ...
- 思维分析逻辑 5 DAY
目录 如何分析 结构分析 对比分析 时间序列 相关性分析 机器学习 报告撰写 报告撰写三原则 标准化报告的组成 AB测试 AB测试流程 AB测试注意事项 如何分析 结构分析 对比分析 对比分析:所有的 ...
- ElementUI导入Excel文件
功能介绍 最近用ElementUI做管理系统需要把excel数据导入到系统内,我想这是一个很常见的功能点,把它分享出来,希望对大家有所帮助:) 实现效果 实现步骤 1.定义导入组件 <el-up ...
- OCP试题解析之053-16 MEMORY_TARGET
16.Setting which of the following initialization parameters enables Automatic Memory Management? A. ...
- maketrans和translate按规则一次性替换多个字符，用来替代replace
str_ = 'i love you' compiler_ = str_.maketrans('i l y', 'I L Y') print(str_.translate(compiler_))
- 利用wiile双层循环打印各种星星---day06
# 十行十列小星星 j = 0 #定义行数 while j<10: #当行数小于10的时候 i=0 #定义列 while i <10: #当列小于10的时候 print('*',end=' ...
- 亲测CentOS 8.2更换yum源报错Errors during downloading metadata for repository 'epel': - Status code解决办法
重点 提一件拉胯的事:别去参考阿里和华为云官方镜像上面的解决办法,本人试了几遍,没luan用.拉胯!!!!!!!! 报错具体信息 Errors during downloading metadata ...
- Long和int比较用==还是用equals
应该用==,因为equels会先比较类型,这样值一样的不同类型的数字就直接返回false啦.看源码吧. public boolean equals(Object obj) { System.out.p ...
- nebula-br local-store 模式，快速搭建主备集群实践
因为线上图数据库目前为单集群,数据量比较大,有以下缺点: 单点风险,一旦集群崩溃或者因为某些查询拖垮整个集群,就会导致所有图操作受影响 很多优化类但会影响读写的操作不好执行,比如:compact.ba ...