leaflet热力图功能(附源码下载)
2023-09-11 14:19:51 时间
前言
leaflet 入门开发系列环境知识点了解:
- leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
- leaflet 在线例子
- leaflet 插件,leaflet 的插件库,非常有用
内容概览
leaflet热力图功能
源代码demo下载
效果图如下:
本篇主要参考leaflet官网热力图插件:
https://leafletjs.com/plugins.html#heatmaps
除此之外,还参照以下博客:
https://www.jianshu.com/p/8cc863c4c085
https://www.cnblogs.com/mengjiaxing/p/7766924.html
- 部分核心代码,完整的见源码demo下载:
//数据 var testData = { max: 108, data: [ { lat: 39.62117439, lng: 121.9936396, value:98 }, { lat: 39.61809405, lng: 121.9918268, value:70 }, { lat: 39.62066229, lng: 121.9944071, value:88 }, { lat: 39.62037488, lng: 121.9908595, value:77 }, { lat: 39.61839083, lng: 121.9893449, value:98 }, { lat: 39.61808874, lng: 121.9888359, value:89 }, { lat: 39.61929969, lng: 121.9927034, value:76 }, { lat: 39.6193, lng: 121.9926137, value:45 }, { lat: 39.62334245, lng: 121.9935193, value:23 }, { lat: 39.623184, lng: 121.9931208, value:44 }, { lat: 39.62208411, lng: 121.99343, value:34 }, { lat: 39.62305201, lng: 121.9937288, value:77 }, { lat: 39.62353145, lng: 121.9937485, value:99 }, { lat: 39.62009813, lng: 121.9929025, value:66 } ] }; //配置 var cfg = { "radius": 0.0009, "maxOpacity": .4, "scaleRadius": true, "useLocalExtrema": true, latField: 'lat', lngField: 'lng', valueField: 'value' }; var heatmapLayer = new HeatmapOverlay(cfg); //图层 var baseLayer = L.tileLayer( 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', { attribution: '...', maxZoom: 21 } ); var map = new L.Map('map', { center: new L.LatLng(39.62353145, 121.9937485), zoom:15, layers: [baseLayer, heatmapLayer] }); heatmapLayer.setData(testData);
完整demo源码见小专栏文章尾部:小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
相关文章
- python实现抖音多线程下载无水印视频【附源码】
- java坦克大战源码下载
- maven 下载源码
- 通用社区登陆组件技术分享(开源)下篇:OAuth 源码下载及原理解说
- shiro源码分析(四)具体的Realm
- 【云栖大会】阿里云开放AliSQL数据库源码下载
- MFC Windows 程序设计[140]之多样消息对话框属性页(附源码)
- 基于STM32的ThreadX GUIX的工程模板发布,1452个源码文件,请准备好一台性能强劲的电脑,否则后果自负^_^
- ZZNUOJ_C语言1130:第几天(附完整源码)
- WebRTC源码分析:引用计数系统
- 从源码分析DEARGUI之add_drawing
- 从源码分析DEARGUI之add_color_edit3和4
- 【nodejs原理&源码赏析(6)】深度剖析cluster模块源码与node.js多进程(下)
- 从chrome源码看JavaScript执行 dom
- 第二人生的源码分析(四十七)发送下载纹理图片请求
- VC++计算文件和文件夹的大小(附源码)
- 基于Socket通讯(C#)和WebSocket协议(net)编写的两种聊天功能(文末附源码下载地址)
- 风格迁移0-01:stylegan-源码及数据资源下载
- 深度学习项目:图片数据建模流程:猫狗分类,83.6%识别率【附完整源码】
- Visual Studio 控制台程序世界杯足球C语言版(附源码)
- 深度学习 各版本的tensorflow源码编译库、CUDA、cudnn下载
- [YOLOv7]基于YOLOv7的绝缘子缺陷检测系统(源码&部署教程&数据集)
- SELinux零知识学习三、SELinux应用层源码下载、编译和安装
- SELinux零知识学习四、Audit应用层源码下载、编译和安装
- QEMU零知识学习2 —— QEMU源码下载
- radeon_fence文件源码分析
- 谷歌浏览器的源码分析(2)