在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>

Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合的更多相关文章

  1. Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注

    4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...

  2. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

  3. Arcgis api for javascript学习笔记(3.2X版本)-初步尝试

    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...

  4. Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示

    在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...

  5. Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能

    1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...

  6. Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果

    其实就只是用到了 view.goTo()  函数,再利用 window.setInterval()  函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...

  7. Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注

    1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...

  8. Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作

    1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...

  9. Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果

    一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...

随机推荐

  1. postman--基本使用1

    本文转自:http://blog.csdn.net/five3/article/details/53021084 HTTP的接口测试工具有很多,可以进行http请求的方式也有很多,但是可以直接拿来就用 ...

  2. 【Codeforces Round #445 (Div. 2) C】 Petya and Catacombs

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 看看时间戳为i的点有哪些. 每次优先用已经访问过的点. 如果不行就新创一个点. 注意新创点的时间戳也是i. [代码] #includ ...

  3. HDU 1018 Big Number 数学题解

    Problem Description In many applications very large integers numbers are required. Some of these app ...

  4. REGEXP_LIKE，REGEXP_INSTR，REGEXP_SUBSTR，REGEXP_REPLACE

    参考: http://www.cnblogs.com/scottckt/archive/2012/10/11/2719562.html http://www.jb51.net/article/3842 ...

  5. IOS基础：深入理解Objective-c中@class 和#import的区别

    在面向对象objective-C语言中,当一个类使用到另一个类时,并且在类的头文件中需要创建被引用的指针时,可以#import方式引入,通过@class引入: 这两种的方式的区别在于: 1.运用#im ...

  6. 【例题 6-8 UVA - 548】Tree

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 后序遍历的最后一个是根节点. ->然后在中序遍历中找到这个节点. 分为左右两段. 然后递归上述操作就好. 题目描述好坑啊. 原 ...

  7. The behavior of App killed or restored by Android System or by users

    What's the behavior of App killed or restored by Android System or by users? First, user kills the a ...

  8. js进阶 12-8 如何知道上一个函数的返回值是什么（如何判断上一个函数是否执行成功）

    js进阶 12-8 如何知道上一个函数的返回值是什么(如何判断上一个函数是否执行成功) 一.总结 一句话总结:event的result属性即可. 1.event的result属性的实际应用场景是什么? ...

  9. 如何调试Javascript代码

    转自原文如何调试Javascript代码 目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法 ...

  10. Android中的消息机制：Handler消息传递机制 分类： H1_ANDROID 2013-10-27 22:54 1755人阅读 评论(0) 收藏

    参考<疯狂android讲义>第2版3.5 P214 一.背景 出于性能优化考虑,Android的UI操作并不是线程安全的,这意味着如果有多个线程并发操作UI组件,可能导致线程安全问题.为 ...