Leaflet+heatmap實現離線地圖載入和熱力圖應用

阿新 • • 發佈：2019-02-17

本人部落格主頁：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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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);          //設定熱力圖的的資料
    }

通過以上的方法，基本可以實現離線載入瓦片地圖，然後新增熱力圖圖層的功能。

Leaflet+heatmap實現離線地圖載入和熱力圖應用

Leaflet+heatmap實現離線地圖載入和熱力圖應用

leaflet+esri-leaflet+heatmap實現熱力圖

XrecyclerView實現上拉載入和下拉重新整理+多條目(MVP獲取資料)

Python資料相關係數矩陣和熱力圖輕鬆實現

vue 使用mint-ui實現上拉載入和下拉重新整理

Leaflet+Echarts實現GIS地圖動態播放以及使用Echarts對點位資料詳情進行展示

javascript實現圖片懶載入和預載入

vue專案中vue-scroller實現上拉載入和下拉重新整理

Vue結合webpack實現路由懶載入和分類打包

Leaflet 加載天地圖服務和Arcgis server服務

調用高德地圖API（熱力圖）詳解

heatmap.js 一個用canvas畫熱力圖的利器

matlab 彩色圖和熱力圖疊加顯示

利用ServiceWorker實現頁面的快速載入和離線訪問

百度離線地圖api2.0 載入本地瓦片實現點線面標註 ajax提交（完全內網）

基於百度地圖SDK和Elasticsearch GEO查詢的地理圍欄分析系統（3）-前端實現

MBTiles 離線地圖的生成和使用

微信小程式下拉載入和上拉重新整理兩種實現方法

懶載入和預載入的基本原理和實現方法

require.js載入highcharts.js/exporting.js實現圖表的繪製和圖片檔案功能的匯出

Leaflet+heatmap實現離線地圖載入和熱力圖應用

相關推薦