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

by 李远祥

在leaflet中图层一般分为底图（Basemap）和叠加图层（Overlay）。前面章节已经介绍过底图其实也是实现了TileLayer 接口，而其他的叠加图层要么就是叠加的业务图层，要么就是动态显示的图形和符号。这一点在esri leaflet中也是有对照的。

ArcGIS产品中比较让人熟知的图层包括ArcGISDynamicMapServiceLayer、ArcGISImageServiceLayer、ArcGISTiledMapServiceLayer、FeatureLayer、GraphicsLayer、VectorTileLayer，这些图层都比较常用，在ArcGIS JavaScript API中使用也是相当的方便。在esri leaflet中同样也包含了所有的这些图层接口，可以看看关于Layer的是实现，如下图

当然，esri leaflet由于跟leaflet有所对接，所以还根据leaflet的接口于自家的服务实现了vector basemap（矢量底图）、Heatmap（热点地图）、clustered feature Layer（聚合图层）以及与自己的矢量切片图层。但这几类图层是在esri-leaflet.js 的基础上需要加入Plugin才能实现。当然实现起来也是相对简单。接下来将是各种图层的加载方式。

1. 动态图层加载

动态图层使用的是 L.esri.DynamicMapLayer 接口，其构建方式 L.esri.dynamicMapLayer(<Object>options)。其中option 中有好几个重要的参数，例如url（服务路径）、layers（图层，指的是地图服务中的图层索引的数组，如要加载第2、3、6 层，则输入数据为 [1,2,5]）、layerDefs(图层过滤条件)、opacity（透明度）。为了确保官网上代码是准确无误而且完善的，笔者特意自己通过ArcGIS Server 去发布一些地图服务进行加载。

