使用要素图层
目录
原文地址：Working with feature layers
学习在Leaflet中如何使用要素图层，本教程假设你已经知道如何创建基本的Leaflet地图了，不会的请参考 Esri Leaflet 第一个例子：加载ArcGIS底图。
复制初始Html页面，初始化底图
首先，复制框架代码，足以描述一个简单页面的结构就可以，然后保存为一个.html文件。代码包含一个<script>标签用于构建Leaflet地图对象，并从ArcGIS Online中添加BaseMap。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Leaflet Map with a Feature Layer</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.0.4/dist/esri-leaflet.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
center: [45.526, -122.667], //注意Leaflet中坐标点的定义：纬度在前，经度在后
zoom: 13
});
var esriStreets = L.esri.basemapLayer('Streets').addTo(map); //定义basemapLayer并将其加载到地图容器中
</script>
</body>
</html>
添加要素图层到地图
我们将用Esri Leaflet 插件的 L.esri.featureLayer 类添加一个REST服务。这个FeatureLayer可以是地图服务（MapService），也可以是要素服务（Feature Service）。你必须提供该要素图层的URL，具体有关FeatureLayer的定义，可以参照之前的博文：Esri Leaflet ：介绍各种图层类型 。
下面是用两种服务创建要素图层的例子：
var portlandHeritageTrees = L.esri.featureLayer({url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'});
var worldCities = L.esri.featureLayer({url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer/0'});
为了将其展示在地图上，我们需要使用Leaflet的addTo方法。我们可以直接将该方法链接在图层定义的后面，或者单独使用一行调用。
//方式一：直接链接在定义后面
var portlandHeritageTrees = L.esri.featureLayer({url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'}).addTo(map);
//方式二：先定义图层，另起一行调用addTo
var portlandHeritageTrees = L.esri.featureLayer({url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'});
portlandHeritageTrees.addTo(map)；
这时刷新地图，我们将看到地图上有许多蓝色的标记，这些就是要素服务中的要素。leaflet用默认的样式渲染这些要素。你也可以自行定义渲染的风格。具体的例子可以查看以下的链接：
查看Esri Leaflet文档，了解更多关于Feature Layer构造函数的选项。
添加Esri Leaflet渲染器插件
如果想在服务发布的时候使用符号设置，我们需要添加Esri Leaflet 渲染器的脚本库，在页面的<head>标签中添加一个<script>标签。
<!-- 加载 Esri Leaflet 渲染器 -->
<script src="https://unpkg.com/esri-leaflet-renderers@2.0.2/dist/esri-leaflet-renderers.js"></script>
这时保存脚本并刷新后，本来蓝色的标记将显示为红色的圆圈。
添加弹出窗口
现在为要素图层添加一个弹出窗口，弹出窗口可以包含服务中从字段得来的静态文本和动态文本。我们将使用bindPopup创建这个弹出窗口，具体更多有关弹出窗口的信息请参考文档。
将会使用到Leaflet的Utility Template，在大括号里放置字段的名称，通过L.Util.template获取字段的属性。
portlandHeritageTrees.bindPopup(function(evt) {
return L.Util.template('<h3>{COMMON_NAM}</h3><hr /><p>This tree is located at {ADDRESS} and its scientific name is {SCIENTIFIC}.', evt.feature.properties);
});
保存测试一下。
最终的HTML文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Leaflet Map with a Feature Layer</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.0.4/dist/esri-leaflet.js"></script>
<!-- Load Esri Leaflet Renderers from CDN -->
<script src="https://unpkg.com/esri-leaflet-renderers@2.0.2/dist/esri-leaflet-renderers.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
center: [45.526, -122.667],
zoom: 13
});
var esriStreets = L.esri.basemapLayer('Streets').addTo(map);
var portlandHeritageTrees = L.esri.featureLayer({url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'}).addTo(map);
portlandHeritageTrees.bindPopup(function(evt) {
return L.Util.template('<h3>{COMMON_NAM}</h3><hr /><p>This tree is located at {ADDRESS} and its scientific name is {SCIENTIFIC}.', evt.feature.properties);
});
</script>
</body>
</html>
转载自：https://blog.csdn.net/meizi454089902/article/details/81298873
