ArcGIS API for JavaScript 4.2 learning Note [26] buffer analysis "Based on Geometryengine tool class"

The most classic example of GIS spatial analysis is the buffer zone analysis.

This example uses Geometryengine to draw the buffer ring. Because the official example has a 2D and a scene, it is more complicated.

When the mouse clicks on the view, a buffer ring is generated (centered at the point of the click);

When the mouse is dragged, if it is not roaming, then the buffer ring will move along with it.

I'll mark the core code of the generated buffer with the headline red, and you can jump right there to learn the buffer generation.

First of all, what is the buffer that exists?

In desktop GIS, a buffer is a polygon feature, which can be a feature class or a SHP file.

In AJS, the buffer is a polygon or polygon[] that exists in the Graphicslayer layer object.

Before formally looking at this example, you need to understand an extremely important tool class: Geometryengine. It provides dozens of spatial analysis methods, such as buffer (), clip (), Intersect (), and so on.

Only the Geodesicbuffer () is used here. //As to what the difference between geodesicbuffer () and buffer () is, it is not known yet, unknown origin.

Well, with these preliminary knowledge, we can begin!

Results show

Clicking or dragging on the current map frame creates a buffer ring centered on the point of click before the navigation mode check box is selected.

Give a reference

var Chkmapview = false, Chksceneview = false;
Require ([    "Esri/map", "Esri/views/sceneview", "      esri/views/mapview", "esri/layers/ Graphicslayer "," Esri/graphic ",    " Esri/symbols/simplemarkersymbol "," Esri/symbols/simplefillsymbol " ,    " Esri/geometry/geometryengine ",    " dojo/on ",    " Dojo/dom "    ," dojo/ domready! "   ],   function (    Map,sceneview,mapview,    graphicslayer,graphic,    Simplemarkersymbol,simplefillsymbol,    Geometryengine, on    , Dom  ) {...});

Wow 2d3d at the same time with a cool dazzle.

Note: Note: Note that there are more than two variables of type bool above require, what is the use, the following will say.

The key is Geometryengine.

Ideas

Because the extra code for this example is too much, I'll talk about it first, otherwise the reader will be stunned.

Click View--Get point--the Geodesicbuffer () method of incoming Geometryengine--Returns the display of polygon to graphicslayer--refresh view.

Skeleton

function (...) {    varMap =NewMap ({...}); varView3D =NewSceneview ({...}); varview2d =NewMapview ({...}); varPolysym =NewSimplefillsymbol ({...});
var pointsym = new Simplemarksymbol ({...}); varBufferlayer =NewGraphicslayer (); varPointlayer =NewGraphicslayer ();    Map.addmany ([Bufferlayer, Pointlayer]); View2d.on ('Drag', Function (evt) {...}); View3d.on ('Drag', Function (evt) {...}); View2d.on ("Click", Function (evt) {...}); View3d.on ('Click', Function (evt) {...});    function Bufferpoint (point) {...}    function Cleargraphics () {...} On (Dom.byid ("Chkboxmap"),"Click", Function (evt) {...}); On (Dom.byid ("Chkboxscene"),"Click", Function (evt) {...});}

It is not difficult to understand this example except for the 6 event method bodies, and the cliché map, view, only the two symbolic objects, two geometric layers, and two function functions of polysym and Pointsym.

Aside from this: foreigners estimate that this demo is also cross-mixed, double quotes and single quotes casually, the same chapter different examples of function parameter names are sometimes casually written, may be JS language features it.

Here, the Polysym and Pointsym two objects only show the mouse click Point and Generate buffer circle area, not as the focus, but the specific code to the people who need to see:

varPolysym =NewSimplefillsymbol ({color: [ $, $,222,0.5], outline: {color: [0,0,0,0.5], Width:2  }});varPointsym =NewSimplemarkersymbol ({color: [255,0,0], outline: {color: [255,255,255], Width:1}, Size:7});

Two Symbol Objects

Let's start by talking about two ways of how the body works:

