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 ...
随机推荐
- 《Head First Java》读书笔记（2） - Java面向对象思想
1.了解继承 对象继承实际上就是一种"is - a"的关系,如上图的"PantherMan is a SuperHero?",是,那么便属于继承的理解. 继承能 ...
- struts2前后台交互
1.前台到后台A.form提交,后台用getParameter()方法拿到数据:B.url用?+&C.Ajax使用data:{username:account,password:passwor ...
- myeclipse一些快捷键 错了或者没说到补充下
Ctrl + 1 快速修复Ctrl + D 删除当前行 Ctrl + Alt + ↓ 复制当前行到下一行(复制增加)Ctrl + Alt + ↑ 复制当前行到上一行(复制增加)Alt + ↓ 当前行 ...
- axios 学习笔记
官方文档地址:https://github.com/axios/axios axios 是一个基于 Promise 的HTTP库,可以用在浏览器和 node.js 中 特性: • 从浏览器发起 XML ...
- MySQL主从同步和读写分离的配置
主服务器:192.168.1.126 从服务器:192.168.1.163 amoeba代理服务器:192.168.1.237 系统全部是CentOS 6.7 1.配置主从同步 1.1.修改主服务器( ...
- Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)ABCD
A. Arpa and a research in Mexican wave time limit per test 1 second memory limit per test 256 megaby ...
- linux备份文件脚本
#!/bin/sh #Author: Opal TODAY=`date +%Y%m%d` YESTERDAY=`date -d"-1 day" +%Y%m%d` mkdir -p ...
- python之decode、encode及codecs模块
一.先说说编解码问题 编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符串解码(decode)成unicode,再从unicode编码(encode)成另一种编码. Eg: str ...
- var let const 的区别
Var let const 的区别 1.Var 定义的变量存在变量提升,而了let和const不存在变量提升.即在定义的变量代码上使用该变量,var的会输出undefined,而let的会报错. 2. ...
- Window2008 R2（64位）使用codesmith连接Sqlite
①打开C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config目录,找到machine.config文件新增 <add name=" ...