leaflets + heatmap 加载地图
生活随笔
收集整理的這篇文章主要介紹了
leaflets + heatmap 加载地图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么80%的碼農都做不了架構師？>>> ??
leaflets + heatmap 加載地圖
- leaflets
- 簡單友好輕量級的互動地圖，開源的 JavaScript 庫
- 官網：http://leafletjs.com/
- 源碼下載：http://leafletjs.com/download.html
- Heatmap
- heatmap.js是一個輕量級的，易于使用的JavaScript庫來幫助你可視化你的三維數據，有一個和leaflets 搭配的插件 leaflets heatmap.js
- 官網：?https://www.patrick-wied.at/static/heatmapjs/
- 源碼下載：https://github.com/Leaflet/Leaflet.heat?
- 簡單的熱力圖實現實現
- 直接上代碼： <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>leaflet</title><link rel="stylesheet" href="/static/map/css/leaflet.css" type="text/css"><style>html,body,#map{<!--指定地圖的高寬-->height: 100%;width: 100%;}</style> </head> <body><div id = 'map'></div><script type="text/javascript" src="/static/map/js/leaflet-src.js"></script><script type="text/javascript" src="/static/map/js/leaflet.js"></script><script type="text/javascript" src="/static/map/js/heatmap.min.js"></script><script type="text/javascript" src="/static/map/js/leaflet-heatmap.js"></script><script type="text/javascript" src="/static/map/js/mapConfig.js"></script> </body> </html>
- 配置 var url = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
//z表示地圖的縮放級別
//x表示地圖瓦片的橫向坐標
//y表示地圖瓦片的縱向坐標
//其中的路徑就是保存地圖瓦片的的路徑
var tilemap = new L.TileLayer(url);
//加載地圖的底層對象
var mapcenter = new L.latLng(26.65, 106.65);
//地圖的中心點的對象
map = new L.Map("map", { //"map"為需要插入地圖的div的id//CRS:'Simple', //離線地圖加載規則center:mapcenter, //地圖中心點zoom: 11, //默認展示的縮放級別layers: [tilemap], //插入的地圖的圖層minZoom: 0, //最小縮放級別maxZoom: 18, //最大縮放級別opacity: 0.1, //圖層的不透明度maxBounds: [ //地圖的東西南北最大邊界，//在縮放級別和是的情況下，地圖只會展示在當前的區域內//south west[26.4, 106.4],//north east[26.9, 106.98]]});
var heatmapLayer = null;// 熱力圖層
function setHeatMap(){/*** 創建熱力圖的方法* 傳一個參數，從后臺獲取到的熱力圖的點的數據* 數據結構*/$.getJSON("./getDevice",function(data){// alert(heatmapData[0].fields.device_desc);var heatmapData= {max: 4,data: data};if(heatmapLayer != null){/*這個方法是在每一次刷新熱力圖之前把前一次創建的熱力圖對象清除,*如果不對這個對象進行重置，會在每一刷新的時候給這個對象添加數據上去，*會導致這個對象內存增長*/map.removeLayer(heatmapLayer);}var config = {//熱力圖的配置項// radius: 'radius', //設置每一個熱力點的半徑radius: 0.002, //設置每一個熱力點的半徑maxOpacity: 0.6, //設置最大的不透明度// minOpacity: 0.3, //設置最小的不透明度scaleRadius: true, //設置熱力點是否平滑過渡blur: 0.95, //系數越高，漸變越平滑，默認是0.85,//濾鏡系數將應用于所有熱點數據。useLocalExtrema: true, //使用局部極值// latField: 'latitude', //維度// lngField: 'lngField', //經度// valueField: 'count', //熱力點的值latField: 'fields.baidu_y', //維度 106.lngField: 'fields.baidu_x', //經度 26.valueField: 'fields.direction', //熱力點的值gradient: {//過渡，顏色過渡和過渡比例,范例："0.99": "rgba(255,0,0,1)","0.75": "rgba(255,255,0,1)","0.5": "rgba(0,255,0,1)","0.25": "rgba(0,255,255,1)","0": "rgba(0,0,255,1)"}// backgroundColor: 'rgba(27,34,44,0.5)' //熱力圖Canvas背景};heatmapLayer = null; //重置熱力圖對象為nullheatmapLayer = new HeatmapOverlay(config); //重新創建熱力圖對象$(".leaflet-overlay-pane").empty(); //清空熱力圖的空間map.addLayer(heatmapLayer); //將熱力圖圖層添加在地圖map對象上heatmapLayer.setData(heatmapData); //設置熱力圖的的數據});
}
setHeatMap();
?
轉載于:https://my.oschina.net/dwqdwd/blog/1795866
總結
以上是生活随笔為你收集整理的leaflets + heatmap 加载地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 面向对象的7种原则
- 下一篇： 个人博客 SEO 优化（2）：站内优化