Two method bodies: Generate buffers and clean layers

function Bufferpoint (point) {  cleargraphics ();  Pointlayer.add (new  Graphic ({    geometry:point,    symbol:pointsym  }));   var buffer = Geometryengine.geodesicbuffer (point, 560, "kilometers");  Bufferlayer.add (new  Graphic ({    geometry:buffer,    symbol:polysym  }));} function Cleargraphics () {  pointlayer.removeall ();  Bufferlayer.removeall ();}

At a glance at the back, clear the features on the two geometry layers.

First, call the latter one, and then add the incoming points to the point geometry layer, using the Pointsym symbol object.

The most critical sentence is Geometryengine.geodesicbuffer (), know the incoming point, is a geometry class object, buffer radius of 560 "kilometers".

Returns a polygon (because there is only one point), and then adds the polygon (named buffer) to the polygon geometry layer.

——————

In fact, the buffer example here can be ended, but there are a lot of events is to tell us how to get the click Point, and How to convert the point of click to geometry, because the event will definitely call these two methods body, otherwise cannot generate buffer.

Students who are interested can continue to explore these 6 events with me.

First, the previous flowchart:

It's that simple.

Let's take a look at the click event of two pure DOM elements:

function (evt) {  = Dom.byid ("Chkboxmap"). Checked;   if (Chkmapview) {    cleargraphics ();  }}); O N (Dom.byid (function(evt) {  = Dom.byid ("Chkboxscene"). Checked;   if (Chksceneview) {    cleargraphics ();  }});

When you click the check box, assign the value of the check box (checked) to Chkmapview and Chksceneview, which are the first variables in front of require.

Then check the values of Chkmapview and Chksceneview, and if it is true that the just click is the transition from the buffer generation state to the roaming state, you need to perform the Cleargraphics () method to clean up the pattern on the layer.

Take a look at the four other events, which are the events on the two view:

View2d.on (' drag ',function(evt) {if(!Chkmapview)    {evt.stoppropagation (); varPoint =View2d.tomap ({x:evt.x, y:evt.y}); if(point) {bufferpoint (point); }  }  Else if(Chkmapview) {cleargraphics (); }}); View3d.on (' Drag ',function(evt) {if(!Chksceneview)    {evt.stoppropagation (); varPoint =View3d.tomap ({x:evt.x, y:evt.y}); if(point) {Point.hasz=false; Point.z=undefined;    Bufferpoint (point); }  }  Else if(Chksceneview) {cleargraphics (); }});

Drag Events

Dragging events is slightly more complex than the Click event.

Advanced Go is the IF Else branch, if the roaming state is called cleargraphics () if it is not roaming:

First stop the roaming state and call the Stoppropagation () method.

Then get the information for the clicked Point, and use the view's Tomap method to return a Dot object (geometry subclass).

If the returned point object is not empty, the Bufferpoint () method is executed to generate the buffer.

The z-coordinate is also checked in the 3D view.

View2d.on ("click",function(evt) {if(!Chkmapview) {    if(evt.mappoint) {bufferpoint (evt.mappoint); }  }  Else if(Chkmapview) {cleargraphics (); }}); View3d.on (' Click ',function(evt) {if(!Chksceneview) {    if(evt.mappoint) {Evt.mapPoint.hasZ=false; Evt.mappoint.z=undefined;    Bufferpoint (Evt.mappoint); }  }  Else if(Chksceneview) {cleargraphics (); }});

View's Click event

These two click events are simple, in fact, there is no drag event stoppropagation () that part of the acquisition point is not so troublesome, direct transmission of the EVT event stream MapPoint attribute can be.

One might ask, why does the 3d view move after the 2d view moves the point?

is because two views share a copy of the Graphicslayer that contains the two display buffers in the Map,map.

Well, this example is not summed up, all at the top of the finished. See the next example.

ArcGIS API for JavaScript 4.2 learning Note [26] buffer analysis "Based on Geometryengine tool class"