ArcGIS API for JavaScript 4.2学习笔记[22] 使用【QueryTask类】进行空间查询 / 弹窗样式

上一篇写道,使用Query类进行查询featureLayer图层的要素,也简单介绍了QueryTask类的使用。

这一篇博文继续推进,使用Query类和QueryTask类进行空间查询,查询USA的著名山体点要素。

同样的,只介绍重点。本章官方名字是:Query using QueryTask



照常,先看看结果:(默认三个参数都不动,直接点击按钮)

出现了绿色的圆锥体,点击圆锥体可以出现定制好的弹窗(PopupTemplate):

好,开始上课。


给出引用

require([
  "esri/Map",
  "esri/views/SceneView",
  "esri/layers/GraphicsLayer",
  "esri/symbols/PointSymbol3D",
  "esri/symbols/ObjectSymbol3DLayer",
  "esri/tasks/QueryTask",
  "esri/tasks/support/Query",
  "dojo/_base/array",
  "dojo/dom",
  "dojo/on",
  "dojo/domReady!"
  ],
  function(
    Map, SceneView, GraphicsLayer, PointSymbol3D,
    ObjectSymbol3DLayer, QueryTask, Query, arrayUtils, dom, on)
  {...}
)

GraphicsLayer是用于显示绿色的圆锥体的几何图层;

ObjectSymbol3DLayer、PointSymbol3D是用于显示绿色圆锥的模块;

Query和QueryTask是本节空间查询必须的模块。


给出骨架

function(...)
{
      var peaksUrl = ...(要素服务)
      var popupTemplate = {...};
      var mtnSymbol = new PointSymbol3D({...});
      var resultsLyr = new GraphicsLayer({...});

      //空间查询二要素
      var qTask = new QueryTask({...});
      var params = new Query({...});

      var map = new Map({...});
      var view = new SceneView({...});

      var attributeName = dom.byId("attSelect");
      var expressionSign = dom.byId("signSelect");
      var value = dom.byId("valSelect");

      //方法体
      function doQuery(){...}
      function getResult(response){...}
      function promiseRejected(err){...}

      //DOM按钮事件
      on(dom.byId("doBtn"), "click", doQuery);
}

为了节约篇幅与抓重点,从这儿开始就不再对Map类和View类的对象实例化进行代码展示了,我相信一路看过来我的博文的同学都能看懂那个基础的两个类的使用了。除非这两个类有新的属性赋值,否则均省略不写。

这例程序仍然有popupTemplate,作为绿色圆锥点状符号的查询结果弹出窗。惊奇的是我发现了可以通过CSS控制弹窗的部分样式:

.esri-popup .esri-popup-header .esri-title {
  font-size: 18px;
  font-weight: bolder;
}

.esri-popup .esri-popup-body .esri-popup-content {
  font-size: 14px;
}

使用的是.选择器。

简略看看弹窗模板的构成:(复习一下)

var popupTemplate = {
    title : "{...},{...}",
    fieldsInfos: [{...},{...},{...},{...},{...},{...}],
    content: "<b><a href=‘https://en.wikipedia.org/wiki/Topographic_prominence‘>Prominence:</a>" +
    "</b> {PROMINENCE_ft} ft ({PROMINENCE_m} m)" +
    "<br><b>Prominence Rank:</b> {RANK}" +
    "<br><b>Elevation:</b> {ELEV_ft} ft ({ELEV_m} m)" +
    "<br><b><a href=‘https://en.wikipedia.org/wiki/Topographic_isolation‘>Isolation:</a>" +
    "</b> {ISOLATION_mi} mi ({ISOLATION_km} km)"
};

title使用两个字段填充,拥有6个字段信息(fieldsInfos)作为content的填充内容;

content仍然是使用html语言的文本形式进行输出。

紧接着是符号和几何图层的定义:

var mtnSymbol = new PointSymbol3D({
  symbolLayers: [new ObjectSymbol3DLayer({
    resource: {
      primitive: "cone"
    }
  })]
});
var resultsLyr = new GraphicsLayer();

在这里要提及一下PointSymbol3D类,这个类是esri/Symbol下的一个模块,同等级的还有LineSymbol3D、MeshSymbol3D、PolygonSymbol3D等。

这里用了一个属性:symbolLayers,类别是ObjectSymbol3DLayer数组(Collection类型,所以这里给的形式是[]数组)。

在属性的赋值中直接new了ObjectSymbol3DLayer,ObjectSymbol3DLayer使用了resourse属性,它是一个Object类型的属性。这里给定值primitive属性是"cone"字符串,代表的意义就是圆锥。primitive是一个resource属性的属性,其是一个枚举值,见:点我

紧接着就是本文最重点的地方了!

空间查询二元素

上代码:

var qTask = new QueryTask({
  url: peaksUrl
});
var params = new Query({
  returnGeometry: true,
  outFields: ["*"]
});

Query见上篇博文,而这个QueryTask则需要好好解释一下了:

它是esri/tasks/目录下的一个模块,继承自Accessor的子类Task,是AJS4.x才有的。

