1. 程式人生 > >ArcGIS API for JS 之 不依賴地圖服務建立FeatureLayer圖層

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資料,具體轉化方法請參考:這裡;轉化之後就如下所示:

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": "湖濱商業街262號寫字樓", 
        "TYPE_USER": "120201", 
        "CODE": "320211", 
        "ADDRESS": "湖濱街262", 
        "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”,因此,他的構造格式如下所示:
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的要素圖層。具體全部程式碼如下所示:
var featureSet = new esri.tasks.FeatureSet(dz);
var featureCollection = {
layerDefinition: layerDefinition,
featureSet: featureSet
};
var featurelayer = new esri.layer.FeatureLayer(featureCollection);

對圖層進行渲染之後的熱力圖結果如下圖所示: