在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. DOM相关知识总结

    DOM相关: 1.获取DOM元素 document.getElementById document.getElementsByName document.getElementsByTagName do ...

  2. 学习笔记：mpvue开发小程序——入门

    接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ ...

  3. POJ 3278 Catch That Cow（BFS 剪枝）

    题目链接:http://poj.org/problem?id=3278 这几次都是每天的第一道题都挺顺利,然后第二道题一卡一天. = =,今天的这道题7点40就出来了,不知道第二道题在下午7点能不能出 ...

  4. netty reactor线程模型分析

    netty4线程模型 ServerBootstrap http示例 // Configure the server. EventLoopGroup bossGroup = new EpollEvent ...

  5. iOS_01_什么是ios

    * ios是一款由苹果公司开发的操作系统(os是Operating Systen的简称),就像平时在电脑上用的Window XP.Window 7.都是操作系统. * 那什么是操作系统呢?操作系统其实 ...

  6. VS无法访问IIS元数据库 您没有足够的特权访问计算机上的IIS网站

    进入windows\regedit.exe下的HKEY_CRRENT_USER\Software\Microsoft\Windows\CurrentVersion\Exploer\User Shell ...

  7. [Ramda] Getter and Setter in Ramda & lens

    Getter on Object: 1. prop: R.prop(}); //=> 100 R.prop('x', {}); //=> undefined 2. props: R.pro ...

  8. cocos2d-x 3.0 android mk文件 之 自己主动遍历*.cpp文件

    还记得上一篇android mk 文件的写法吗?传送门, 我们须要手动去加入 cpp文件.假设cpp一多,那不是要累死? LOCAL_PATH := $(call my-dir) include $( ...

  9. stm32的DMA基础,配置流程解析

    这是手册上的流程 下面是对应的库函数 下面我们就按流程去看相应的寄存器: 步骤1里的寄存器, 进入下面的函数内部: 可以找到对应的操作: 再看下一个重要的寄存器: 再看下一个寄存器: 还有一种模式是: ...

  10. UE4 Editor快捷键(ShortCut Key)

    转载请注明出处,所有权利保留. Unreal Engine4的快捷键现在无官方文档,因为他们工作比较忙啊. 记录时间:2014-10-15 现在自己整理一个,仅供参考. 因为他们的team成员说的还有 ...