ArcGIS API for JavaScript 4.2学习笔记[23] 没有地图如何进行查询?【FindTask类的使用】

从第一篇到现在都是基于地图的,不管怎么样,不管是2D还是3D,至少有个图。

这次来个没有图的例子,看看纯文字的空间查询是什么样的。

本例适用于后台查询或低性能电脑的查询。


预览图

由于4.3和4.2的这个例子没有任何实质性的改动,我直接从官方运行的4.3的例子:

默认打开的时候,按下Find按钮,右边就会出现转圈圈的图,其实是个GIF图片。

结果如上,将Spokane这个County的信息列举出来了,列出的字段有County Name、State、Population(2012)、%Population Change(2000-2010)四个。

对应的值以常规字体列在下方。

是不是很简单?代码可不一定简单。

给出引用

html上的引用就不需要css了:

<script src="https://js.arcgis.com/4.2/"></script>

只需要引用js库即可。

函数引用:

require([
    "esri/tasks/FindTask",
    "esri/tasks/support/FindParameters",
    "dojo/_base/array",
    "dojo/dom",
    "dojo/on",
    "dojo/domReady!"
  ],
     function(FindTask, FindParameters, arrayUtils, dom, on) {
         //代码
     }
);

哦哟,FindTask居然不是用Query了,而是转用FindParameters。看来对Query、Find、Search这几个词还是要区别的。

函数参数骨架

function(FindTask, FindParameters, arrayUtils, dom, on) {
  var loadingImg = dom.byId("loading");

  var find = new FindTask({});
  var params = new FindParameters({});

  function doFind() {}

  var resultsTable = dom.byId("tbl");

  function showResults(response) {}
  function rejectedPromise(err) {}

  on(dom.byId("findBtn"), "click", doFind);
}

这个和上一个例子类似了,FindTask、FindParameters和QueryTask、Query差不多,成对出现:

var find = new FindTask({
  url: "https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_2000-2010_Population_Change/MapServer"
});
var params = new FindParameters({
  layerIds: [3],
  searchFields: ["NAME"]
});

值得一提的是,FindTask这个类也是由ArcServer发布的服务实例化的。查阅API,得知FindTask类的细节:

FindTask

和QueryTask如出一辙,但是参数改为FindParameters了,返回值也变成FindResults类型的变量了。

FindParameters

和Query类似的东西:

列举几个常用属性:searchText(String)、searchFields(String[])、returnGeometry(Boolean)、outSpatialReference(SpatialReference)

前面两个就是本例中使用的属性了,searchText是用户输入的需要进行搜索的文本,searchFields则是进行搜索的字段。后两个和Query一样。

FindResult

列举几个常用属性:feature(Graphic)、foundFieldName(String)

前一个即为找到的几何(在属性表中对应一行),后一个为这个几何所在FindParameters中设定搜索的字段中的那一个。



而doFind()和上一例的doQuery()也是类似的,成功就调用showResults(),失败就调用rejectedPromise()。

最后一个则是为findBtn这个DOM按钮添加click事件。

逻辑如下,和上一个例子几乎一毛一样,仅仅是showResults这个对返回结果的处理的方法不太一样罢了。

下方高能!!

