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 ...

随机推荐

[刺客伍六七&黑客] 魔刀千刃evilblade的使用手册与开源
0x00 前言 2023.8.15 夜里非常欢迎使用我的魔刀千刃,并且欢迎各位师傅对我的开源代码进行指导! -–Offense without defense, unparalleled in th ...
PCIE详解
老男孩读PCIe之一:从PCIe速度说起从今天开始,老男孩要开始讲PCIe了.对我来说,这是个很大的挑战:首先,我自己本身,对PCIe并没有做到胸有成竹,我的PCIe知识也只是停留在理论阶段,我并没 ...
300ms点击延迟
300ms点击延迟移动端的300ms点击延迟是因为移动端可以进行双击缩放的操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是判断这次操作是单击还是双击.如果通过监听to ...
Python之凯撒加密
凯撒加密介绍在密码学中,恺撒密码是一种最简单且最广为人知的加密技术. 它是一种替换加密的技术,明文中的所有字母都在字母表上向后(或向前)按照一个固定数目进行偏移后被替换成密文. 例,当偏移量是3的时 ...
【Azure Redis】Redis客户端出现15分钟的超时异常
问题描述客户端使用 Lettuce.io 连接 Azure Redis,出现了长达15分钟的Timeout异常. 问题解答 Azure Redis作为PaaS服务,由于一些平台的升级操作而引发的故障 ...
【Azure 应用服务】Azure SignalR 是否可以同时支持近十万人在线互动
什么是 Azure SignalR 服务? Azure SignalR Service 简化了通过 HTTP 向应用程序添加实时 Web 功能的过程. 这种实时功能允许服务将内容更新推送到连接的客户端 ...
Hugo 建站经验之谈
前言建站工具,早已不是一个新颖的话题,抛开可视化建站单论开发层面,各类语言都有推出广受欢迎的建站框架,比如 Python 开发的 Pelican,JavaScript 开发的 Hexo,以及市场份额 ...
用 NetworkX + Gephi + Nebula Graph 分析<权力的游戏>人物关系（下篇）
在上一篇[1]中,我们通过 NetworkX 和 Gephi 展示了<权力的游戏>中的人物关系.在本篇中,我们将展示如何通过 NetworkX 访问图数据库 Nebula Graph. N ...
第12章_MySQL数据类型
目录: https://www.cnblogs.com/xjwhaha/p/15844178.html 1. MySQL中的数据类型类型类型举例整数类型 TINYINT.SMALLINT.MED ...
Java 多态解释+案例
1 package com.bytezreo.duotai; 2 /** 3 * 4 * @Description 面向对象的特征三 ------多态性 5 * @author Bytezero·zh ...

OpenLayers绘制热力图 代码记录

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

做地图开发，往往需要掌握专题地图制作的技能。今天用OpenLayers6来做一个热力图的效果。

页面效果：

代码部分:

JavaScript部分：

数据部分：wanda.geojson

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

OpenLayers绘制热力图 代码记录的更多相关文章

随机推荐

热门专题

OpenLayers绘制热力图代码记录

数据部分：`wanda.geojson`

OpenLayers绘制热力图代码记录的更多相关文章