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

var dz = {  

  //数据的基本属性  

  "displayFieldName": "",   

  "fieldAliases": {  

    "FID": "FID",   

    "UserID": "UserID",   

    "NAME": "NAME",   

    "TYPE_USER": "TYPE_USER",   

    "CODE": "CODE",   

    "ADDRESS": "ADDRESS",   

    "TELEPHONE": "TELEPHONE"  

  },   

  "geometryType": "esriGeometryPoint",   

  "spatialReference": {  

    "wkid": 4490,   

    "latestWkid": 4490  

  },   

  //所含有的字段信息  

  "fields": [  

    {  

      "name": "FID",   

      "type": "esriFieldTypeOID",   

      "alias": "FID"  

    },   

    {  

      "name": "UserID",   

      "type": "esriFieldTypeInteger",   

      "alias": "UserID"  

    },   

    {  

      "name": "NAME",   

      "type": "esriFieldTypeString",   

      "alias": "NAME",   

      "length": 100  

    },   

    {  

      "name": "TYPE_USER",   

      "type": "esriFieldTypeString",   

      "alias": "TYPE_USER",   

      "length": 10  

    },   

    {  

      "name": "CODE",   

      "type": "esriFieldTypeString",   

      "alias": "CODE",   

      "length": 20  

    },   

    {  

      "name": "ADDRESS",   

      "type": "esriFieldTypeString",   

      "alias": "ADDRESS",   

      "length": 100  

    },   

    {  

      "name": "TELEPHONE",   

      "type": "esriFieldTypeString",   

      "alias": "TELEPHONE",   

      "length": 60  

    }  

  ],   

  //所含有的集合要素集  

  "features": [  

    {  

      "attributes": {  

        "FID": 0,   

        "UserID": 0,   

        "NAME": "湖滨商业街２６２号写字楼",   

        "TYPE_USER": "120201",   

        "CODE": "320211",   

        "ADDRESS": "湖滨街２６２",   

        "TELEPHONE": " "  

      },   

      "geometry": {  

        "x": 120.277378,   

        "y": 31.534747999999997  

      }  

    },   

    {  

      "attributes": {  

        "FID": 1,   

        "UserID": 0,   

        "NAME": "东方银座（西南门）",   

        "TYPE_USER": "120201",   

        "CODE": "320211",   

        "ADDRESS": "新区长江路旁",   

        "TELEPHONE": " "  

      },   

      "geometry": {  

        "x": 120.359826,   

        "y": 31.540464  

      }  

    },   

    {  

      "attributes": {  

        "FID": 2,   

        "UserID": 0,   

        "NAME": "东方银座",   

        "TYPE_USER": "120201",   

        "CODE": "320211",   

        "ADDRESS": "新区长江路旁",   

        "TELEPHONE": " "  

      },   

      "geometry": {  

        "x": 120.36029500000001,   

        "y": 31.540967  

      }  

    }]}  

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

[javascript] view
plain copy

var layerDefinition = {  

"geometryType": "esriGeometryPoint",  

"fields":[  

{  

 "name": "FID",   

 "type": "esriFieldTypeOID",   

 "alias": "FID"  

},   

{  

 "name": "UserID",   

 "type": "esriFieldTypeInteger",   

 "alias": "UserID"  

},   

{  

 "name": "NAME",   

 "type": "esriFieldTypeString",   

 "alias": "NAME",   

 "length": 100  

},   

{  

 "name": "TYPE_USER",   

 "type": "esriFieldTypeString",   

 "alias": "TYPE_USER",   

 "length": 10  

},   

{  

 "name": "CODE",   

 "type": "esriFieldTypeString",   

 "alias": "CODE",   

 "length": 20  

},   

{  

 "name": "ADDRESS",   

 "type": "esriFieldTypeString",   

 "alias": "ADDRESS",   

 "length": 100  

},   

{  

 "name": "TELEPHONE",   

 "type": "esriFieldTypeString",   

 "alias": "TELEPHONE",   

 "length": 60  

}  

]  

};  

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

[javascript] view
plain copy

var featureSet = new esri.tasks.FeatureSet(dz);  

var featureCollection = {  

layerDefinition: layerDefinition,  

featureSet: featureSet  

};  

var featurelayer = new esri.layer.FeatureLayer(featureCollection);  

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



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