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>

时间： 2024-10-30 22:32:36

leaflet+esri-leaflet+heatmap实现热力图的相关文章

Leaflet(Esri)初识

加载本地地图 <html> <head> <metacharset=utf-8/> <title>IdentifyingFeatures</title> <metaname='viewport'content='initial-scale=1,maximum-scale=1,user-scalable=no'/>  <linkrel="stylesheet&q

leaflet 整合 esri

此 demo 通过 proj4js 将 leaflet 与 esri 整合起来,同时添加了 ClusteredFeatureLayer 的支持. 下载 <html> <head> <meta charset=utf-8 /> <title>Esri Leaflet Quickstart</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-sc

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

Leaflet 是一个非常小巧灵活的 Geo js 库,esri 本身也在 Github 上有 leaflet 的相关项目.但是 leaflet 本身支持 Web Mercator Auxiliary Sphere tiling scheme,无法直接加载 arcgis server 发布的图层缓存,需要通过 Proj4 这个库进行转换,这里涉及了投影的相关转换配置,可是没有相关专业知识怎么配置呀,不过只要会搜,一切都是可以的. 以下是具体的步骤: 1. 打开 ArcGIS 的 MapServe

使用Leaflet创建地图拓扑图

之前我们采用过 Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一种古老项目,略显臃肿,面向更新的前端地图方案,在客户的介绍下,我们找到了leaflet - 基于HTML5的轻量地图客户端方案,结合Qunee使用,以及第三方插件,实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件,作者在乌克兰,在移动设备上的有良好的体验,比较新和现代的地图客户端,类库压缩后只有33k,非常小巧,这一点让qunee都相形见绌,先看一个leaflet的入

Leaflet使用介绍

Leaflet 第一章概述 Leaflet是一个为建设交互性好适用于移动设备地图的领先开源JavaScript库.代码大小仅仅33KB,它具有开发在线地图的大部分功能.Leaflet设计坚持简便.高性能和可用性好的思想,能够在所有主流的桌面和移动平台高效的运作.支持插件扩展,拥有漂亮.易用的API文档和一个简单的.可读的源代码. 官方网址http://leafletjs.com/index.html,通过官方网址可以下载Leaflet. 第二章 Leafle

Leaflet 调用百度瓦片地图服务

在使用 leaflet 调用第三方瓦片地图服务的项目,主要谷歌地图.高德地图.百度地图和 OSM 地图,与其他三种地图对比,百度地图的瓦片组织方式是不同的.百度从中心点经纬度(0,0)度开始计算瓦片,而谷歌地图是从左上角经纬度(-180,90)度开始计算瓦片:如果直接使用百度瓦片地图服务会请求不到瓦片,因此需要转换一下.借助 leaflet-tileLayer-baidu 这个插件: //需要引入 proj4.js 和 proj4leaflet.js 插件,使用script标签引入的方式 L.C

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

by 李远祥在leaflet中图层一般分为底图(Basemap)和叠加图层(Overlay).前面章节已经介绍过底图其实也是实现了TileLayer 接口,而其他的叠加图层要么就是叠加的业务图层,要么就是动态显示的图形和符号.这一点在esri leaflet中也是有对照的. ArcGIS产品中比较让人熟知的图层包括ArcGISDynamicMapServiceLayer.ArcGISImageServiceLayer.ArcGISTiledMapServiceLayer.FeatureLaye

【GIS】vue esri-leaflet

1.npm install esri-leaflet --save 2.引入包 import Leaflet from "leaflet"; var esri = require("esri-leaflet"); 3.添加底图 esri.basemapLayer("Topographic").addTo(this.map); 4.添加动态服务 esri.dynamicMapLayer({ url:"https://services.ar

善用设计模式改善我们丑陋的代码——策略模式

有时候因为种种原因导致我们会写出很多丑陋的代码,比如赶工时,短暂性的偷懒,不会设计模式等等导致代码沉积,一个cs上万行代码这样场景是有发生, 当然这里也包括我...所以时间充裕一点之后就想重构一下,毕竟项目中的需求是不断变更的,面对需求变更,尽量做到最低限度的修改代码,最大化的扩充新代码,还有一点就是不要过分的追求设计模式,做到适可为止,太设计模式了会导致类太多,不好管理,在项目开发中,其实仔细考虑一下,你会发现很多业务逻辑都有相应的设计模式帮你优化,毕竟这些都是前辈们踩了无数的坑,经过无数