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

2017年春节已经过完，新一年的奋斗也刚刚开始。今年要经历的挑战也是大大的。。。不扯了。

年底前软件项目相对较多，恰巧在年底进入一家新公司，项目自然一个接一个，没有丝毫停歇。年底之前的电信运营商春节保障项目时节前做的最后一个项目，时间紧，任务中。主要还是涉及到以前没有用过，并且公司也没人实践过的离线地图瓦片加载热力图效果的应用。

接到这个任务也是摸不着头脑，产品经理让先看看openstreetmap，了解一下其中的一些API接口。经过了解才知道这只是一大个地图包，并没有提供现实的离线地图的方案。带我的师傅说可以了解一下openlayers，使用openlayers也加载了一个离线地图瓦片进来。团队中的大神建议使用leaflet来做离线地图瓦片的加载，因为相对简单，不需要像openlayers那样加载太多依赖。

先上代码：

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6.     <title>leaflet</title>
  7.     <link rel="stylesheet" href="./leaflet.css" type="text/css">
  8.     <style>
  9.         #map{
  10.             height: 360px;
  11.             width: 600px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id = 'map'></div>
  17.     <script type="text/javascript" src="./leafletsrc.js"></script>
  18.     <script type="text/javascript" src="./heatmap.js"></script>
  19.     <script type="text/javascript" src="./heatmap-leaflet.js"></script>
  20.     <script type="text/javascript" src="./test.js"></script>
  21. </body>
  22. </html>

css文件是leaflet提供的CSS默认样式，包括里边气泡的样式等，如果需要修改，可以单独写CSS样式进行覆盖。

leaflet.css和leaflet.js可以用：

  1. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  2. <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

接下来就是具体的加载离线瓦片的方式，离线地图是使用太乐地图下载器下载的地图瓦片，由于需要的地图是比较简洁的地图，所以就选择了openstreetmap的地图，这里使用谷歌地图的规则进行下载（不同的地图规则需要转换，谷歌地图规则最接近原始规则，所以下载的地图一般都用谷歌地图规则进行下载）。

  1. var url = "http://localhost:8080/mapTest/offlineMapTiles/{z}/{x}/{y}";
  2. //z表示地图的缩放级别
  3. //x表示地图瓦片的横向坐标
  4. //y表示地图瓦片的纵向坐标
  5. //其中的路径就是保存地图瓦片的的路径
  6. var tilemap = new L.TileLayer(url);
  7. //加载地图的底层对象
  8. var mapcenter = new L.latLng(21.5,67.89);
  9. //地图的中心点的对象

创建一个地图对象Map，将地图瓦片等对象添加进这个对象：

  1. map = new L.Map("map", {    //"map"为需要插入地图的div的id
  2.             CRS:'Simple',   //离线地图加载规则
  3.             center:mapcenter,   //地图中心点
  4.             zoom: 12,           //默认展示的缩放级别
  5.             layers: [tilemap],  //插入的地图的图层
  6.             minZoom: 0,         //最小缩放级别
  7.             maxZoom: 15,        //最大缩放级别
  8.             opacity: 0.1,       //图层的不透明度
  9.             maxBounds: [        //地图的东西南北最大边界，
  10.                                 //在缩放级别和是的情况下，地图只会展示在当前的区域内
  11.                 //south west
  12.                 [34.6, 113.4],
  13.                 //north east
  14.                 [34.9, 113.98]
  15.             ]
  16.         });

离线地图瓦片加载成功后，就需要创建热力图图层：

  1. function setHeatMap(heatmapData){
  2.         /**
  3.          * 创建热力图的方法
  4.          * 传一个参数，从后台获取到的热力图的点的数据
  5.          * 数据结构
  6.              var heatmapData={
  7.                 max: 1000,
  8.                 data: [
  9.                     {lngField:67.89,latitude:21.5,count:100,radius:0.002},
  10.                     {lngField:67.869,latitude:21.551,count:19,radius:0.002}
  11.                 ]
  12.             };
  13.          */
  14.         if(heatmapLayer != null){、
  15.             /*这个方法是在每一次刷新热力图之前把前一次创建的热力图对象清除,
  16.              *如果不对这个对象进行重置，会在每一刷新的时候给这个对象添加数据上去，
  17.              *会导致这个对象内存增长
  18.              */
  19.             map.removeLayer(heatmapLayer);
  20.         }
  21.         var config = {  //热力图的配置项
  22.             radius: 'radius',       //设置每一个热力点的半径
  23.             maxOpacity: 0.9,        //设置最大的不透明度
  24.             // minOpacity: 0.3,     //设置最小的不透明度
  25.             scaleRadius: true,      //设置热力点是否平滑过渡
  26.             blur: 0.95,             //系数越高，渐变越平滑，默认是0.85,
  27.                                     //滤镜系数将应用于所有热点数据。
  28.             useLocalExtrema: true,  //使用局部极值
  29.             latField: 'latitude',   //维度
  30.             lngField: 'longitude',  //经度
  31.             valueField: 'count',    //热力点的值
  32.             gradient: {   "0.99": "rgba(255,0,0,1)",
  33.                     "0.9": "rgba(255,255,0,1)",
  34.                     "0.8": "rgba(0,255,0,1)",
  35.                     "0.5": "rgba(0,255,255,1)",
  36.                     "0": "rgba(0,0,255,1)"
  37.                 },
  38.             //过渡，颜色过渡和过渡比例,范例：
  39.             /*
  40.                 {   "0.99": "rgba(255,0,0,1)",
  41.                     "0.9": "rgba(255,255,0,1)",
  42.                     "0.8": "rgba(0,255,0,1)",
  43.                     "0.5": "rgba(0,255,255,1)",
  44.                     "0": "rgba(0,0,255,1)"
  45.                 }
  46.             */
  47.             // backgroundColor: 'rgba(27,34,44,0.5)'    //热力图Canvas背景
  48.         };
  49.         heatmapLayer = null;                        //重置热力图对象为null
  50.         heatmapLayer = new HeatmapOverlay(config);  //重新创建热力图对象
  51.         $(".leaflet-overlay-pane").empty();         //清空热力图的空间
  52.         map.addLayer(heatmapLayer);                 //将热力图图层添加在地图map对象上
  53.         heatmapLayer.setData(heatmapData);          //设置热力图的的数据
  54.     }

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

