ArcGIS API for JS 之 不依賴地圖服務建立FeatureLayer圖層
阿新 • • 發佈:2019-01-23
在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資料,具體轉化方法請參考:這裡;轉化之後就如下所示:
這裡就相當於模擬了一個個新的屬性點構成的一個要素圖層。而layerDefinition則是用來描述這個要素圖層的,最少需要“geometryType”和“fields”,因此,他的構造格式如下所示: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 } }]}
這樣就可以不依賴服務構造出一個FeatureLayer的要素圖層。具體全部程式碼如下所示: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 } ] };
var featureSet = new esri.tasks.FeatureSet(dz);
var featureCollection = {
layerDefinition: layerDefinition,
featureSet: featureSet
};
var featurelayer = new esri.layer.FeatureLayer(featureCollection);
對圖層進行渲染之後的熱力圖結果如下圖所示: