ArcGIS API for JavaScript 4.2 Learning note [22] using "querytask class" for spatial query/popup style

In the previous article, the use of the query class for querying the features of the Featurelayer layer is also a brief introduction to the use of the Querytask class.

This blog post continues, using the query class and the Querytask class for spatial queries, querying the famous mountain point features of the Usa.

likewise, only the focus is Introduced. The official name of this chapter Is: Query using Querytask

As usual, take a look at the results: (default three parameters are not moved, directly click the Button)

A green cone appears, and a custom-made pop-up window (popuptemplate) is available by clicking on the Cone:

ok, Start the class.

Give a reference

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 is a geometric layer used to display a green cone;

Objectsymbol3dlayer and Pointsymbol3d are the modules used to display green cones;

Query and Querytask are the necessary modules for this section of spatial queries.

Give the skeleton

function(...) {      varPeaksurl = ... (feature Service)varPopuptemplate = {...}; varMtnsymbol =NewPointsymbol3d ({...}); varResultslyr =NewGraphicslayer ({...}); //two elements of spatial query      varQtask =NewQuerytask ({...}); varparams =NewQuery ({...}); varMap =NewMap ({...}); varView =NewSceneview ({...}); varAttributeName = Dom.byid ("attselect"); varExpressionsign = Dom.byid ("signselect"); varValue = Dom.byid ("valselect"); //method Body      functiondoquery () {...} functionGetResult (response) {...} functionpromiserejected (err) {...} //Dom Button EventsOn (dom.byid ("dobtn"), "click", doquery);}

In order to save space and focus, from here on the map class and the view class object instantiation is no longer code to show, I believe that all the way to see my blog students can understand that the basis of the two classes of Use. Unless the two classes have new property assignments, they are Omitted.

This example program still has popuptemplate, as the green cone point symbol of the query results pop-up WINDOW. It's amazing that I found some styles that can be used to control pop-up windows via Css:

{  font-size: 18px;   font-weight: bolder;}  {  font-size: 14px;}

The. Selector is Used.

Briefly look at the composition of the popup template: (review)

var popuptemplate = {    "{...},{...}" ,    fieldsinfos: [{...},{...},{...},{...},{...},{...}],    "<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) "};

The title is populated with two fields and has 6 field information (FIELDSINFOS) as the content fill;

Content is still output in the form of text in the HTML language.

This is followed by the definition of the symbol and geometry layer:

var New pointsymbol3d ({  symbollayers: [new  objectsymbol3dlayer ({    resource: {      "cone "    }  })]}); var New Graphicslayer ();

Here to mention the Pointsymbol3d class, this class is a esri/symbol under the module, the same level also has linesymbol3d, meshsymbol3d, Polygonsymbol3d and so On.

Here is a property: symbollayers, the category is the Objectsymbol3dlayer array (collection type, So here is the [] array).

Directly new in the assignment of a property Objectsymbol3dlayer,objectsymbol3dlayer uses the Resourse property, which is an object-type Property. The value given here is the primitive property is the "cone" string, which means the Cone. Primitive is a property of the resource property, which is an enumeration value, see: dot I

This is the most important place in the article!

Spatial query two elements

On the Code:

var New querytask ({  url:peaksurl}); var New Query ({  true,  outfields: ["*"]});

The query sees the last blog post, and this querytask needs to be explained in a good way:

It is a module under the esri/tasks/directory, inheriting from accessor sub-class task, is AJS4.X.

It appears to satisfy the need for spatial queries on a layer. Its most commonly used method is the Excute () method, which typically requires a query object to be passed IN.

Its return type is the object of Promise's FeatureSet class (a bit of a mouthful, promise a feature Bar)

The returned FeatureSet is a collection of all the features on the layer that conform to the incoming Query.

In this example, the feature service is used as the Querytask constructor:

var New querytask ({  url:peaksurl});

URL This property is shown below:

It can be a featureserver, or it can be mapserver. This means that we can instantiate a Querytask object using both of these services on the Server.

well, Spatial Analysis Two elements are created, with the query object and Querytask object, we need to do space search, since paddle, now have rice, also should cook up.

Analysis Section

I'm going to have a more stereoscopic view than the code looks like:

When a button on the DOM is pressed, the Doquery event is triggered, and the parameter is taken from the three Drop-down boxes (the value of the option tag), which is set to the SQL query statement, which is the where property of the query Object.

At this point, the query object (named Param) into the Querytask object (named qtask) in the Excute () method, using the GetResults () method as a successful query callback function, using the promiserejected () method as a callback function that failed the Query.

Logic is simple, only one branch, the failure of the promiserejected () will not elaborate, but in the background console output error message Only.

Mainly look at GetResults and see what it does with the query results:

function getresults (response) {  varfunction(feature) {
    feature.symbol = new Pointsymbol3d ({...});     = popuptemplate;     return feature;  });  Resultslyr.addmany (peakresults);    View.goto (peakresults);  Dom.byid ("printresults"). InnerHTML = peakresults.length +    "results found!" ;}

Response is the FeatureSet object, use a method body function (feature) {...} on its features Object. To operate each of the Feature:

first, set the symbol property, which is the small green cone in the figure;

second, the set is the Popuptemplate property, is the pop-up window, in this article is described Above.

finally, feature is returned as an element of the Peakresults array.

This peakresults array is a collection of features that are searched for, except for the addition of popup templates and cone point symbols ~

here, using the Map method of the Arrayutils class, the traversal operates on every feature of the Features.

"after inquiry, Arrayutils can not find information, Dojo official website to the Array.map () method, Perhaps these two are version difference bar ...? 】

About Pointsymbol3d ({...}) The contents of this I do not describe more, give the source code, you are interested in the symbol can learn by Themselves.

New pointsymbol3d ({  symbollayers: [new  objectsymbol3dlayer ({    material: {      " Green "    },    resource: {      " cone "    },    100000,    *   })]});

Pointsymbol3d

Peakresults into the Resultlyr as an object array, then navigates the view to Peakresults (using the goto () Animation) and refreshes the text information on the DOM to indicate how many points are found.

Summarize

This example, I remember correctly, is the first thing to come into contact with a task class, which is the subclass of the task class Querytask.

The idea is relatively simple, the query object is passed into the Querytask object, and then the callback function is processed to return the Featureset.

It also uses a simple 3D dot symbol ~

"finally Sigh: finally can restore the update, estimated this week will be able to complete the space query and Space Analysis Chapter notes!" 】

ArcGIS API for JavaScript 4.2 Learning note [22] using "querytask class" for spatial query/popup style