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);          //设置热力图的的数据
    }

经过以上的方法，基本能够实现离线加载瓦片地图，而后添加热力图图层的功能。