本人博客主页：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. 基础数据结构之（Binary Trees)

    从头开始刷ACM,真的发现过去的很多漏洞,特别越是基础的数据结构,越应该学习得精,无论是ACM竞赛,研究生考试,还是工程上,对这些基础数据结构的应用都非常多,深刻理解非常必要.不得不说最近感触还是比较 ...

  2. php中DateTime的format格式以及 TtoDatetime函数

    Definition and Usage The date() function formats a local time/date. Syntaxdate(format,timestamp)Para ...

  3. iOS开发—— UIImagePickerController获取相册和拍照

    一.简单的拍照显示,或是从相册中直接选取照片 #import "ViewController.h" @interface ViewController ()<UIImageP ...

  4. LPC1768外部中断与GPIO中断

    LPC1768的外部中断严格来说只有四个,分别是EINT0,EINT1,EINT2,EINT3,技术手册上有如下说明 控制这四个外部中断靠以下寄存器 这三个寄存器的0 1 2 3位分别代表中断的0 1 ...

  5. @synthesize和@dynamic

    @synthesize 除非开发人员已经做了,否则由编译器自动生成getter/setter方法.当开发人员自定义存或取方法时,自定义会屏蔽自动生成该方法. @dynamic 告诉编译器,不自动生成g ...

  6. Servlet_ResponseHeader

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  7. vuejs 子组件传递父组件的第二种方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 安卓 SQLite error：SQLite database locked exception while compling : PRAGMA journal_mode .....

    项目中频繁的切换Tab键,会频繁地从数据库读取数据,这是报出这样的错误: 解决方法是在国外的某论坛找到的 : 在插入数据的时候,首先: SQLiteDatabase db = SQLiteDataba ...

  9. scale等比缩放才能做到看上去能让线条以中心点展开

    .nav-menu>ul>li>a::before {  background: #333 none repeat scroll 0 0;  bottom: -2px;  conte ...

  10. Mysql中主从复制的原理、配置过程以及实际案例

    Mysql中主从复制的原理.配置过程以及实际案例1.什么是主从复制?原理:主从分离,什么意思呢?我们不妨画个图看看.如图1所示: 2.准备工作:预备两台服务器,我这里使用虚拟机安装了两个Centos6 ...