leafletjs热力图_leaflet热力图功能(附源码下载)

前言leaflet 入门开发系列环境知识点了解&＃xff1a;

leaflet api文档介绍&＃xff0c;详细介绍 leaflet 每个类的函数以及属性等等

leaflet 在线例子

leaflet 插件&＃xff0c;leaflet 的插件库&＃xff0c;非常有用

内容概览leaflet热力图功能

源代码demo下载

效果图如下&＃xff1a;部分核心代码&＃xff0c;完整的见源码demo下载&＃xff1a;

//数据

var testData &＃61; {

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 &＃61; {

"radius": 0.0009,

"maxOpacity": .4,

"scaleRadius": true,

"useLocalExtrema": true,

latField: &＃39;lat&＃39;,

lngField: &＃39;lng&＃39;,

valueField: &＃39;value&＃39;

};

var heatmapLayer &＃61; new HeatmapOverlay(cfg);

//图层

var baseLayer &＃61; L.tileLayer(

&＃39;http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}&＃39;, {

attribution: &＃39;...&＃39;,

maxZoom: 21

}

);

var map &＃61; new L.Map(&＃39;map&＃39;, {

center: new L.LatLng(39.62353145, 121.9937485),

zoom:15,

layers: [baseLayer, heatmapLayer]

});

heatmapLayer.setData(testData);

完整的源码demo见下面链接&＃xff1a;leaflet热力图功能(附源码下载) &＃xff0d; 小专栏​xiaozhuanlan.com

对本专栏感兴趣的话&＃xff0c;可以订阅一波

GIS之家作品店铺&＃xff1a;