本人博客主页：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);          //设置热力图的的数据

    }

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

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. WPF教程：附加属性

    一.附加属性的特点1.特殊的依赖属性2.用于非定义该属性的类 例如Grid面板的RowDefinition.ColumnDefinition.Canvas面板的Left.RightDockPanel面 ...

  2. window环境变量

    首先Window中有很多乱七八糟的路径变量之类的,归类下来有几类,主要是为了我们分清楚概念,以免搞的糊涂了. 1. Window系统的环境变量:顾名思义,就是系统级别的变量,或者利用我们编程的角度来讲 ...

  3. html元素被隐藏在后面

    当有些html元素是由于某些控件生成的,然后它被隐藏在其他元素的后面,但是它一开始是隐藏的,你无法直接在html或js里修改它的属性:z-index,使其可以放在更前面,这时可以在css里重新定义控件 ...

  4. Online Schema Change for MySQL

    It is great to be able to build small utilities on top of an excellent RDBMS. Thank you MySQL. This ...

  5. 《算法导论》习题2.3-5 二分搜索 Binary Search

    地球人都知道“二分查找”,方法也非常简单,但是你能不能在10分钟内写出一个没有bug的程序呢? 知易行难,自己动手写一下试一试吧. public class BinarySearch { public ...

  6. svn 几个好用的命令

    Mac下操作的命令 1. 删除目录及子目录下,未添加的文件 svn status . | grep '^?' | awk '{print $2}' | xargs rm -rf 2.恢复根目录及子目录 ...

  7. Use Wireshark to capture loopback traffic without a loopback adapter （转）

    Use Wireshark to capture loopback traffic without a loopback adapter If you’ve ever used Wireshark f ...

  8. ECSHOP中ajax的调用原理

    ECSHOP中ajax的调用原理 ecshop中ajax的调用原理. 1.首先ecshop是如何定义ajax对象的. ecshop中的ajax对象是在js/transport.js文件中定义的.里面是 ...

  9. Mysql 多列形成主键（复合主键 ）

    什么是数据表的复合主键 所谓的复合主键 就是指你表的主键含有一个以上的字段组成 比如 create table test (    name varchar(19),    id number,    ...

  10. spark在集群上运行

    1.spark在集群上运行应用的详细过程 (1)用户通过spark-submit脚本提交应用 (2)spark-submit脚本启动驱动器程序,调用用户定义的main()方法 (3)驱动器程序与集群管 ...