Leaflet系列：加載熱力圖效果

Leaflet是適用於桌面端和移動端交互地圖的開源JavaScript類庫。JS庫的大小通過壓縮後有38k左右，擁有開發者須要的所有地圖功能。 

Leaflet保持着簡單、性能和實用性的設計思想。能夠在全部主要的桌面和移動端平臺上高效的運轉，能夠擴展插件，它有一個漂亮、易用和文檔清晰的API，有一個簡單、易讀的源代碼。

heatmap.js 是一款輕量級、方便使用的js類庫，經過類庫引用，能夠很方便的建立熱力圖，github上的地址是https://github.com/pa7/heatmap.js，其中提供了很多示例，包括Leaflet或者谷歌地圖上。

在Leaflet上加載熱力圖，有現成的類庫，具體的使用方法以下：

引用heatmap.js，再引用heatmap.js/plugins/leaflet-heatmap/leaflet-heatmap.js，根據example上的示例代碼進行開發，如下是根據實際中的數據進行示例開發，具體的參數能夠參見github上的網頁說明。

//加載對應類庫

require(['leaflet-heatmap'], function(HeatmapOverlay) {

//json請求數據

$.getJSON('sampledata/ta_school.json', function(data) {

//設置參數

var cfg = {

"radius": .007,

"maxOpacity": .65,

"scaleRadius": true,

"useLocalExtrema": true,

latField: 'cy',

lngField: 'cx',

valueField: 'cnt'

};

     //定義熱力圖

var heatmapLayer = new HeatmapOverlay(cfg);

heatmapLayer.setData(data);

layerControl.addOverlay(heatmapLayer, '熱力圖');

});

});

本文分享自微信公衆號 - 技術幾句雜談（tecsimplepoint）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。