ArcGIS API for JS 之 不依赖地图服务创建FeatureLayer图层

在ArcGIS API for JS中，有一个很强大的要素图层类——FeatureLayer类。它是一种图形要素图层，继承于esri/layers/GraphicLayer，用来对服务图层中的要素服务进行显示。但是通常依赖ArcGIS Server发布的地图服务来获取数据源，实际应用中，很多业务数据来源数据库亦或者是前端JSON格式的数据，并不一定是从地图服务来获取的。而通过API文档中所示，创建FeatureLayer图层有两种方式，本文重点解决如何通过第二种方式，脱离地图服务，创建要素图层。

   在创建要素图层的时候，最重要的就是构造featureCollectionObject，featureCollecttionObject又是由featureSet和layerDefinition构成。正式由这两个参数，构建了一个类似于标准的featureLayer的数据格式。

   featureSet由 esri/task/FeatureSet 来创建，输入参数采用json的格式，这个json格式的数据其实就是构建了一个shp数据层，这里，我们可以采用arcgis的arctools来将shp数据转化为geoJson数据，具体转化方法请参考：这里；转化之后就如下所示：

[javascript] view plain copy

1. var dz = {  
2.   //数据的基本属性  
3.   "displayFieldName": "",   
4.   "fieldAliases": {  
5.     "FID": "FID",   
6.     "UserID": "UserID",   
7.     "NAME": "NAME",   
8.     "TYPE_USER": "TYPE_USER",   
9.     "CODE": "CODE",   
10.     "ADDRESS": "ADDRESS",   
11.     "TELEPHONE": "TELEPHONE"  
12.   },   
13.   "geometryType": "esriGeometryPoint",   
14.   "spatialReference": {  
15.     "wkid": 4490,   
16.     "latestWkid": 4490  
17.   },   
18.   //所含有的字段信息  
19.   "fields": [  
20.     {  
21.       "name": "FID",   
22.       "type": "esriFieldTypeOID",   
23.       "alias": "FID"  
24.     },   
25.     {  
26.       "name": "UserID",   
27.       "type": "esriFieldTypeInteger",   
28.       "alias": "UserID"  
29.     },   
30.     {  
31.       "name": "NAME",   
32.       "type": "esriFieldTypeString",   
33.       "alias": "NAME",   
34.       "length": 100  
35.     },   
36.     {  
37.       "name": "TYPE_USER",   
38.       "type": "esriFieldTypeString",   
39.       "alias": "TYPE_USER",   
40.       "length": 10  
41.     },   
42.     {  
43.       "name": "CODE",   
44.       "type": "esriFieldTypeString",   
45.       "alias": "CODE",   
46.       "length": 20  
47.     },   
48.     {  
49.       "name": "ADDRESS",   
50.       "type": "esriFieldTypeString",   
51.       "alias": "ADDRESS",   
52.       "length": 100  
53.     },   
54.     {  
55.       "name": "TELEPHONE",   
56.       "type": "esriFieldTypeString",   
57.       "alias": "TELEPHONE",   
58.       "length": 60  
59.     }  
60.   ],   
61.   //所含有的集合要素集  
62.   "features": [  
63.     {  
64.       "attributes": {  
65.         "FID": 0,   
66.         "UserID": 0,   
67.         "NAME": "湖滨商业街２６２号写字楼",   
68.         "TYPE_USER": "120201",   
69.         "CODE": "320211",   
70.         "ADDRESS": "湖滨街２６２",   
71.         "TELEPHONE": " "  
72.       },   
73.       "geometry": {  
74.         "x": 120.277378,   
75.         "y": 31.534747999999997  
76.       }  
77.     },   
78.     {  
79.       "attributes": {  
80.         "FID": 1,   
81.         "UserID": 0,   
82.         "NAME": "东方银座（西南门）",   
83.         "TYPE_USER": "120201",   
84.         "CODE": "320211",   
85.         "ADDRESS": "新区长江路旁",   
86.         "TELEPHONE": " "  
87.       },   
88.       "geometry": {  
89.         "x": 120.359826,   
90.         "y": 31.540464  
91.       }  
92.     },   
93.     {  
94.       "attributes": {  
95.         "FID": 2,   
96.         "UserID": 0,   
97.         "NAME": "东方银座",   
98.         "TYPE_USER": "120201",   
99.         "CODE": "320211",   
100.         "ADDRESS": "新区长江路旁",   
101.         "TELEPHONE": " "  
102.       },   
103.       "geometry": {  
104.         "x": 120.36029500000001,   
105.         "y": 31.540967  
106.       }  
107.     }]}  

这里就相当于模拟了一个个新的属性点构成的一个要素图层。而layerDefinition则是用来描述这个要素图层的，最少需要“geometryType”和“fields”，因此，他的构造格式如下所示：

[javascript] view plain copy

1. var layerDefinition = {  
2. "geometryType": "esriGeometryPoint",  
3. "fields":[  
4. {  
5.  "name": "FID",   
6.  "type": "esriFieldTypeOID",   
7.  "alias": "FID"  
8. },   
9. {  
10.  "name": "UserID",   
11.  "type": "esriFieldTypeInteger",   
12.  "alias": "UserID"  
13. },   
14. {  
15.  "name": "NAME",   
16.  "type": "esriFieldTypeString",   
17.  "alias": "NAME",   
18.  "length": 100  
19. },   
20. {  
21.  "name": "TYPE_USER",   
22.  "type": "esriFieldTypeString",   
23.  "alias": "TYPE_USER",   
24.  "length": 10  
25. },   
26. {  
27.  "name": "CODE",   
28.  "type": "esriFieldTypeString",   
29.  "alias": "CODE",   
30.  "length": 20  
31. },   
32. {  
33.  "name": "ADDRESS",   
34.  "type": "esriFieldTypeString",   
35.  "alias": "ADDRESS",   
36.  "length": 100  
37. },   
38. {  
39.  "name": "TELEPHONE",   
40.  "type": "esriFieldTypeString",   
41.  "alias": "TELEPHONE",   
42.  "length": 60  
43. }  
44. ]  
45. };  

这样就可以不依赖服务构造出一个FeatureLayer的要素图层。具体全部代码如下所示：

[javascript] view plain copy

1. var featureSet = new esri.tasks.FeatureSet(dz);  
2. var featureCollection = {  
3. layerDefinition: layerDefinition,  
4. featureSet: featureSet  
5. };  
6. var featurelayer = new esri.layer.FeatureLayer(featureCollection);  

对图层进行渲染之后的热力图结果如下图所示：

宁波整形美容医院http://www.lyxcl.org/