function addDyLayer(){

    var envLayer=L.esri.dynamicMapLayer({

     url: 'http://localhost:6080/arcgis/rest/services/env/MapServer',

     opacity: 0.8,

      layers: [0,3]

});

     map.addLayer(envLayer);

可以看到这跟ArcGIS JavaScript API 还是有小小的区别，其差异在于构建的时候esri leaflet是将url也一并写到option 里面。如果要加载所有的图层，layers参数就不需要设置了，加载的就是动态地图服务的本身设置。如果只加载某一层，layers参数同样是个数据，例如只加载第二层，那则写成 layers: [1] 。

还有一点需要注意的是，url的构成必须是整个服务路径，而不能带有图层索引号，这不同于ArcGIS JavaScript的ArcGISDynamicMapServiceLayer 单图层加载，如这种 http://localhost:6080/arcgis/rest/services/env/MapServer/0 在esri leaflet 中是不允许的，所以ArcGIS 的开发人员很容易会自觉套用。其效果如下图显示

2.切片图层加载

切片图层相对来说比较简单，因为切片中可以设置的部分本来就不多，其构建方式与动态图层一样，只是option的参数部分相对来说非常少，反而不想BasemapLayer 那么多。按照leaflet的理念，有了basemap之后应该是不会其他的切片图层存在，但有时候为了提升性能，也会有有部分人希望通过叠加切片图层去提升加载的效率。而切片图层最常用的构建方式就是直接加入url，其他的诸如初始显示位置、显示级别等都在map中实现了。如下代码，就是使用了map控件加载切片图层。

map = L.map("mapDiv").setView([23.1, 113.2], 9);//定位在广州

customBaselayer = L.esri.tiledMapLayer(

    {url: "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer"}).addTo(map);

3.要素图层加载

要素图层featurelayer在ArcGIS JavaScript API里面一般是担当数据编辑的功能，当然其后端发布需要数据源来自于ArcSDE数据库。而在esri leaflet 里面，这个featurelayer 并不全是用作编辑，它有相当的一部分功能是对口graphiclayer。先来看看官网上的例子，其加载代码也是很简单，直接使用要素服务的索引号作为图层加载（这应该是esri leaflet里面唯一可以直接在服务地址中使用图层索引号的地方），代码如下

var map = L.map('map').setView([45.526, -122.667], 13);

  L.esri.basemapLayer('Streets').addTo(map);

  L.esri.featureLayer({

    url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'

  }).addTo(map);

来看看其效果如何，加入的url是一个featureservice的一个图层，所以使用了一个索引号为0，意味着只加载第一层的数据。由于这个数据在加载到地图中的时候，leaflet会默认给点线面加入一个符号，当然这个符号样式也是可以后期修改的。从下图可以看出，这个默认的符号比较“互联网”一点。

4.热点图加载

热点图是一种比较宏观的表现方式，一般用来表示点要素的密度分布。在早期的ArcGIS Javascript API中是没有热点图层的形式，必须使用spatial工具进行制作，然后通过GP生成热点图进行加载。而在esri-leaflet中，热点图的生成就非常简单了，直接使用L.esri.Heat.featureLayer 接口可以实现。但是，该接口并非直接集成在esri-leaflet 中，而是通过plugins来实现，也就是说，还必须引用实现该功能的js才能实现。通过github 地址可以获取该js脚本 https://github.com/Esri/esri-leaflet-heatmap/tree/master/src

我们无需纠结其怎么动态实现热点图生成，只需要关注怎么使用就行了。在原来代码的head标签出多加入该HeatmapFeatureLayer.js 文件，然后进行调用，调用的方法如下：

L.esri.Heat.featureLayer({

    url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/ArcGIS/rest/services/Graffiti_Reports/FeatureServer/0',

    radius: 12

  }).addTo(map);

主要两处重要的参数，一是构建时的URL必须使用的是FeatureService，并且是点图层；而是需要输入融合的半径radius 的值。

5.聚合图层加载

聚合图是一种表现更加优美的地图，它既兼顾了热点图的宏观特性，又最大限度的保留了一些细节的总结。下图就是聚合图的一些表现，不同的颜色表示不同的数量值，并且将这个数量标绘在地图上。

聚合图同样也需要插件才能实现，可以在 https://github.com/Esri/esri-leaflet-cluster 找到其代码，也是简单的引用js脚本就OK了，其具体的实现参考以下调用方法，使用 L.esri.Cluster.featureLayer 接口

  L.esri.Cluster.featureLayer({

    url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0'

  }).addTo(map);

聚合图和热点图都是在客户端动态构建的，不需要再对esri的feature service 作设置，其自带的样式也是比较美观。当然，这些样式也是可以定义的。在后面的章节中我们会再进一步讨论。

除此之外，esri-leaflet 还支持其他的一些ArcGIS 服务，例如 imageservice，streamService等，其加载方式也比较有规律，例如在家影像服务，

    L.esri.imageMapLayer({

      url: 'https://landsat.arcgis.com/arcgis/rest/services/Landsat/PS/ImageServer',

      attribution: 'United States Geological Survey (USGS), National Aeronautics and Space Administration (NASA)'

    }).addTo(map);

加载其Geoevent的流服务

  var buses = L.esri.streamFeatureLayer({

    url: 'https://geoeventsample3.esri.com:6443/arcgis/rest/services/SeattleBus/StreamServer',

    pointToLayer: function (geojson, latlng) {

      return L.circleMarker(latlng, {

        fillColor: createRandomFill(),

        fillOpacity: 0.8,

        color: "#cccccc",

        weight: 2

});

},

  }).addTo(map);

总结：esri-leaflet 无论是基础脚本还是扩展脚本，都实现了自家全线服务的支持，单从兼容性来看，已经不逊色于自家的ArcGIS Javascript API，而且esri-leaflet非常小，基本上不存在安装部署的问题，再也不需要兼顾庞大而复杂的dojo，给ArcGIS的开发者们一种全新的开发方式。

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

leaflet加载各类图层
leaflet.js本身大小只有33k,它能加载的图层种类是有限的,不过可以借助esri-leaflet.js这个插件加载其他的图层,如果需要加载wmts(地图瓦片服务)可以引用leaflet-til ...
leafLet入门教程兼leafLet API中文文档参考
leafLet官方文档链接(英文原版):https://leafletjs.com/reference-1.3.4.html#marker-bindpopup 文章目录 leafLet教程一.简单入 ...
Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
Android Arcgis入门(12)、加载天地图
在项目中可以经常需要动态加载一些图层,像投影地图服务.投影地图服务器.其实网上有大量这样的服务,比如天地图官网, . 随便点开一个服务,里面有相关的信息.那如何加载这样图层服务呢. 一.首先感谢这篇博 ...
星图地球数据云，便捷加载各类在线地图服务的又一神器
星图地球目前发布了一系列的产品,对我来说比较感兴趣的是星图地球数据云(GEOVIS Earth Datacloud)这款地球大数据产品.今天,我就带大家以来深入在线体验一下这款产品. 01 在线体验 ...
【自然语言处理入门系列】加载和预处理数据-以Cornell Movie-Dialogs Corpus数据集为例
[自然语言处理入门系列]加载和预处理数据-以Cornell Movie-Dialogs Corpus数据集为例 Author: Yirong Chen from South China Univers ...
【Arcgis Engine开发】AE开发把影像或者矢量加载到图层
AE开发把影像或者加载到图层 1.创建一个类工厂 2.使用类工厂创建一个要使用的工作区 3.使用工作区打开并得到图层的dataset 4.把dataset装入到新建的图层实例 5.把图层加载到MapC ...
mapboxgl 加载常用图层汇总
mapboxgl 加载矢量.影像.geojson等图层及添加专题图层(热力图.唯一值)汇总 1.加载常用图层 1.1 wmts服务 1.2 矢量服务 1.2.1 加载矢量切片数据源 1.2.2 加载g ...
C#+AE加载shape图层
今天学了下用AE+C#加载shapefile图层文件,其实网上已经有很多资源了,我试了两种方法,看了很多代码,但只有一种代码能用,其他都出现问题,然而我也并不知道什么问题以下是我参考的两个网站: 在 ...

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

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

最新文章

热门文章