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实现热力图的更多相关文章

  1. Leaflet(Esri)初识

    加载本地地图 <html> <head> <metacharset=utf-8/> <title>IdentifyingFeatures</tit ...

  2. Leaflet+heatmap实现离线地图加载和热力图应用

    本人博客主页:http://www.cnblogs.com/webbest/ 2017年春节已经过完,新一年的奋斗也刚刚开始.今年要经历的挑战也是大大的...不扯了. 年底前软件项目相对较多,恰巧在年 ...

  3. Leaflet绘制热力图【转】

    http://blog.csdn.net/giser_whu/article/details/51485871 时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了,le ...

  4. leaflet 整合 esri

    此 demo 通过 proj4js 将 leaflet 与 esri 整合起来,同时添加了 ClusteredFeatureLayer 的支持. 下载 <html> <head> ...

  5. leaflet地图库

    an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...

  6. esri-leaflet入门教程(1)-leaflet介绍

    esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥 关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...

  7. 【GIS】postgres(postgis) --》nodejs+express --》geojson --》leaflet

    一.基本架构 1.数据存储层:PostgreSQL-9.2.13 + postgis_2_0_pg92 2.业务处理层:Nodejs + Express + PG驱动 3.前端展示层:Leaflet ...

  8. 使用 Leaflet 显示 ArcGIS 生成西安80坐标的地图缓存

    Leaflet 是一个非常小巧灵活的 Geo js 库,esri 本身也在 Github 上有 leaflet 的相关项目.但是 leaflet 本身支持 Web Mercator Auxiliary ...

  9. 入门Leaflet之小Demo

    入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Poin ...

随机推荐

  1. Three.js与webVR

    WebVR如此近 - three.js的WebVR示例程序解析 关于WebVR 最近VR的发展十分吸引人们的眼球,很多同学应该也心痒痒的想体验VR设备,然而现在的专业硬件价格还比较高,入手一个估计就要 ...

  2. React——props的使用以及propTypes

    组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...

  3. Jupyter(Python)中无法使用Cache原理分析

    前言 最近需要在Jupyter中写一个类库,其中有一个文件实现从数据库中读取空间数据并加载为Feature对象,Feature对象是cartopy封装的geomery列表,能够方便的用于作图等.因为有 ...

  4. Opengl4.5 中文手册—B

    索引 A      B    C      D     E     F     G H      I     J      K     L     M     N O      P    Q      ...

  5. Knapsack I 竟然是贪心,证明啊。。。。

    Knapsack I Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitSt ...

  6. Select的option事件问题

    一开始看你们会觉得没问题,我也就是觉得没问题所以才找不到错误所在. 问题出在option本身是没有事件的说法的,只能在select里添加事件,再获取option的属性值 这是我的写法 select设置 ...

  7. Ansible(一) - 入门及安装

    Ⅰ. Ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置 ...

  8. java基础知识及详细笔记

    第一章:初识java 1.1.java的概述 ü  什么是计算机程序:计算机按照某种顺序而完成的一系列有序指令的集合. ü  Java的作用:1:安装和运行本机上的桌面程序.2:通过浏览器访问面向in ...

  9. 解决VMware下安装Ubuntu 16.04 不支持1920X1080分辨率的问题

    解决方法: flashmx@ubuntu:~$ cvt # 192.07M9) hsync: 67.16 kHz; pclk: 173.00 MHz Modeline -hsync +vsync fl ...

  10. Python自学笔记-字符串编码(来自廖雪峰的官网Python3)

    感觉廖雪峰的官网http://www.liaoxuefeng.com/里面的教程不错,所以学习一下,把需要复习的摘抄一下. 以下内容主要为了自己复习用,详细内容请登录廖雪峰的官网查看.   1.理解变 ...