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 ...
随机推荐
- [Asp.Net Core轻量级Aop解决方案]AspectCore Project 介绍
AspectCore Project 介绍 什么是AspectCore Project ? AspectCore Project 是适用于Asp.Net Core 平台的轻量级 Aop(Aspect- ...
- sersync 实时同步文件
sersync 主要用于服务器同步,web镜像等功能.sersync是使用c++编写,在结合rsync同步的时候,节省了运行时耗和网络资源.因此更快.sersync配置起来很简单.另外本项目相比较其他 ...
- python函数的参数传递问题---传值还是传引用？
摘要:在python中,strings, tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的对象.不可更改对象的传递属于传值,可更改对象属于传引用.想要在函数中传递 ...
- android中广播的使用
广播消息机制用于进行系统级别的消息通知,每个应用程序可以对感兴趣的广播进行注册,并且将接收广播的方法定义在广播接收器中(Broadcast). 广播可以分为标准广播和有序广播. 注册广播的方法可以动态 ...
- BCB实现BMP图片的RGB分解（转）
源:BCB实现BMP图片的RGB分解 1.打开BMP图片文件,在Image控件中显示: if(dlgOpen1->Execute()) { edt1->Text=dlgOpen1-> ...
- UIAlertController高级之嵌入其他控件
在编码过程中,我们经常遇到需要这样一个效果,就是弹出框的嵌套; 举个最简单的例子,比如你要选择时间,必然需要一个时间选择器DatePicker.但是这个选择器又是在你点击某按钮时弹出,弹出方式最常见的 ...
- NavigationView学习笔记
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/an ...
- CentOS6.5安装python redis模块
1.下载安装包https://pypi.python.org/packages/source/r/redis/redis-2.10.3.tar.gz 2.解压tar -zxf redis-2.10.3 ...
- Windows 7 Professional安装多语言包
本文出自 "王春海的博客" 博客,请务必保留此出处http://wangchunhai.blog.51cto.com/225186/223635 下载了Windows 7 Prof ...
- checkbox、radio控件和文字不对其
一般使用html控件的时候 单选按钮和复选框的控件和文字不对齐 给input控件加上 style="vertical-align: middle; margin-top: -2px; ...