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); //设置热力图的的数据
}
通过以上的方法，基本可以实现离线加载瓦片地图，然后添加热力图图层的功能。
Leaflet+heatmap实现离线地图加载和热力图应用的更多相关文章
- arcgis 瓦片图加载规则（转载）
arcgis 瓦片图加载规则 最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...
- AMap地图加载完成事件
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
- Openlayers+Geoserver（一）：项目介绍以及地图加载
项目验收完,趁着事情不是很多,对这个项目进行梳理.我主要负责地图模块,网站其他模块主要有两个,一个是报表,主要是100多张报表,技术没有难度,主要是工作量的问题.另一个是数据的校验,就是 ...
- ArcGIS API for Silverlight地图加载众多点时，使用Clusterer解决重叠问题
原文:ArcGIS API for Silverlight地图加载众多点时,使用Clusterer解决重叠问题 问题:如果在地图上加载成百上千工程点时,会密密麻麻,外观不是很好看,怎么破? 解决方法: ...
- Android高清巨图加载方案
1.今天看了鸿洋的<Android高清巨图加载方案>一文,对加载高清巨图时的解决方案有了一定的认识. 思路为: 提供一个设置图片的入口. 重写onTouchEvent,在里面根据用户移动的 ...
- arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- 微软必应地图加载错误：Uncaught TypeError: Microsoft.Maps.Location is not a constructor
微软必应地图在chrome浏览器加载错误:Uncaught TypeError: Microsoft.Maps.Location is not a constructor, 原因是没有等待地图API加 ...
- [Canvas]RPG游戏雏形 （地图加载，英雄出现并移动）
源码请点此下载并用浏览器打开index.html观看 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <met ...
- arcgis api for javascript - 最基本的地图加载
为大家贴贴最基本的地图加载: 一. API 根据Dom树上节点的 ID 确定 Map 的显示位置; 二. setBasemap 方法可得到一些ArcGIS制作好的底图,例如: "street ...
随机推荐
- 使用for循环输出杨辉三角-还是不懂得需要复习
package com.chongrui.test; /* *使用for循环输出杨辉三角杨辉三角形由数字排列,可以把它看作一个数字表,其基本特征是两侧的数值均为1,其他位置的数值是其正上方的数值与左上 ...
- Android之layout_weight属性详解
博文:http://www.cnblogs.com/net168/p/4227144.html讲分非常好,推荐下
- Android之Margin和Padding属性及支持的长度单位
做了个小软件后,终于把Margin和Padding弄清楚了,现总结如下: Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin ...
- LPC1768外部中断与GPIO中断
LPC1768的外部中断严格来说只有四个,分别是EINT0,EINT1,EINT2,EINT3,技术手册上有如下说明 控制这四个外部中断靠以下寄存器 这三个寄存器的0 1 2 3位分别代表中断的0 1 ...
- STM32_IAP详解(有代码,有上位机)
Iap,全名为in applacation programming,即在应用编程,与之相对应的叫做isp,in system programming,在系统编程,两者的不同是isp需要依靠烧写器在单片 ...
- 【spoj8222】 Substrings
http://www.spoj.com/problems/NSUBSTR/ (题目链接) 题意 给出一个字符串S,令${F(x)}$表示S的所有长度为x的子串出现次数的最大值.求${F(1)..... ...
- Java的进制转换操作（十进制、十六进制、二进制）
2014-05-06 17:34 吴文付 最近由于工作上的需要,遇到进制转换的问题.涉及到的进制主要是 十进制,十六进制,二进制中间的转换. 这里整理一下.具体的计划为:封装一个转换类,一个测试类. ...
- StackExchange.Redis 官方文档(四) KeysScan
KEYS, SCAN, FLUSHDB 方法在哪? 经常有人问这些问题: 好像并没有看到 Keys(...) 或者 Scan(...)方法?那我要怎么查询数据库里面存有哪些key? 或者 好像没有Fl ...
- 数据可视化－OmniGraffle软件
OmniGraffle Pro for mac破解版是一款运行在MAC OS平台上的思维导图流程图制作软件,通过思维导图软件(OmniGraffle Pro MAC)帮你组织头脑中思考的信息,组织头脑 ...
- 使用Python脚本操作MongoDB的教程
Reference: http://www.jb51.net/article/64225.htm