Leaflet+heatmap实现离线地图加载和热力图应用
本人博客主页：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); //设置热力图的的数据 }
通过以上的方法，基本可以实现离线加载瓦片地图，然后添加热力图图层的功能。
