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 ...
随机推荐
- Apache处理请求步骤及过程
Apache请求处理循环详解 : 1.Post-Read-Request阶段: 在正常请求处理流程中,这是模块可以插入钩子的第一个阶段.对于那些想很早进入处理请求的模块来说,这个阶段可以被利用. 2. ...
- (中等) HDU 4979 A simple math problem. , DLX+重复覆盖+打表。
Description Dragon loves lottery, he will try his luck every week. One day, the lottery company brin ...
- HTML学习（四）样式
通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表. 实例:例1:本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化.& ...
- lpc1768ADC使用
Lpc1768内置有一个ad外设,该外设有八路复用输入,所以,可以同时接八路ad设备,同时还支持触发转换模式,由外部端口进行ad触发,ad转换完成之后可以产生中断 Lpc1768支持的转换模式有两种, ...
- 我推荐的一些iOS开发书单
文/叶孤城___(简书作者)原文链接:http://www.jianshu.com/p/2fa080673842著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 上次发了一下比较不错的i ...
- JdbcTemplate的主要用法
JdbcTemplate主要提供以下五类方法: execute方法:可以用于执行任何SQL语句,一般用于执行DDL语句: update方法及batchUpdate方法:update方法用于执行新增.修 ...
- MAC中使用Vim和GCC编译C程序
1.打开终端 2.输入以下命令进入vim编辑器: vim a.c 3.进入编辑器后按i进入insert模式,然后键入以下代码: #include<stdio.h> int main(){ ...
- 把windows的bat用好了，也很不错
taskkill /f /t /im nginx.exe cp2nginx xcopy /e /i /y “D:\workspace\workspace1\aff\WebContent” “D:\ng ...
- OC--设置视图控制器，从导航栏的下边缘开始
self.edgesForExtendedLayout = UIRectEdgeNone;
- spring整合mybatis,springMVC的0配置文件方式
0配置文件的形式主要是采用spring3.0提供的@configuration注解和spring容器在启动的时候会加载实现了WebApplicationInitializer的类,并调用其onStar ...