leaflet+esri-leaflet+heatmap实现热力图
1.环境准备
1）下载leaflet.js插件, 官网传送:http://leafletjs.com/
2）下载esri-leaflet.js插件, 官网传送:http://esri.github.io/esri-leaflet/
3）下载heatmap.js插件, 官网传送:https://www.patrick-wied.at/static/heatmapjs/
也可以直接在此下载，所有插件已压缩打包 https://files.cnblogs.com/files/mengjiaxing/lib.zip
2.demo样例
1）在html文件中引入所有需要用到的插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>heatmap</title>
<link rel="stylesheet" href="lib/leaflet/leaflet.css">
<script src="lib/leaflet/leaflet.js"></script>
<script src="lib/proj4-compressed.js"></script>
<script src="lib/proj4leaflet.js"></script>
<script src="lib/heatmap/heatmap.js"></script>
<script src="lib/heatmap/leaflet-heatmap.js"></script>
<script src="lib/leaflet/esri-leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 900px;width: 900px;"></div>
</body> </html>
2）加载arcgis切片服务
第一步：打开需要加载的服务，记下红线中的数据
第二步：将不同等级的Resolution拷下来放进数组里面
var res=[
0.703125, // Level 0
0.3515625, // Level 1
0.17578125, // Level 2
0.087890625, // Level 3
0.0439453125, // Level 4
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
6.866455078125E-4,
3.4332275390625E-4,
1.71661376953125E-4,
8.58306884765625E-5,
4.291534423828125E-5,
2.1457672119140625E-5,
1.0728836059570312E-5,
5.364418029785156E-6,
2.682209014892578E-6,
1.341104507446289E-6
];
第三步：进入http://spatialreference.org/ref/sr-org/ 搜索你的空间参考系，找到相应的参考系，点击去，点击Proj4得到字符串
第四步：生成坐标参考系
var crs = new L.Proj.CRS('你的参考系',
'第三步得到的字符串',
{
resolutions: 第二步得到的res,
origin:第一步记下的origin值,
});
例如：
var crs = new L.Proj.CRS('SR-ORG:7408',
'+proj=longlat +ellps=GRS80 +no_defs',
{
resolutions: res,
origin: [-180,90],
});
第五步：生成地图
baselayer = L.esri.tiledMapLayer(
{url: "http://192.168.1.156:6080/arcgis/rest/services/vec2/MapServer/"});
var res=[
0.703125, // Level 0
0.3515625, // Level 1
0.17578125, // Level 2
0.087890625, // Level 3
0.0439453125, // Level 4
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
6.866455078125E-4,
3.4332275390625E-4,
1.71661376953125E-4,
8.58306884765625E-5,
4.291534423828125E-5,
2.1457672119140625E-5,
1.0728836059570312E-5,
5.364418029785156E-6,
2.682209014892578E-6,
1.341104507446289E-6
];
var crs = new L.Proj.CRS('SR-ORG:7408',
'+proj=longlat +ellps=GRS80 +no_defs',
{
resolutions: res,
origin: [-180,90],
});
L.map('map', {
center: new L.LatLng(26.565052,106.691417),
zoom: 10,
crs: crs,
layers: [baselayer]
});
第六步：生成地图渲染数据
var data={"max":108,"data":[{"x":104.54040688300006,"y":24.79143100700003,"value":83},{"x":104.81660000100004,"y":24.804038889000026,"value":98},.....] //数据过多只粘贴一部分
第七步：生成渲染函数
function rendererHeatMap(data){
var cfg = {
"radius": 0.04,
"maxOpacity": .8,
"scaleRadius": true,
"useLocalExtrema": true,
latField: 'y',
lngField: 'x',
valueField: 'value'
};
heatmapLayer = new HeatmapOverlay(cfg);
map.addLayer(heatmapLayer);
heatmapLayer.setData(data);
}
第八步：调用渲染生成热力图
rendererHeatMap(data);
第九步：结果截图
项目结构：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>heatmap</title>
<link rel="stylesheet" href="lib/leaflet/leaflet.css">
<script src="lib/leaflet/leaflet.js"></script>
<script src="lib/proj4-compressed.js"></script>
<script src="lib/proj4leaflet.js"></script>
<script src="lib/heatmap/heatmap.js"></script>
<script src="lib/heatmap/leaflet-heatmap.js"></script>
<script src="lib/leaflet/esri-leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 900px;width: 900px;"></div>
<script>
baselayer = L.esri.tiledMapLayer(
{url: "http://localhost:6080/arcgis/rest/services/vec2/MapServer/"});
var res=[
0.703125, // Level 0
0.3515625, // Level 1
0.17578125, // Level 2
0.087890625, // Level 3
0.0439453125, // Level 4
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
6.866455078125E-4,
3.4332275390625E-4,
1.71661376953125E-4,
8.58306884765625E-5,
4.291534423828125E-5,
2.1457672119140625E-5,
1.0728836059570312E-5,
5.364418029785156E-6,
2.682209014892578E-6,
1.341104507446289E-6
];
var crs = new L.Proj.CRS('SR-ORG:7408',
'+proj=longlat +ellps=GRS80 +no_defs',
{
resolutions: res,
origin: [-180,90],
});
map=L.map('map', {
center: new L.LatLng(26.565052,106.691417),
zoom: 7,
crs: crs,
layers: [baselayer]
}); var data={"max":108,"data":[{"x":104.54040688300006,"y":24.79143100700003,"value":83},.....]; //数据过多只粘贴一部分
function rendererHeatMap(data){
var cfg = {
"radius": 0.2,
"maxOpacity": .8,
"scaleRadius": true,
"useLocalExtrema": true,
latField: 'y',
lngField: 'x',
valueField: 'value'
};
heatmapLayer = new HeatmapOverlay(cfg);
map.addLayer(heatmapLayer); heatmapLayer.setData(data);
} rendererHeatMap(data); </script>
</body> </html>
leaflet+esri-leaflet+heatmap实现热力图的更多相关文章
- Leaflet(Esri)初识
加载本地地图 <html> <head> <metacharset=utf-8/> <title>IdentifyingFeatures</tit ...
- Leaflet+heatmap实现离线地图加载和热力图应用
本人博客主页:http://www.cnblogs.com/webbest/ 2017年春节已经过完,新一年的奋斗也刚刚开始.今年要经历的挑战也是大大的...不扯了. 年底前软件项目相对较多,恰巧在年 ...
- Leaflet绘制热力图【转】
http://blog.csdn.net/giser_whu/article/details/51485871 时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了,le ...
- leaflet 整合 esri
此 demo 通过 proj4js 将 leaflet 与 esri 整合起来,同时添加了 ClusteredFeatureLayer 的支持. 下载 <html> <head> ...
- leaflet地图库
an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...
- esri-leaflet入门教程（1）-leaflet介绍
esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥 关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...
- 【GIS】postgres（postgis） --》nodejs+express --》geojson --》leaflet
一.基本架构 1.数据存储层:PostgreSQL-9.2.13 + postgis_2_0_pg92 2.业务处理层:Nodejs + Express + PG驱动 3.前端展示层:Leaflet ...
- 使用 Leaflet 显示 ArcGIS 生成西安80坐标的地图缓存
Leaflet 是一个非常小巧灵活的 Geo js 库,esri 本身也在 Github 上有 leaflet 的相关项目.但是 leaflet 本身支持 Web Mercator Auxiliary ...
- 入门Leaflet之小Demo
入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Poin ...
随机推荐
- MySQL集群（四）之keepalived实现mysql双主高可用
前面大家介绍了主从.主主复制以及他们的中间件mysql-proxy的使用,这一篇给大家介绍的是keepalived的搭建与使用! 一.keepalived简介 1.1.keepalived介绍 Kee ...
- React——props的使用以及propTypes
组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...
- PLT文件 和 DXF文件
PLT: CAM/CAD类似软件处理的图像文件的文件格式 DXF: AutoCAD(Drawing Interchange Format或者Drawing Exchange Format) 绘图交换文 ...
- Sublimetext3安装Emmet插件步骤
看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. 先关闭Sublime text 3: ...
- Oracle第一波
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 零复制(zero copy)技术
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- HIVE---基于Hadoop的数据仓库工具讲解
Hadoop: Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用来开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop实现了一个分布式文件系统(Hadoop Dist ...
- git-分支使用方式
需求场景:假如你看着教程完成了一个项目,但是感觉第一次代码掌握不牢,想要进行第二次代码练习--如果某某心里想我还有初始备份文件,我此时的心里独白是你的硬盘还够用吗o(╯□╰)o 1 创建一个新分支 - ...
- C#对图片进行马赛克处理，可控制模糊程度
using System.Drawing; using System.Drawing.Imaging; using System.Web.Mvc; namespace MVC2017_Sample.C ...
- SQL查找 删除重复数据只保留一条
--用SQL语句,删除掉重复项只保留一条 --在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢 --1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 ...