它的出现,是为了满足在某一个图层上进行空间查询的需要。它最常用的方法就是excute()方法了,通常,需要传入一个Query对象。

它的返回类型是Promise的FeatureSet类的对象(有点拗口,Promise算是一个特征吧)

返回的FeatureSet是符合传入Query的在图层上的所有要素的集合。

本例中,使用了要素服务作为QueryTask的构造器:

var qTask = new QueryTask({
  url: peaksUrl
});

url这个属性见下:

它可以是FeatureServer,也可以是MapServer。也就是说我们可以使用Server上的这两种服务来实例化一个QueryTask对象。

好,空间分析二元素就创建好了,有了Query对象和QueryTask对象,我们就需要进行空间搜索了,既然巧妇难为无米之炊,现在有了米,也该炊起来了。

分析部分

我先上个图,会比代码看起来更有立体感:

当按下DOM上的按钮时,触发doQuery事件,此时从三个下拉框中获取参数(即option标签的value值),设置成SQL查询语句,即Query对象的where属性。

此时,把Query对象(名为param)传入QueryTask对象(名为qTask)的excute()方法内,使用getResults()方法作为成功查询的回调函数,使用promiseRejected()方法作为查询失败的回调函数。

逻辑很简单,只有一个分支,失败的promiseRejected()就不细说了,只是在后台控制台输出错误信息而已。

主要看getResults,看看它对查询结果做了什么:

function getResults(response) {
  var peakResults = arrayUtils.map(response.features, function(feature) {    feature.symbol = new PointSymbol3D({...});
    feature.popupTemplate = popupTemplate;
    return feature;
  });

  resultsLyr.addMany(peakResults);
  view.goTo(peakResults);
  dom.byId("printResults").innerHTML = peakResults.length +
    " results found!";
}

response就是FeatureSet对象了吧,对其features对象使用一个方法体function(feature){...}来操作每一个feature:

首先,设置symbol属性,就是图中绿色的小圆锥体;

其次,设置的是popupTemplate属性,就是弹窗,在本篇上面有介绍。

最后返回feature,作为peakResults数组的一个元素。

这个peakResults数组就是搜索得到的要素的集合,只不过添加了弹窗模板和圆锥点状符号而已~

在这里,使用到了arrayUtils这个类的map方法,遍历操作了features的每一个feature。

【经过查询,arrayUtils查不到信息,dojo官方网站给的是array.map()方法,可能这两个是版本区别吧...?】

关于PointSymbol3D({...})这里面的内容我不多叙述了,给出源代码,各位对符号有兴趣可以自行学习。

feature.symbol = new PointSymbol3D({
  symbolLayers: [new ObjectSymbol3DLayer({
    material: {
      color: "green"
    },
    resource: {
      primitive: "cone"
    },
    width: 100000,
    height: feature.attributes.ELEV_m * 100
  })]
});

PointSymbol3D

peakResults作为Object数组传入resultLyr,然后将视图定位到peakResults(使用goTo()动画),并刷新DOM上的文字信息,提示有多少个点被找到。

总结一下

这个例子,我没记错的话是第一个接触到Task这个类的东西,这里是Task类的子类QueryTask。

思路比较简单,把Query对象传入QueryTask对象,再由回调函数处理返回的FeatureSet即可。

这里还用到了简单的3D点符号~

【最后叹一句:终于能恢复更新了,估计这周内就能完成空间查询和空间分析章节的笔记!】

时间: 2024-11-10 12:04:49

ArcGIS API for JavaScript 4.2学习笔记[22] 使用【QueryTask类】进行空间查询 / 弹窗样式的相关文章

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学习笔记[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学习笔记[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学习笔记[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学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮(第五章完结)

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

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).%Popula

ArcGIS API for JavaScript 4.2学习笔记[30] 点和线高程查询(第八章完结)

终于到最后一篇了,可喜可贺. 本例先说明了如何进行单点的高程差分析,然后说明了道路的起伏分析.前者很直观地比较了两个年份的高程数据之间的差值,体现山区的高程变化(有啥用啊?)后者,一条路上的起点终点起伏多少,可以给驾驶导航提供更多样化的数据. 本例使用了高程图层和RouteTask. 本例对应的官方例子是:Query Elevation (Points)和Query Elevation (Lines) 1. 点高程差查询 1.1 结果显示 选了一个明显的点,绿色的是地形变化前的高程点,红色的球是

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学习笔记[31] (补充学习)Task类

Task这个东西很有用,是AJS中用于解决各种乱七八糟任务的一个类.它有很多子类,有用于空间分析的,有用于空间查询的,等等. 这篇作为补充学习的第一篇,也是进阶学习的第一篇,我就改个写法. 我将使用思维导图,更好呈现逻辑信息. Task类的继承关系 Task类继承自Accessor类,它又有17个子类.别担心,各取所需,很少能用上超过5个子类的AJS程序,除非是一个超大的AJS集成系统. 以上有我熟知的QueryTask.RouteTask.FindTask.Geoprocessor.Ident