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

時間 2019-12-12

標籤 leaflet+heatmap leaflet heatmap 實現離線地圖加載熱力應用简体版

原文原文鏈接

本人博客主頁：http://www.cnblogs.com/webbest/javascript

2017年春節已通過完，新一年的奮鬥也剛剛開始。今年要經歷的挑戰也是大大的。。。不扯了。css

年末前軟件項目相對較多，恰巧在年末進入一家新公司，項目天然一個接一個，沒有絲毫停歇。年末以前的電信運營商春節保障項目時節前作的最後一個項目，時間緊，任務中。主要仍是涉及到之前沒有用過，而且公司也沒人實踐過的離線地圖瓦片加載熱力圖效果的應用。html

接到這個任務也是摸不着頭腦，產品經理讓先看看openstreetmap，瞭解一下其中的一些API接口。通過了解才知道這只是一大個地圖包，並無提供現實的離線地圖的方案。帶個人師傅說能夠了解一下openlayers，使用openlayers也加載了一個離線地圖瓦片進來。團隊中的大神建議使用leaflet來作離線地圖瓦片的加載，由於相對簡單，不須要像openlayers那樣加載太多依賴。java

先上代碼：git

先加載：leaflet.js和leaflet.css,以及heatmap.js和heatmap-leaflet.js文件。web

<!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能夠用：url

<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的地圖，這裏使用谷歌地圖的規則進行下載（不一樣的地圖規則須要轉換，谷歌地圖規則最接近原始規則，因此下載的地圖通常都用谷歌地圖規則進行下載）。spa

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，將地圖瓦片等對象添加進這個對象：scala

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);          //設置熱力圖的的數據
    }

經過以上的方法，基本能夠實現離線加載瓦片地圖，而後添加熱力圖圖層的功能。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。