ArcGIS API for JavaScript 4.2 Learning notes [20] querying features using parameters (oil well and earthquake relationships)

This example is quite complicated. Let me briefly say what this example is about.

On the UI, a drop-down box, two sliders are provided to determine three parameters and use these three parameters for spatial queries. This example is quite the meaning of spatial query.

What does this example do? The first parameter is the oil well type, the second parameter is the buffer radius of the well, and the third parameter is the seismic level.

Given the type of oil well, the buffer radius of a given well, given the magnitude of the earthquake, can be found in the vicinity of the well with this buffer radius to search for a given seismic level of seismic data.

Because the exploitation of the oil field will cause the underground space collapses, and causes the earthquake.

Look at the search results (randomly selected parameters):

The orange dot is the search result (earthquake point).

Give a reference

Not much to say, see how many references to this example are:

 require ([ "Esri/map" " ESR        I/views/mapview "" Esri/layers/featurelayer ",  "Esri/layers/graphicslayer"  "Esri/geometry/geometryengine"  "esri/graphic"  "esri/symbols/simplefillsymb Ol "" Esri/symbols/simplemarkersymbol ",  "dojo/on"  "Dojo/dom" ,  "Dojo/dom -construct " "dojo/domready!"  ",  function   (...) {...});

Two types of layer,featurelayer are data layers, Graphicslayer are buffer layers and result display layers.

In order to support the Graphicslayer buffer, the Geometryengine module and the graphics module are needed.

In order to support the result display, the Simplefillsymbol module and the Simplemarkersymbol module are used.

function parameter skeleton

function(Map, Mapview, Featurelayer, Graphicslayer, Graphics, Simplefillsymbol, Simplemarkersymbol) {varQuakesurl = "..."; varWellbuffer,wellsgeometries,magnitude; //Get DOM element    varWelltypeselect = Dom.byid ("Well-type"); varMagslider = Dom.byid ("Mag"); varDistanceslider = Dom.byid ("Distance"); //Featurelayer&graphicslayer Definition    varWellslayer =NewFeaturelayer ({...}); varQuakeslayer =NewFeaturelayer ({...}); varResultslayer =NewGraphicslayer ({...}); varMap =NewMap ({...}); varView =NewMapview ({...}); View.ui.add ("Infodiv", "Top-right"); View.then (function(){...}); //Functional Methods    functiongetValues (response) {...} functionGetuniquevalues (values) {...} functionAddtoselect (values) {...} functionsetwellsdefinitionexpression (newvalue) {...} functionqueryforwellgeometries () {...} functionCreatebuffer (wellpoints) {...} //EventsOn (Magslider, "input",function(){...}); On (Distanceslider,"Input",function(){...}); On (Distanceslider,"Change",function(){...}); On (Welltypeselect,"Change",function(evt) {...}); On (Dom.byid ("Query-quakes"), "click",function(){...}); //remaining Methods    functionqueryearthquakes () {...} functionDisplayResults (Results) {...})

function Parameter Skeleton

Can scare me, such a huge skeleton (the script tag has 200+ line).

After one months of reading, I was able to understand these processes, such as:

Some places may not be quite right.

is divided into two pieces, one is the event body, the other is the function body.

Let's talk about the simple, event body.

Event Body

The Change event body of the two dom elements of Welltypeselect and Distanceslider will trigger the body of the Createbuffer () function independently, The Welltypeselect event will first trigger the setwellsdefinitionexpression () function body to traverse the search geometry and then give the return value (the Geometry collection of the seismic point wellsgeometries) to Createbuffer () function body, which generates buffers.

This means that the buffer will be redrawn as long as the type of the well (the item in the drop-down list is changed) and the distance slider changes.

The Distanceslider input event changes the value on the DOM to the value of the buffer radius.

The input event of the Magslider changes the value on the DOM to the magnitude of the seismic level.

The Click event of the Queryquakes button results in a stack analysis of the generated buffers, searching for the seismic points in the buffer.

For a large number of variables if not very understand, here can be slowly, the following functions are described in more detail, the event body mainly understand what the DOM event can do.

function body

Several function bodies are chain-linked, and are chained asynchronously in Mapview then.

Here I have to mention the asynchronous operation and the then usage.

Then the implication is that when the previous action is done on the server, then the contents of then are executed.

Because JS is a single-threaded interpreted language , will not compile, will only be read from beginning to end, so the execution of the code before then, it is impossible to stop there .

Then the code in front of it must have something like a receipt (which can be understood as the return value ), but the browser can't wait for the receipt.

So just write a callback function in then, throw it to the server, and then return the "return value" to the callback function after the server waits for the next operation to complete.

Then the things in the then () will not be executed locally at once, waiting for the result of the previous step in the local will only cause the browser to die.

In fact, my red keyword is the idea of asynchronous operation.

After reviewing the asynchronous operation and then, let's look at the same sequence of view:

View.then (function() {    return wellslayer.then (function() {       var query = wellslayer.createquery ();       return wellslayer.queryfeatures (query);    });  })   . Then (getValues) and then (Getuniquevalues). Then (  addtoselect)  . Then (createbuffer);

I give my interpretation directly: first, after the view is loaded, the first then is executed, and the first then returns the spatial search (Queryfeatures () of the Wellslayer) result, which is the FeatureSet type, named Response. Where is this response used? It is passed to the GetValues () method body:

function getValues (response) {  var features = response.features;   var values = Features.map (function(feature) {    return  feature.attributes.STATUS2;  });   return values;}

After checking, response is indeed an instance of the FeatureSet class, and through GetValues gets the values of all STATUS2 fields for all features in it, named values, AJS types in collection.

Values are also passed to the Getuniquevalues () method body:

function Getuniquevalues (values) {  var uniqueValues = [];  Values.foreach (function(item, i) {    if (Uniquevalues.length < 1 | | Uniquevalues.indexof (item) ===-1) && (item!== "")) {      Uniquevalues.push (item);    }  });   return  uniqueValues;}

Traverse values according to certain rules (if statements), use the Foreach method of the collection class, and return the traversal result as an array of JS, named UniqueValues, passed to

Addtoselect () method body, implementing the selection list this DOM element appears on the well type (option):

function Addtoselect (values) {  values.sort ();//Sort  Values.foreach (function(value) {     var option = domconstruct.create ("option");     = value;    Welltypeselect.add (option);//Add options to the drop-down list
Return setwellsdefinitionexpression (Welltypeselect.value);});

You can't just add it! So it will return the result of the method Setwellsdefinitionexpression ().

Setwellsdefinitionexpression () This method is to set the Wellslayer SQL query statement, but no end, setwellsdefinitionexpression () This method also has a layer of return:

functionsetwellsdefinitionexpression (newvalue) {wellslayer.definitionexpression= "STATUS2 = '" + newvalue + "'"; if(!wellslayer.visible) {wellslayer.visible=true; }  returnqueryforwellgeometries ();}functionqueryforwellgeometries () {varWellsquery =Wellslayer.createquery (); returnwellslayer.queryfeatures (wellsquery). Then (function(response) {wellsgeometries= Response.features.map (function(feature) {returnfeature.geometry;//Returns the geometry of a feature}); returnwellsgeometries;//Returns all the geometry (as a collection)});}

Queryforwellgeometries () This method is the Setwellsdefinitionexpression () method that is bound to trigger the method body, which is used to search for geometry in Wellslayer.

Spatial Query Essentials

Have you noticed? A spatial query is a query object that requires a layer.

In Wellslayer, a query object can be returned using the CreateQuery () method, which contains all the information used for a spatial query (search), which, through it, To use Queryfeatures and other methods to make a spatial query (search) for a layer that requires a spatial query (search).

So the corresponding method body of the sequence of the graphs is already explained. (I do not know if you can stick to this, do not know if you can read ...) ）

There are three methods of body, Createbuffer (), Queryearthquakes () and DisplayResults ().

Let's take a look at createbuffer ():

functionCreatebuffer (wellpoints) {varBufferdistance =parseint (Distanceslider.value); varWellbuffers =Geometryengine.geodesicbuffer (wellpoints, [bufferdistance],"Meters",    true); Wellbuffer= Wellbuffers[0]; varBuffergraphic =NewGraphic ({geometry:wellbuffer, symbol:NewSimplefillsymbol ({outline: {width:1.5, color: [255, 128, 0, 0.5]}, Style:"None"})});

View.graphics.removeAll ();
View.graphics.add (buffergraphic);
}

The buffer radius is obtained from the DOM element, and then the Geodesicbuffer method in the Geometryengine toolset (or class, not so much as the spatial Analysis section) is generated, and the data is the passed parameter wellpoints, The collection of geometry returned by the last layer in the Addtoselect () method above (well point collection).

Then instantiate the graphic instance, set the color, line width, and then add it to the graphics container in view.

Look again at Queryearthquakes () and DisplayResults ():

functionQueryearthquakes () {varquery =Quakeslayer.createquery (); Query.where= "Mag >=" +Magslider.value; Query.geometry=Wellbuffer; Query.spatialrelationship= "intersects"; returnquakeslayer.queryfeatures (query);}functionDisplayResults (results) {resultslayer.removeall (); varfeatures = Results.features.map (function(graphic) {Graphic.symbol=NewSimplemarkersymbol ({style:"Diamond", Size:6.5, Color:"Darkorange"    }); returngraphic;  }); varNumquakes =features.length; Dom.byid ("Results"). InnerHTML = Numquakes + "Earthquakes found"; Resultslayer.addmany (features);}

Previous setting query (again query! ), returns the results of the Quakeslayer search (see next method, which should be of type FeatureSet), and the result is passed to DisplayResults (passed through then asynchronously in the Click event of the button), called results.

In the latter method body, use the map method to traverse all the geometry in the feature, set the line width and color symbol styles, and finally refresh the display on the DOM element to see how many earthquake points "numquakes earthquakes found" and add these features to the result layer and refresh the display.

The last two is actually a spatial query (search) through the buffers generated above, and the process of getting results and refreshing the display.

At this point, this example is all explained, as to what some variables are, look at the type of new know, all the way to see my article should understand.

————

Testimonials: One months, good drag ah ... 4.3 It took so long to conquer this example. Well, the next example will not be so smelly and long ...

Summarize

This example further deepens the code understanding of asynchronous operations and traversal by using the query object of a layer and combining buffers in spatial analysis (using Geometryengine).

To be able to conform to the core code of this chapter space query (search), but also is wellslayer.createquery () This code and the properties of the query object set, the graphics operation (traversal, property settings) and the results of the transfer of each other is not the focus of this chapter, So it leads to the difficulty of reading this example.

The approximate process is to get the field value from Featurelayer and add it to the drop-down selection list--Select a well type, set buffer radius, get the point geometry collection of the well in the background, generate buffers--use buffers, and set the seismic level, make spatial query, get the search result of the earthquake point, Refresh the display.

over!

ArcGIS API for JavaScript 4.2 Learning notes [20] querying features using parameters (oil well and earthquake relationships)