function showResults(response) {

  var results = response.results;
  resultsTable.innerHTML = "";

  //如果返回的results是空,那么告诉用户
  if (results.length === 0) {
    resultsTable.innerHTML = "<i>No results found</i>";
    loadingImg.style.visibility = "hidden";
    return;
  }

  //HTML操作,加一行,加4个单元格
  var topRow = resultsTable.insertRow(0);
  var cell1 = topRow.insertCell(0);
  var cell2 = topRow.insertCell(1);
  var cell3 = topRow.insertCell(2);
  var cell4 = topRow.insertCell(3);
  //HTML操作,给每一个单元格填入值
  cell1.innerHTML = "<b>County Name</b>";
  cell2.innerHTML = "<b>State</b>";
  cell3.innerHTML = "<b>Population (2012)</b>";
  cell4.innerHTML = "<b>% Population Change (2000 - 2010)</b>";

  //!最关键的一段代码!
  arrayUtils.forEach(results, function(findResult, i) {
    var county = findResult.feature.attributes.Name;
    var state = findResult.feature.attributes[
      "State Abbreviation"];
    var popGrowth = findResult.feature.attributes[
      "2000-2010 Population Annual Compound Growth Rate (U.S. Census)"
    ];
    var pop2012 = findResult.feature.attributes[
      "2012 Total Population (Esri)"];

    //HTML操作。加一行,加4个单元格,写入值。
    var row = resultsTable.insertRow(i + 1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = county;
    cell2.innerHTML = state;
    cell3.innerHTML = pop2012;
    cell4.innerHTML = popGrowth;
  });

  //转圈圈的GIF图不可见
  loadingImg.style.visibility = "hidden";
}

别看这段代码很长,很多都是HTML的DOM元素操作,我们单独把关键段取出来:

arrayUtils.forEach(results, function(findResult, i) {

  //从FindResult对象中获取需要的字段值
  var county = findResult.feature.attributes.Name;
  var state = findResult.feature.attributes["State Abbreviation"];
  var popGrowth = findResult.feature.attributes[ "2000-2010 Population Annual Compound Growth Rate (U.S. Census)"];
  var pop2012 = findResult.feature.attributes["2012 Total Population (Esri)"];

  // HTML操作
  ...省略
});

注意到遍历的是results,这个东西是Object数组,被装箱成FindResult数组。这里其实就是从FindResult对象中获取feature的attribute的值,再在下方进行HTML操作而已。

那么这个results是怎么来的呢?注意doFind()方法的最头一句:

var results = response.results;

从传入参数response中获取的results属性。经过查阅,这个response不是FindResult,而是PortalQueryResult类型的参数。

PortalQueryResult有一个属性是results,值类型是Object数组。

那么现在就清楚了吧!这个小地方算是比较坑的。


总结一下。

使用FindTask和FindParameters进行“Find查找”操作,而不是“Query查询”,也不是“Search搜索”。

对结果FindResult进行读取,并写入HTML元素上进行结果显示。

整个例子没有地图,清新脱俗...#滑稽。

时间: 2024-10-01 21:07:29

ArcGIS API for JavaScript 4.2学习笔记[23] 没有地图如何进行查询?【FindTask类的使用】的相关文章

ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. 什么是ArcGIS API for JS?这里就不多介绍了,最关键的一点是4.x版本与3.x版本的变化,按官方的意思是重新写了底层. 笔记中规定: ArcGIS API for JavaScript简称AJS 使用CDN(即不配置本地环境)进行测试开发 其余根据需要进行修改.增删. 要将地图显示在h

ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画

这是个很有意思的例子,不过例子给的比较复杂,需要查很多API,我会在文章最后给出关键的类和属性解释. 同样发现一个很有意思的事儿:博客园似乎有爬虫,我4号发布的blogs,5号就在百度和google搜索页面上看到了转载或者复制. 这篇文章逻辑组织不太好,想知道怎么做缩放动画的可以直接拉到尾部看结论. 当然,这篇代码比较多,不建议手机看. 进入正题,goTo()动画,官方的例子是在SceneView中实现的. 照例,给出require的第一个字符串数组参数 require( [ "esri/Map

ArcGIS API for JavaScript 4.2学习笔记[28] 可视域分析【使用Geoprocessor类】

想知道可视域分析是什么,就得知道可视域是什么 我们站在某个地方,原地不动转一圈能看到的所有事物就叫可视域.当然平地就没什么所谓的可视域. 如果在山区呢?可视范围就会被山体挡住了.这个分析对军事上有十分重要的意义. 在本例中,可视域是以GraphicLayer中的Graphics[]形式存在的. 这个例子用到了Geoprocessor这个类.这个类的对象是如何判别我要进行可视域分析呢?且听我慢慢道来. 看看结果 点击山谷的位置,出现一个红点,稍等10s左右,出现橙色的面块,橙色的面块就是红点位置所

ArcGIS API for JavaScript 4.2学习笔记[26] 缓冲区分析【基于geometryEngine工具类】

要说GIS空间分析最经典的例子,就是缓冲区分析了. 本例使用geometryEngine来绘制缓冲区环.因为官方给的例子有3D和2D场景,所以就会显得比较复杂. 当鼠标在视图上点击时,就会生成一个缓冲区环(以点击的点为中心): 当鼠标拖拽时,若不是漫游状态,则缓冲区环也会跟着一起动. 我会把生成缓冲区的核心代码用大标题红色标出,各位可以直接跳到那里学缓冲区的生成. 首先了解一下,缓冲区是以什么样的东西存在的? 在桌面GIS里,缓冲区就是一个面要素,可以是要素类也可以是shp文件. 在AJS里,缓

ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 诸君,我喜欢嫩的--呸呸呸 诸君,我喜欢3D咋了?新事物会替代旧事物不是~ ArcGIS API for JavaScript 4.2概述 AJS 4.2,即ArcGIS API for JavaScript 4.2,是美国ESRI公司针对WebGIS市场推出的.利用JavaScript和Dojo开发的一款产品,它在2016年12月发布.而AJS 4.0 beta则在一年前就发布了. 关于AJS3和AJS4选择的问题,

ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View,加载layers,使用弹出窗口,视觉化,与使用窗口小部件.(wtf居然没有分析你想搞事情啊web除了展示难道不应该有()&&*--@) [Mapping and Views] (点击进入我写的章节详细介绍) 最基础的,知道地图和视图的区别,能使用2D和3D地图,对地图的布局有一定的了解,对地图

ArcGIS API for JavaScript 4.2学习笔记[24] 【IdentifyTask类】的使用(结合IdentifyParameters类)(第七章完结)

好吧,我都要吐了. 接连三个例子都是类似的套路,使用某个查询参数类的实例,结合对应的Task类,对返回值进行取值.显示. 这个例子是Identify识别,使用了TileLayer这种图层,数据来自Server的MapServer. 结果演示 戳不同的地方会有不同的识别结果. 我对TileLayer不是很了解,这一例仅针对有了解的同学,做一个IdentifyTask的解释. IdentifyTask/IdentifyParameter/IdentifyResult三个类 既然是一样的套路,那么先对

ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮(第五章完结)

这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer的形式测量要素的长度为例子进行介绍. 第二个[Custom popup actions per feature]则是上一个的升级,如果说上一个例子的功能是写死的,那么这个例子就把这个功能写活了.什么意思呢?上个例子的测距仅仅能测距,没有什么别的特别的.而这个例子以啤酒店的分布(点要素图层)为例,在自

ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼(缩略图的实现及异步处理、Promise、回调函数、监听的笔记)

文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数.异步处理等内容,原理性的东西我会在文末解释,各位看官不用担心看不懂,我尽量用通俗的语言解释这些. 惯例,如果不习惯从头看到尾,可以直接跳到后面看总结. 大家应该看过商业地图的缩略图功能吧?以度娘地图为例,在使用街景地图的时候,左下角会出现一个地点一样的2D小地图: 这个就是鹰眼功能的应用,在很多桌面