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++中的重要概念之一,用于处理在程序执行过程中可能发生的错误或异常情况.异常是指在程序执行过程中发生的一些不寻常的事件,例如除零错误.访问无效内存等.C++提供了一套异常处理机制,使得程序 ...
JS Leetcode 1370. 上升下降字符串题解分析，桶排序与charCodeAt fromCharCode妙用
壹 ❀ 引本题来自LeetCode1370. 上升下降字符串,难度简单,是一道考察对于字符串遍历熟练度的题目,题目描述如下: 给你一个字符串 s ,请你根据下面的算法重新构造字符串: 从 s 中选出 ...
test-02-java 单元测试框架 junit5 入门介绍
拓展阅读 junit5 系列基于 junit5 实现 junitperf 源码分析 Auto generate mock data for java test.(便于 Java 测试自动生成对象信息 ...
java 如何计算两个汉字的相似度？如何获得一个汉字的相似汉字？
计算汉字相似度情景有时候我们希望计算两个汉字的相似度,比如文本的 OCR 等场景.用于识别纠正. 实现引入 maven <dependency> <groupId>com ...
微信小程序云开发项目-个人待办事项-04【我的】模块开发
上一篇: 微信小程序云开发项目-个人待办事项-03[主页]模块开发 https://blog.csdn.net/IndexMan/article/details/124538576 模块开发步骤本篇 ...
golang读取用户名和密码文件并生成笛卡尔积
密码爆破时需要读取用户名字典和密码字典来生成笛卡尔积派发爆破任务:直接读取全部字典内容到内存时成本较高: package main import ( "bufio" "f ...
win32 - EnumDisplayDevices和EnumDisplayMonitors的使用
EnumDisplayDevices枚举适配器 EnumDisplayMonitors枚举监视器 #pragma comment(lib, "dxva2.lib") #includ ...
java图书管理系统
一 .需求 1.使用数组存储学生(学号.姓名.性别.年级.院系.班级)信息数据和图书(书号.书名.出版日期.作者.价格.类别)信息数据 2.学生管理功能:增加学生.删除学生信息.修改学生信息.查询学生 ...
答对这 9 题你就超越了 83.3% 的图数据库 NebulaGraph 用户
熟悉 NebulaGraph 社区的小伙伴可能都知道一个技能认证叫做:NGCP,全称 NebulaGraph Certified Professional.用户在考试认证期间在 1 个小时内回答 10 ...
spring Cloud 有哪些组件？
Eureka:服务注册与发现,每个服务都向eureka提供自己的ip地址,端口号,协议,通信协议,eureka将各个服务维护到一个服务清单中(双层map,第一层key为服务名,第二层key为实例名), ...

OpenLayers绘制热力图 代码记录

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

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

页面效果：

代码部分:

JavaScript部分：

数据部分：wanda.geojson

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

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

随机推荐

热门专题

OpenLayers绘制热力图代码记录

数据部分：`wanda.geojson`

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