Leaflet+heatmap实现离线地图加载和热力图应用的更多相关文章

  1. arcgis 瓦片图加载规则（转载）

    arcgis 瓦片图加载规则 最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...

  2. AMap地图加载完成事件

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. Openlayers+Geoserver（一）：项目介绍以及地图加载

           项目验收完,趁着事情不是很多,对这个项目进行梳理.我主要负责地图模块,网站其他模块主要有两个,一个是报表,主要是100多张报表,技术没有难度,主要是工作量的问题.另一个是数据的校验,就是 ...

  4. ArcGIS API for Silverlight地图加载众多点时，使用Clusterer解决重叠问题

    原文:ArcGIS API for Silverlight地图加载众多点时,使用Clusterer解决重叠问题 问题:如果在地图上加载成百上千工程点时,会密密麻麻,外观不是很好看,怎么破? 解决方法: ...

  5. Android高清巨图加载方案

    1.今天看了鸿洋的<Android高清巨图加载方案>一文,对加载高清巨图时的解决方案有了一定的认识. 思路为: 提供一个设置图片的入口. 重写onTouchEvent,在里面根据用户移动的 ...

  6. arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. 微软必应地图加载错误：Uncaught TypeError: Microsoft.Maps.Location is not a constructor

    微软必应地图在chrome浏览器加载错误:Uncaught TypeError: Microsoft.Maps.Location is not a constructor, 原因是没有等待地图API加 ...

  8. [Canvas]RPG游戏雏形 （地图加载，英雄出现并移动）

    源码请点此下载并用浏览器打开index.html观看 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <met ...

  9. arcgis api for javascript - 最基本的地图加载

    为大家贴贴最基本的地图加载: 一. API 根据Dom树上节点的 ID 确定 Map 的显示位置; 二. setBasemap 方法可得到一些ArcGIS制作好的底图,例如: "street ...

随机推荐

  1. CentOS 6.4 x64 postfix + dovecot + 虚拟用户认证

    第一, 首先必须安装 apacache  mysql  php CentOS 直接使用 yum 安装 yum -y install httpd httpd-devel mysql php-mysql  ...

  2. Apache的Directory配置指南

    使用<Directory>… </Directory>设置指定目录的访问权限,其中可包含:Options.Allow.Override.Order.Allow.Deny.Req ...

  3. $_SERVER参数的含义

    $_SERVER是由服务器创建的,包含了头信息.参数.路径等信息,以下是一些键代表的含义: $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关.$ ...

  4. iOS开发——UIImageView

    1.图像点击之后,全屏浏览 - (void)viewDidLoad { [super viewDidLoad]; _myImage=[[UIImageView alloc]initWithFrame: ...

  5. Keil MDK从未有过的详细使用讲解

    转自博客:http://blog.csdn.net/zhzht19861011/article/details/5846510 这博主关于MDK 的使用的文章,写的得TM的好  TM的实用! 真心收藏 ...

  6. java实现——035第一个只出现一次的字符

    import java.util.Hashtable; public class T035 { public static void main(String[] args) { FirstNotRep ...

  7. [Machine-Learning] 一个线性回归的简单例子

    这篇博客中做一个使用最小二乘法实现线性回归的简单例子. 代码来自<图解机器学习> 图3-2,使用MATLAB实现. 代码link 用到的matlab函数 由于以前对MATLAB也不是非常熟 ...

  8. p4factory 解决“g++: internal compiler error: Killed (program cc1plus)” make error问题

    参考:解决: g++: internal compiler error: Killed (program cc1plus) 在安装p4factory的时候,执行: ./install_deps.sh ...

  9. zepto js 源码 解读

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

  10. 简述Hibernate三种开发方式

    1.由domain object->mapping->db(官方推荐) 2.由db开始,用工具生成mapping和domain object(使用较多) 3.由映射文件开始