leafletjs 热力图_leafletjs+heatmapjs绘制热力地图

本文介绍了如何结合leaflet.js和heatmap.js库创建热力地图。通过加载这两个库,可以利用leaflet-heatmap.js插件进行绘制。文中展示了配置数据结构,并详细解释了配置选项,包括半径、最大不透明度、缩放半径等参数。最后,展示了如何更新数据和自定义颜色方案,使热力图与地图完美融合。
摘要由CSDN通过智能技术生成

前面两篇其实都是为了写一下leaflet-heatmap.js

最后搜了一下github https://github.com/Leaflet/Leaflet.heat

加载了leaflet.js和heatmap.js,就可以用leaflet-heatmap.js来绘制热力地图了。

首先,这是要展示的数据,有max代表所有数据的最大值,lat和Ing代表经纬度的值,count是要展示的数据,后面配置会有讲到,所以max应该是count中的最大值。

// don't forget to include leaflet-heatmap.js

var testData = {

max: 8,

data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]

};

很熟悉,就是我们讲leaflet的基础层的初始化。

var baseLayer = L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{

attribution: '...',

maxZoom: 18

}

);

cfg中所有heatmapjs的参数都可以用。另外加了额外的参数,都有说明

var cfg = {

// radius should be small ONLY if scaleRadius is true (or small radius is intended)

// if scal

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值