在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合。 graphics属性
但是在4.x版本中,FeatureLayer对象并未提供graphics属性。所以我们要获取必须通过某些query的函数来实现。
方法一: 通过FeatureLayer中的queryFeatures()函数。 queryFeatures()函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>FeatureLayer - 4.7</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> <script src="https://js.arcgis.com/4.7/"></script> </head> <body> <div id="viewDiv"></div> <script type="text/javascript"> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "dojo/domReady!" ], function (Map, MapView, FeatureLayer) { let map = new Map({ basemap: "hybrid" }); let view = new MapView({ container: "viewDiv", map: map, extent: { // autocasts as new Extent() xmin: -9177811, ymin: 4247000, xmax: -9176791, ymax: 4247784, spatialReference: 102100 } }); let featureLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0" }); map.add(featureLayer); view.when(function () { featureLayer.queryFeatures().then(function (results) { console.log(results.features); }); }); }); </script> </body> </html>
这种方式有一个缺点就是,需要再一次向服务器发送一条查询的请求,其实照理说完全可以在已有的FeatureLayer对象中获取它的要素集合。
方法二:通过FeatureLayerView中的queryFeatures()函数来实现,它不会再一次向服务器发送请求。 FeatureLayerView中的queryFeatures()函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>FeatureLayer - 4.7</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> <script src="https://js.arcgis.com/4.7/"></script> </head> <body> <div id="viewDiv"></div> <script type="text/javascript"> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "dojo/domReady!" ], function (Map, MapView, FeatureLayer) { let map = new Map({ basemap: "hybrid" }); let view = new MapView({ container: "viewDiv", map: map, extent: { // autocasts as new Extent() xmin: -9177811, ymin: 4247000, xmax: -9176791, ymax: 4247784, spatialReference: 102100 } }); let featureLayer1 = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0" }); map.add(featureLayer1); view.when(function () { //地图刚初始化时获取graphics集合,需要监控featureLayer的updating状态完成后才能获取到 view.whenLayerView(featureLayer1).then(function (lyrView) { lyrView.watch("updating", function(){ lyrView.queryFeatures().then(function (results) { console.log(results); }); }); }); //地图加载完成后,可以随时获取featureLayer中的graphics集合 view.on("double-click",function () { view.whenLayerView(featureLayer1).then(function (lyrView) { lyrView.queryFeatures().then(function (results) { console.log(results); }); }); }); }); } ); </script> </body> </html>