本人博客主頁：http://www.cnblogs.com/webbest/
2017年春節已經過完，新一年的奮斗也剛剛開始。今年要經歷的挑戰也是大大的。。。不扯了。
年底前軟件項目相對較多，恰巧在年底進入一家新公司，項目自然一個接一個，沒有絲毫停歇。年底之前的電信運營商春節保障項目時節前做的最后一個項目，時間緊，任務中。主要還是涉及到以前沒有用過，並且公司也沒人實踐過的離線地圖瓦片加載熱力圖效果的應用。
接到這個任務也是摸不着頭腦，產品經理讓先看看openstreetmap，了解一下其中的一些API接口。經過了解才知道這只是一大個地圖包，並沒有提供現實的離線地圖的方案。帶我的師傅說可以了解一下openlayers，使用openlayers也加載了一個離線地圖瓦片進來。團隊中的大神建議使用leaflet來做離線地圖瓦片的加載，因為相對簡單，不需要像openlayers那樣加載太多依賴。
先上代碼：
先加載：leaflet.js和leaflet.css,以及heatmap.js和heatmap-leaflet.js文件。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>leaflet</title> <link rel="stylesheet" href="./leaflet.css" type="text/css"> <style> #map{ height: 360px; width: 600px; } </style> </head> <body> <div id = 'map'></div> <script type="text/javascript" src="./leafletsrc.js"></script> <script type="text/javascript" src="./heatmap.js"></script> <script type="text/javascript" src="./heatmap-leaflet.js"></script> <script type="text/javascript" src="./test.js"></script> </body> </html>
css文件是leaflet提供的CSS默認樣式，包括里邊氣泡的樣式等，如果需要修改，可以單獨寫CSS樣式進行覆蓋。
leaflet.css和leaflet.js可以用：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
接下來就是具體的加載離線瓦片的方式，離線地圖是使用太樂地圖下載器下載的地圖瓦片，由於需要的地圖是比較簡潔的地圖，所以就選擇了openstreetmap的地圖，這里使用谷歌地圖的規則進行下載（不同的地圖規則需要轉換，谷歌地圖規則最接近原始規則，所以下載的地圖一般都用谷歌地圖規則進行下載）。
var url = "http://localhost:8080/mapTest/offlineMapTiles/{z}/{x}/{y}"; //z表示地圖的縮放級別 //x表示地圖瓦片的橫向坐標 //y表示地圖瓦片的縱向坐標 //其中的路徑就是保存地圖瓦片的的路徑 var tilemap = new L.TileLayer(url); //加載地圖的底層對象 var mapcenter = new L.latLng(21.5,67.89); //地圖的中心點的對象
創建一個地圖對象Map，將地圖瓦片等對象添加進這個對象：
map = new L.Map("map", { //"map"為需要插入地圖的div的id CRS:'Simple', //離線地圖加載規則 center:mapcenter, //地圖中心點 zoom: 12, //默認展示的縮放級別 layers: [tilemap], //插入的地圖的圖層 minZoom: 0, //最小縮放級別 maxZoom: 15, //最大縮放級別 opacity: 0.1, //圖層的不透明度 maxBounds: [ //地圖的東西南北最大邊界， //在縮放級別和是的情況下，地圖只會展示在當前的區域內 //south west [34.6, 113.4], //north east [34.9, 113.98] ] });
離線地圖瓦片加載成功后，就需要創建熱力圖圖層：
function setHeatMap(heatmapData){ /** * 創建熱力圖的方法 * 傳一個參數，從后台獲取到的熱力圖的點的數據 * 數據結構 var heatmapData={ max: 1000, data: [ {lngField:67.89,latitude:21.5,count:100,radius:0.002}, {lngField:67.869,latitude:21.551,count:19,radius:0.002} ] }; */ if(heatmapLayer != null){、 /*這個方法是在每一次刷新熱力圖之前把前一次創建的熱力圖對象清除, *如果不對這個對象進行重置，會在每一刷新的時候給這個對象添加數據上去， *會導致這個對象內存增長 */ map.removeLayer(heatmapLayer); } var config = { //熱力圖的配置項 radius: 'radius', //設置每一個熱力點的半徑 maxOpacity: 0.9, //設置最大的不透明度 // minOpacity: 0.3, //設置最小的不透明度 scaleRadius: true, //設置熱力點是否平滑過渡 blur: 0.95, //系數越高，漸變越平滑，默認是0.85, //濾鏡系數將應用於所有熱點數據。 useLocalExtrema: true, //使用局部極值 latField: 'latitude', //維度 lngField: 'longitude', //經度 valueField: 'count', //熱力點的值 gradient: { "0.99": "rgba(255,0,0,1)", "0.9": "rgba(255,255,0,1)", "0.8": "rgba(0,255,0,1)", "0.5": "rgba(0,255,255,1)", "0": "rgba(0,0,255,1)" }, //過渡，顏色過渡和過渡比例,范例： /* { "0.99": "rgba(255,0,0,1)", "0.9": "rgba(255,255,0,1)", "0.8": "rgba(0,255,0,1)", "0.5": "rgba(0,255,255,1)", "0": "rgba(0,0,255,1)" } */ // backgroundColor: 'rgba(27,34,44,0.5)' //熱力圖Canvas背景 }; heatmapLayer = null; //重置熱力圖對象為null heatmapLayer = new HeatmapOverlay(config); //重新創建熱力圖對象 $(".leaflet-overlay-pane").empty(); //清空熱力圖的空間 map.addLayer(heatmapLayer); //將熱力圖圖層添加在地圖map對象上 heatmapLayer.setData(heatmapData); //設置熱力圖的的數據 }
通過以上的方法，基本可以實現離線加載瓦片地圖，然后添加熱力圖圖層的功能。
