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 ...
随机推荐
- Openlayers修改矢量要素
将以下代码放到demo下examples中即可运行 <!DOCTYPE html><html> <head> <meta http-equiv="C ...
- iOS透明引导页
一.效果展示 这里写图片描述 这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作.引导样式是在界面上加了一个半透明的引导图,高亮部分就是要突出的区域 二.怎么做? ...
- iOS 的三种自建证书方法https请求相关配置
如果你的app服务端安装的是SLL颁发的CA,可以使用系统方法直接实现信任SSL证书,关于Apple对SSL证书的要求请参考:苹果官方文档CertKeyTrustProgGuide 这种方式不需要在B ...
- SSL 双向认证
利用OpenSSL生成库和命令程序,在生成的命令程序中包括对加/解密算法的测试,openssl程序,ca程序.利用openssl,ca可生成用于C/S模式的证书文件以及CA文件.下面以C/S模式说明证 ...
- Response.Write() Alert后页面布局改变
根据peter_zhang给出的解决方案,原文URL:http://www.cnblogs.com/starxp/articles/1939032.html 使用Page.ClientScript.R ...
- 单位冲击响应与频响以及FIR实现代码（C语言）（转）
源:FIR数字滤波器C语言 1.单位冲击响应与频响 就如同之前所说的一样,使用下图所示的单位冲击响应,所设计的滤波器,是无法实现的. 现在,让我们看看其这个滤波器的频响.所谓频响,就是计算其单位冲击响 ...
- IOS 股票K线图、分时图
IOS 股票K线图.分时图,网上开源项目很少,质量也是参差不齐:偶尔搜索到看似有希望的文章,点进去,还是个标题党:深受毒害.经过一段时间的探索,终于在开源基础上完成了自己的股票K线图.分时图: 先放出 ...
- Session监听事件的处理
设置Session监听 在web.xml文件中: <listener> <listener-class>cjq.login.listener.UpdateLogOutTime ...
- LRU Cache 题解
题意 Design and implement a data structure for Least Recently Used (LRU) cache. It should support the ...
- IOS9新特性之Contacts联系人
在以前iOS开发中,涉及联系人相关的编程,代码都非常繁琐,并且框架的设计也不是Objective-C风格的,这使开发者用起来非常的难受.在iOS9中,apple终于解决了这个问题,全新的Contact ...