正文

leaflet+esri-leaflet+heatmap实现热力图

没钱的小兵  没钱的小兵  2022-09-25  783

关键词：

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>

esri-leaflet入门教程-自定义底图

esri-leaflet入门教程（3）-自定义底图by李远祥在前面的篇章我们已经了解到了怎么样使用FlatUI、leaflet和esri-leaflet去搭建简单的地图应用界面了。如果有着手写代码的朋友可能已经发现第一个HelloWorld程序，使... 查看详情

Esri-Leaflet - 远距离搜索

】Esri-Leaflet-远距离搜索【英文标题】：Esri-Leaflet-Searchwithinadistance【发布时间】：2021-03-1615:45:52【问题描述】：我需要使用存储在ArcGISOnline中的要素图层来设计应用程序。使用地理编码器/搜索，我需要能够输入地址并选择距离（... 查看详情

esri-leaflet入门教程-动态要素加载

esri-leaflet入门教程（5）- 动态绘制图形by李远祥在上一章节中已经说明了esr-leaflet是如何加载ArcGISServer提供的各种服务，这些都是服务本身来决定的，API脚本只是非常简单的调用。但如果要做一列的地图... 查看详情

esri-leaflet入门教程-加载各类图层

esri-leaflet入门教程（4）-加载各类图层by李远祥在leaflet中图层一般分为底图（Basemap）和叠加图层（Overlay）。前面章节已经介绍过底图其实也是实现了TileLayer接口，而其他的叠加图层要么就是叠加的业务图层，要么... 查看详情

esri-leaflet入门教程-动态绘制图形

esri-leaflet入门教程（5）-动态绘制图形by李远祥在上一章节中已经说明了esr-leaflet是如何加载ArcGISServer提供的各种服务，这些都是服务本身来决定的，API脚本只是非常简单的调用。但如果要做一列的地图交互操... 查看详情

leaflet绘制热力图

时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了，leaflet因其轻量、灵活性得到了越来越多的应用。并且leaflet的插件也非常多，综合使用的话，可以很容易的实现数据的可视化分析与应用1、leaflet-heat插件leaf... 查看详情

gisvueesri-leaflet(代码片段)

1、npminstallesri-leaflet--save2、引入包importLeafletfrom"leaflet";varesri=require("esri-leaflet"); 3、添加底图esri.basemapLayer("Topographic").addTo(this.map); 4、添加动态服务 esri.dynamicMapLayer(url:"https://services.arcgisonline.com/arcgis/rest/services/Specialty/... 查看详情

WIX - Heat.exe - Heat.exe 是不是支持多种多收获类型

】WIX-Heat.exe-Heat.exe是不是支持多种多收获类型【英文标题】：WIX-Heat.exe-DoesHeat.exesupportmultiplemultipleharvesttypeWIX-Heat.exe-Heat.exe是否支持多种多收获类型【发布时间】：2016-09-0903:35:38【问题描述】：我想使用Heat.exe命令构建一个WIX文... 查看详情

heat应用

作为OpenStack中的编排引擎，Heat能够出色的完成编排任务，井井有条地管理编排出来的资源。但同时，Heat也是一个出色的应用部署引擎，它提供了一套内置的框架去完成一系列复杂的应用部署任务。使用Heat来部署应... 查看详情

openlayer3+postgis+geoserver搭建简单gis服务框架问题探究

...来进行开发，简单的分析查询会采用官方api或者leaflet，esri-leaflet等进行开发，复杂的查询分析统计功能会利用Geoprocessor(简称GP)来进行操作，采用这种商业平台好处显而易见是开发效率很大的提升，因为在这么多年的发展过程中... 查看详情

heat模板

Heat目前支持两种格式的模板，一种是基于JSON格式的CFN模板；另外一种是基于YAML格式的HOT模板。CFN模板主要是为了保持对AWS的兼容性。HOT模板是Heat自有的，资源类型更加丰富，更能体现出Heat特点的模板。一个典型的HOT模板由下... 查看详情

heat入门第一步

Heat类似于AWS的CloudFormation,是OpenStackOrchestration进程的一个项目，OpenStackOrchestration旨在创建一个人性化的服务去管理整个云架构，服务和应用的生命周期。heat实现了一种自动化的通过简单定义和配置就能实现的云部署方式... 查看详情

heat创建stack

1.使用模板创建虚拟机heat_template_version:2018-09-04description:Simpletemplatetodeployavirtualmachine.resources:my_hello_vm:#资源名type:OS::Nova::Server#nova方法properties:image:cirros#镜像名flavor:m1.small#flavor名net 查看详情

多实例的heat模板(代码片段)

一、heat编排 heat编排简单来讲，就是替代人工自动选择OpenStack自身基础架构资源，包括计算、网络和存储等资源。通过编排这些资源，用户可以得到最基本的VM。二、heat模板目前heat支持两种格式的... 查看详情

如何包含由 Heat 创建的 Wix Fragments

】如何包含由Heat创建的WixFragments【英文标题】：HowtoincludeWixFragmentscreatedbyHeat【发布时间】：2010-11-1609:53:28【问题描述】：我有以下片段：<?xmlversion="1.0"encoding="utf-8"?><Wixxmlns="http://schemas.microsoft.com/wix/2006/wi"><Fragmen 查看详情

packstack安装openstackqueens版本:在horizon里没有heat的编排目录

原因：beforequeensheatwasinsidehorizoncode,inqueensandlater,heatdashboardisinadifferentpackageandneedtobeinstalled,packagename:openstack-heat-ui 解决办法是：yuminstall-yopenstack-heat-ui 重启服务：systemctl restartopenstack-heat*systemctlrestarthttpd 查看详情

heat-autoscaling

在openstack的I版本号中,Heat中加入了对于AutoScaling资源的支持，github上也提供了相应的AutoScaling的模板,同一时候也支持使用ceilometer的alarm来触发ScalingPolicy。AutoScaling定义的流程首先定义一个AutoScalingGroup，该Group定义了能够持有资源... 查看详情

Wix、Heat 和 Wxi 文件

】Wix、Heat和Wxi文件【英文标题】：Wix,HeatandWxiFile【发布时间】：2009-10-2106:39:02【问题描述】：我正在使用heat.exe生成文件列表，我需要替换File/@Source="SourceDir"所以我传递-var和目录名称，但这些变量是在我的.wxi文件中定义的如何... 查看详情