esri-leaflet入门教程（5）- 动态绘制图形
分享
-
2017-03-07
esri-leaflet入门教程（5）- 动态绘制图形
by 李远祥
在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务，这些都是服务本身来决定的，API脚本只是非常简单的调用。但如果要做一列的地图交互操作或者动态渲染等，那就必须使用地图区域跳转、查询结果渲染、动态添加图形等多种交互手段。而这些交互手段基本上离不开一些非服务类型的数据加载，我们可以将其成为动态要素。动态要素一般是在页面端进行动态绘制的。
动态要素这一说法并不是ArcGIS 或者leaflet的说法，而是笔者想了很久之后才编出来的一个名词，为的就是要使ArcGIS JavaScript API 体系与esri-leaflet能找到一个比较好的对应关系，便于ArcGIS的开发人员能够快速的切换过来。esri-leaflet 本身就是基于leaflet去做的扩展，因此，很多情况下都不能摆脱leaflet的限制，文雅点来说就是必须遵循leaflet的定义的接口规范。对于多年ArcGIS开发人员来说，刚开始的时候是有点不习惯的，因为很多时候某些功能和接口不能很好的映射回ArcGIS JavaScript API中。所以，要搞清楚esri-leaflet的使用，那就必须从leaflet本身入手。
在传统的ArcGIS JavaScript API中，要加载一些动态的要素（非直接引用服务的数据），必须使用graphic或者是graphicLayer（其实也是graphic的数组）。graphic在ArcGIS JS里面是由四个部分组成的，分别是geometry(图形)、symbol(符号)、attributes(属性)、infoTemplate(弹窗)，如下图
虽然是四个参数，但并不一定要全部使用才能构建，一般来说最基本是需要一个geometry参数就行了，系统会自动给与graphic一个默认的symbol，这样构成一个最简单的graphic，就可以加载到地图上去了。总的来看，ArcGIS的API中是遵循ArcGIS数据的理念，图元（暂且这么说吧，真不知道中文怎么区分graphic和geometry）的显示是读取了要素的图形和属性，并且可以修改其符号（symbol），在地图交互时还可以绑定一些特定的弹出信息。
但在esri-leaflet中，从它提供的基础类来看，根本没有graphic和symbol，就连geometry都没有！这很让人抓狂。为了搞清楚这个关键问题，笔者特意去翻一遍leaflet的接口。终于在leaflet的基础类型中找到了关于图形的一系列接口 http://leafletjs.com/reference-1.0.3.html#layer，其分组也是相当的奇怪，名叫 Vector Layers ，乍一看还以为是一种矢量地图服务，如下图
这个里面就包含了所有的图形定义格式，传统的线、面、圆等都有了，但没有点，因为点是单独的在UI Layers 里面的Marker 。当然了没有arcgis定义的多，但基本也能满足了。再来看其定义是怎样的，点击polyline去查看其构建例子：
通过上述代码可以发现几个问题，polyline的构建方式是需要传入点的数组，在构建的时候在其option参数中可以设置其样式，例子中就是使用了color参数，最后图形是可以直接作为Layer加载到地图中，可以与这个图形交互，通过fitBounds 方法跳转到polyline的图形位置。
也有人奇怪，点进polyline和polygon等的这些接口，居然没看到有类似的options可以实现color或者是宽度等设置。那是因为这些接口都在Path中实现，其他的如polyline、polygon、circle等都是实现了path的接口。可以查看下Path的options，如下图
可以看到传统的颜色、线宽、透明度等都可以在options里面设置。
从上面的资料基本上可以看到leaflet与ArcGIS的对应关系了。leaflet中的没有所谓的单独的图元一说，在动态要素来说，全部都是属于Layer，都实现了Layer的接口，其相当于ArcGIS体系中将graphicLayer和graphic 融合在一起，leaflet所谓的图元就是ArcGIS的 graphicLayer+graphics。这感觉还是有点乱，但基本上可以了解leaflet和ArcGIS JS体系的差异。
那么问题来了，由于esri-leaflet 中是没有实现类似ArcGIS JavaScript API中的graphic、geometry、symbol等接口，所有的操作都必须在leaflet的基础体系下完成，那这个代码该怎么编写？
我们可以通过查看esri-leaflet的例子，看看它是如何实现前端加载的。笔者查看的例子在http://esri.github.io/esri-leaflet/examples/styling-feature-layer-polylines.html 可以看看其截图效果，对道路进行了动态的渲染。
再来看关键代码实现部分
可以关键部分是获取了ArcGIS 的Featureservice 的要素，针对要素进行了style的设置，做了一个分等级和颜色的渲染。关键部分是使用了L.esri.featureLayer 接口。从这里可以看到端倪，对于动态的要素的加载，esri也是遵循了leaflet的规则，特意搞什么graphiclayer之类的特殊图层，而是想leaflet一样，直接在Layer中实现，当然这个Layer就是自家的featurelayer了。那传统的graphic前端绘制怎么办？esri-leaflet没有给出答案，笔者看到所有的基于后台服务查询的结果最终都是以featurelayer的形式展示出来，esri-leaflet中根本就没有在客户端绘制图形的接口。其实这部分答案很明确，就是使用leaflet本身的Vector Layers ，开发人员可以直接将其等同于graphiclayer就行了。
为了搞清楚真相，笔者又专门查找了 L.esri.featureLayer 的相关说明，发现其options 的属性里面的style一项居然是实现了leaflet本身的ILayer接口，如下图所示
前面我们看到的Vector Layers 部分其实也是实现了ILayer，也就是说，不管是采用什么样的方式去做动态要素的加载和交互操作，最终还是会落到ILayer和Vector Layers 中去，从ArcGIS的实现方法来看，可见一斑了。
原理清楚之后，所以的问题都可以迎刃而解了，关于代码实现部分就变得异常的简单了。接下来就可以用自己的数据按照例子进行制作一遍。例如笔者现在要按照道路的等级对道路进行实际的渲染，分别采用不同的颜色和粗细来渲染。代码很简单，跟例子差不多，不过就是替换成自己的数据。
这里要注意几点，首先要留意的是esri-leaflet是如何获取要素的属性的，代码中可以看到参数中使用的是 feature.properties.type 其中feature.properties是获取属性的方式，后面加点，接着是字段名（笔者的服务里面使用的是type字段分类）。可以通过arcgis server 的服务路径查看服务的字段情况，例如 http://localhost:6080/arcgis/rest/services/dongguan/FeatureServer/2 道路的要素图层信息如下图所示：
这里还要注意一点就是，arcgis server发布的服务，无论原始数据的字段是否大小写，都会一律转为小写字母，所以要特别注意。还有数据中千万别使用中文作为字段名称，这个大家懂的^_^ 。那么可以看看接下来的效果了，如下图所示
接下来就是自定义的图形加载地图上了。前面已经提及过，这类型的加载方式必须使用leaflet的方式进行。例如我们可以通过以下代码去加载一个面图形，并将其加到地图上面。
其实际效果如下：
这里值得注意的有几点，一是面图形的构建是一个二维数组，数组元素记录的是xy坐标，但不是[经度,纬度]，而是恰好反过来，[纬度,经度]。另外，如果要清除掉动态绘制的图形，那就必须使用ILayer的接口，就是在构建面的时候，其实声明的就是一个Layer，可以利用Layer的remove方法进行清除，在该代码实例中要清除前端的图形，那就是使用 polygon.remove();
由于leaflet对点的绘制做了特别的关照，将它放在UI Layer 而非Vector Layers 中，属于非常个性的部分，如果要加载点的数据，也是可以使用leaflet的方法来构建。但是arcgis server 中的点要素服务，如果要直接动态加载，那L.esri.featureLayer 接口中也有特殊的做法。例如如下核心代码
可以看到，在featurelayer中使用了一个方法是pointToLayer ，强行将esri格式转为L.marker 。说到底还是使用了L.marker接口，只不过是再封装了一层转换而已。具体的代码可在 http://esri.github.io/esri-leaflet/examples/styling-feature-layer-points.html 进行查看。
上面的很多代码都是基于arcgis 的featureservice 是制作的，但也有人会说，featureservice的发布需要后台有ArcSDE支撑，如果没有ArcSDE的数据源，那岂不是连基本的动态要素绘制都不能做？其实不然，这个问题Esri的工程师应该早就想到。看接口名称叫 L.esri.featureLayer ，不代表它只能支持featureservice，在上述的动态要素加载的代码中，将featureservice改为使用mapservice，同样可以使可运行的，这个只是命名的名称让大家产生误会而已。笔者也特意尝试了一把，将原来的路径替换为http://localhost:6080/arcgis/rest/services/dongguan/MapServer/2 ，还是能出来原来的结果，因此无需虚惊一场。
总结：总的来说，esri-leaflet在动态要素加载方面还是坚持的不错，尽管大部分的操作都是使用leaflet原有的接口实现。对于从来没有过ArcGIS开发经验的人来说，毫无历史负担，即学即用。对于ArcGIS老鸟来说，还是需要一些时间去琢磨，毕竟一些使用习惯和叫法发生了一定改变。
esri-leaflet入门教程（1）-leaflet介绍：http://zhihu.esrichina.com.cn/article/2805
esri-leaflet入门教程（2）-地图的HelloWorld：http://zhihu.esrichina.com.cn/article/2807
esri-leaflet入门教程（3）-自定义底图：http://zhihu.esrichina.com.cn/article/2806
esri-leaflet入门教程（4）-加载各类图层：http://zhihu.esrichina.com.cn/article/2809
esri-leaflet入门教程（5）- 动态绘制图形：http://zhihu.esrichina.com.cn/article/2808
文章来源：http://blog.csdn.net/liyuanxiang1984/article/details/56672159
by 李远祥
在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务，这些都是服务本身来决定的，API脚本只是非常简单的调用。但如果要做一列的地图交互操作或者动态渲染等，那就必须使用地图区域跳转、查询结果渲染、动态添加图形等多种交互手段。而这些交互手段基本上离不开一些非服务类型的数据加载，我们可以将其成为动态要素。动态要素一般是在页面端进行动态绘制的。
动态要素这一说法并不是ArcGIS 或者leaflet的说法，而是笔者想了很久之后才编出来的一个名词，为的就是要使ArcGIS JavaScript API 体系与esri-leaflet能找到一个比较好的对应关系，便于ArcGIS的开发人员能够快速的切换过来。esri-leaflet 本身就是基于leaflet去做的扩展，因此，很多情况下都不能摆脱leaflet的限制，文雅点来说就是必须遵循leaflet的定义的接口规范。对于多年ArcGIS开发人员来说，刚开始的时候是有点不习惯的，因为很多时候某些功能和接口不能很好的映射回ArcGIS JavaScript API中。所以，要搞清楚esri-leaflet的使用，那就必须从leaflet本身入手。
在传统的ArcGIS JavaScript API中，要加载一些动态的要素（非直接引用服务的数据），必须使用graphic或者是graphicLayer（其实也是graphic的数组）。graphic在ArcGIS JS里面是由四个部分组成的，分别是geometry(图形)、symbol(符号)、attributes(属性)、infoTemplate(弹窗)，如下图
虽然是四个参数，但并不一定要全部使用才能构建，一般来说最基本是需要一个geometry参数就行了，系统会自动给与graphic一个默认的symbol，这样构成一个最简单的graphic，就可以加载到地图上去了。总的来看，ArcGIS的API中是遵循ArcGIS数据的理念，图元（暂且这么说吧，真不知道中文怎么区分graphic和geometry）的显示是读取了要素的图形和属性，并且可以修改其符号（symbol），在地图交互时还可以绑定一些特定的弹出信息。
但在esri-leaflet中，从它提供的基础类来看，根本没有graphic和symbol，就连geometry都没有！这很让人抓狂。为了搞清楚这个关键问题，笔者特意去翻一遍leaflet的接口。终于在leaflet的基础类型中找到了关于图形的一系列接口 http://leafletjs.com/reference-1.0.3.html#layer，其分组也是相当的奇怪，名叫 Vector Layers ，乍一看还以为是一种矢量地图服务，如下图
这个里面就包含了所有的图形定义格式，传统的线、面、圆等都有了，但没有点，因为点是单独的在UI Layers 里面的Marker 。当然了没有arcgis定义的多，但基本也能满足了。再来看其定义是怎样的，点击polyline去查看其构建例子：
// create a red polyline from an array of LatLng points
var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polyline
map.fitBounds(polyline.getBounds());通过上述代码可以发现几个问题，polyline的构建方式是需要传入点的数组，在构建的时候在其option参数中可以设置其样式，例子中就是使用了color参数，最后图形是可以直接作为Layer加载到地图中，可以与这个图形交互，通过fitBounds 方法跳转到polyline的图形位置。
也有人奇怪，点进polyline和polygon等的这些接口，居然没看到有类似的options可以实现color或者是宽度等设置。那是因为这些接口都在Path中实现，其他的如polyline、polygon、circle等都是实现了path的接口。可以查看下Path的options，如下图
可以看到传统的颜色、线宽、透明度等都可以在options里面设置。
从上面的资料基本上可以看到leaflet与ArcGIS的对应关系了。leaflet中的没有所谓的单独的图元一说，在动态要素来说，全部都是属于Layer，都实现了Layer的接口，其相当于ArcGIS体系中将graphicLayer和graphic 融合在一起，leaflet所谓的图元就是ArcGIS的 graphicLayer+graphics。这感觉还是有点乱，但基本上可以了解leaflet和ArcGIS JS体系的差异。
那么问题来了，由于esri-leaflet 中是没有实现类似ArcGIS JavaScript API中的graphic、geometry、symbol等接口，所有的操作都必须在leaflet的基础体系下完成，那这个代码该怎么编写？
我们可以通过查看esri-leaflet的例子，看看它是如何实现前端加载的。笔者查看的例子在http://esri.github.io/esri-leaflet/examples/styling-feature-layer-polylines.html 可以看看其截图效果，对道路进行了动态的渲染。
再来看关键代码实现部分
var map = L.map('map').setView([45.5275, -122.6717], 14);
L.esri.basemapLayer('Streets').addTo(map);
var bikePaths = L.esri.featureLayer({
url: 'https://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/rest/services/Bike_Routes/FeatureServer/0',
style: function (feature) {
var c,o = 0.75;
switch (feature.properties.BIKEMODE) {
case 'Low traffic through street':
c = '#007D7D';
break;
case 'Bike boulevard':
c = '#00FF3C';
break;
case 'Caution area':
c = '#FF0000';
break;
case 'Local multi-use path':
c = '#00BEFF';
break;
case 'Regional multi-use path':
c = '#b1a9d0';
break;
case 'Moderate traffic through street':
c = '#FFEB00';
break;
case 'Planned multi-use path':
c = '#000000';
break;
case 'Bike lane':
c = '#328000';
o = '0.70';
break;
case 'High traffic through street':
c = '#FFA500';
break;
case 'Planned bike lane':
c = '#000000';
o = '1.0';
break;
default:
c = '#C0C0C0';
}
return {color: c, opacity: o, weight: 5};
}
}).addTo(map);可以关键部分是获取了ArcGIS 的Featureservice 的要素，针对要素进行了style的设置，做了一个分等级和颜色的渲染。关键部分是使用了L.esri.featureLayer 接口。从这里可以看到端倪，对于动态的要素的加载，esri也是遵循了leaflet的规则，特意搞什么graphiclayer之类的特殊图层，而是想leaflet一样，直接在Layer中实现，当然这个Layer就是自家的featurelayer了。那传统的graphic前端绘制怎么办？esri-leaflet没有给出答案，笔者看到所有的基于后台服务查询的结果最终都是以featurelayer的形式展示出来，esri-leaflet中根本就没有在客户端绘制图形的接口。其实这部分答案很明确，就是使用leaflet本身的Vector Layers ，开发人员可以直接将其等同于graphiclayer就行了。
为了搞清楚真相，笔者又专门查找了 L.esri.featureLayer 的相关说明，发现其options 的属性里面的style一项居然是实现了leaflet本身的ILayer接口，如下图所示
前面我们看到的Vector Layers 部分其实也是实现了ILayer，也就是说，不管是采用什么样的方式去做动态要素的加载和交互操作，最终还是会落到ILayer和Vector Layers 中去，从ArcGIS的实现方法来看，可见一斑了。
原理清楚之后，所以的问题都可以迎刃而解了，关于代码实现部分就变得异常的简单了。接下来就可以用自己的数据按照例子进行制作一遍。例如笔者现在要按照道路的等级对道路进行实际的渲染，分别采用不同的颜色和粗细来渲染。代码很简单，跟例子差不多，不过就是替换成自己的数据。
function addFeatures() {
var featlayer = L.esri.featureLayer({
url: 'http://localhost:6080/arcgis/rest/services/dongguan/FeatureServer/2',
style: function(feature) {
var c, w, o = 0.75;
switch(feature.properties.type) {
case '44000':
c = '#007D7D';
w = 3;
break;
case '45000':
c = '#00FF3C';
w = 2;
break;
case '51000':
c = '#FFA500';
w = 3;
break;
default:
c = '#C0C0C0';
w = 1;
}
return {
color: c,
opacity: o
};
}
});
map.addLayer(featlayer);
}这里要注意几点，首先要留意的是esri-leaflet是如何获取要素的属性的，代码中可以看到参数中使用的是 feature.properties.type 其中feature.properties是获取属性的方式，后面加点，接着是字段名（笔者的服务里面使用的是type字段分类）。可以通过arcgis server 的服务路径查看服务的字段情况，例如 http://localhost:6080/arcgis/rest/services/dongguan/FeatureServer/2 道路的要素图层信息如下图所示：
这里还要注意一点就是，arcgis server发布的服务，无论原始数据的字段是否大小写，都会一律转为小写字母，所以要特别注意。还有数据中千万别使用中文作为字段名称，这个大家懂的^_^ 。那么可以看看接下来的效果了，如下图所示
接下来就是自定义的图形加载地图上了。前面已经提及过，这类型的加载方式必须使用leaflet的方式进行。例如我们可以通过以下代码去加载一个面图形，并将其加到地图上面。
function addPolygon(){
var latlngs = [[23.17, 113.45],[23.15, 113.46],[23.19, 113.46],[23.19, 113.45]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
}其实际效果如下：
这里值得注意的有几点，一是面图形的构建是一个二维数组，数组元素记录的是xy坐标，但不是[经度,纬度]，而是恰好反过来，[纬度,经度]。另外，如果要清除掉动态绘制的图形，那就必须使用ILayer的接口，就是在构建面的时候，其实声明的就是一个Layer，可以利用Layer的remove方法进行清除，在该代码实例中要清除前端的图形，那就是使用 polygon.remove();
由于leaflet对点的绘制做了特别的关照，将它放在UI Layer 而非Vector Layers 中，属于非常个性的部分，如果要加载点的数据，也是可以使用leaflet的方法来构建。但是arcgis server 中的点要素服务，如果要直接动态加载，那L.esri.featureLayer 接口中也有特殊的做法。例如如下核心代码
L.esri.basemapLayer('Streets').addTo(map);
L.esri.featureLayer({
url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0',
pointToLayer: function (geojson, latlng) {
return L.marker(latlng, {
icon: icons[geojson.properties.direction.toLowerCase()]
});
},
}).addTo(map);可以看到，在featurelayer中使用了一个方法是pointToLayer ，强行将esri格式转为L.marker 。说到底还是使用了L.marker接口，只不过是再封装了一层转换而已。具体的代码可在 http://esri.github.io/esri-leaflet/examples/styling-feature-layer-points.html 进行查看。
上面的很多代码都是基于arcgis 的featureservice 是制作的，但也有人会说，featureservice的发布需要后台有ArcSDE支撑，如果没有ArcSDE的数据源，那岂不是连基本的动态要素绘制都不能做？其实不然，这个问题Esri的工程师应该早就想到。看接口名称叫 L.esri.featureLayer ，不代表它只能支持featureservice，在上述的动态要素加载的代码中，将featureservice改为使用mapservice，同样可以使可运行的，这个只是命名的名称让大家产生误会而已。笔者也特意尝试了一把，将原来的路径替换为http://localhost:6080/arcgis/rest/services/dongguan/MapServer/2 ，还是能出来原来的结果，因此无需虚惊一场。
总结：总的来说，esri-leaflet在动态要素加载方面还是坚持的不错，尽管大部分的操作都是使用leaflet原有的接口实现。对于从来没有过ArcGIS开发经验的人来说，毫无历史负担，即学即用。对于ArcGIS老鸟来说，还是需要一些时间去琢磨，毕竟一些使用习惯和叫法发生了一定改变。
esri-leaflet入门教程（1）-leaflet介绍：http://zhihu.esrichina.com.cn/article/2805
esri-leaflet入门教程（2）-地图的HelloWorld：http://zhihu.esrichina.com.cn/article/2807
esri-leaflet入门教程（3）-自定义底图：http://zhihu.esrichina.com.cn/article/2806
esri-leaflet入门教程（4）-加载各类图层：http://zhihu.esrichina.com.cn/article/2809
esri-leaflet入门教程（5）- 动态绘制图形：http://zhihu.esrichina.com.cn/article/2808
文章来源：http://blog.csdn.net/liyuanxiang1984/article/details/56672159
