ArcGIS API for JavaScript 4.2 Learning notes [16] Popup Custom Function buttons and custom buttons for features (end of fifth chapter)

This section introduces and resolves the last two examples of the Popups chapter.

The first Popup Actions describes how to customize the tool button (named Actions) in the pop-up window to measure the length of the feature in Popuptemplate+featurelayer form.

The second "Custom Popup actions per feature" is the previous upgrade, if the function of the previous example is to write dead, then this example will write the function to live. What do you mean? The distance from the last example can only be measured, nothing else is special. This example takes the distribution of the beer Shop (Point feature layer) as an example, and pops the custom button on Google search results even pops up on the brewery's website.

What are the actions?

Actions are a property of the popup class, which is collection, which is an array container of the same type Ajs object or native JS object.

What can it fit?

Can install some "action", these actions when clicking on the bottom left corner of the pop-up button, will trigger the "action" in this container. Each pop-up window has a default "action", that is, "zoom-to" zoom function, is a small magnifying glass.

Look at the results of the first example:

When you press the small distance ruler button in the pop-up window, the length of the Red Line feature appears in the gray text bar: 11.82miles.

Look at the result of the second example:

The results of Google search will pop up when the button is pressed.

Let's see code parsing!

"Part I simple action: Ranging"

Give a reference

require (    [      "Esri/map",      "Esri/layers/featurelayer",      "esri/views/ Mapview ",      " Esri/geometry/geometryengine ",      " dojo/domready! "     ],     function (...) {...});

More than a geometryengine, for the time being, whatever it is, continue to look down.

In advance, the reference to the CDN is one more line:

  <Linkrel= "stylesheet"href= "Https://js.arcgis.com/4.2/dijit/themes/claro/claro.css">  <Linkrel= "stylesheet"href= "Https://js.arcgis.com/4.2/esri/css/main.css">  <Scriptsrc= "HTTPS://JS.ARCGIS.COM/4.2/"></Script>

function parameter skeleton

function(Map, Featurelayer, Mapview, geometryengine) {varMap =NewMap ({...}); varView =NewMapview ({...}); varMeasurethisaction = {...}; varTemplate = {...}; Featurelayer=NewFeaturelayer ({...});        Map.add (Featurelayer); functionmeasurethis () {...}; View.popup.on ("Trigger-action",function(Event) {...});

Routines are still, map and view instantiated. The var template is the Popuptemplate object assigned to the Featurelayer popuptemplate attribute, and then the Featurelayer is dropped into the map.

Well, what are the other strange ones? Measurethisaction This object, Measurethis this method, and View.popup.on method?

Don't worry, come one at a.

Where the measurethisaction appeared one by one pulled out:

var measurethisaction = {  "Measure Length",  "Measure-this",  " Measure_distance16.png "};

var template = {  "Trail run",  "{name}",  actions: [Measurethisaction]};

OK, obviously, measurethisaction is an object with title, ID, and image, corresponding to the title, ID, and pattern on the button. This PNG file is in the same level of HTML directory.

The following template is the object required for the Popuptemplate property of Featurelayer, with title, content, and the third actions property assigning the above measurethisaction to it (array form, Because it is the collection type).

Can be understood as follows:

Measurethisaction is an "action" statement that itself has no functionality and can be described as a description on the UI layer.

————

So Measurethis () this method?

function Measurethis () {  var geom = view.popup.selectedFeature.geometry;   var distance = geometryengine.geodesiclength (Geom, "Miles");   = parsefloat (Math.Round (distance *)/+). ToFixed (2);   = View.popup.selectedFeature.attributes.name +    "<div style= ' background-color:darkgray;color:white ' >" + Distance +    "miles.</div>";}

Here comes a new gadget: The Selectedfeature property of the Popup class and the Geodesiclength method of its child properties Geometry/attributes,geometryengine class.

Query API, read:

Selectedfeature Property Category: Graphic class, the currently selected feature.

So graphic's geometry and attributes attributes are easy to find:

Geometry: Geometry, there's nothing to say. Type: Geometry class.

Attributes: A paired collection of field names and field values for a feature.

————

Geodesiclength (): Calculates the length of the incoming geometry (Geometry).

So this method is: Get the geometry and then calculate the length in Geodesiclength (), in miles. Then set the content dynamic setting of the popup to get the feature length value.

————

So View.popup.on () this method?

Look at the complete method body:

function (event) {  if (event.action.id = = = "Measure-this") {    measurethis ();  }});

has been gray often, gray often obvious, in the Popup this class "Trigger-action" event, binding an event method body: If "trigger" action "ID is" Measure-this ", then execute Measurethis () The method performs the ranging and outputs to the content of the popup.

So, what is this trigger-action?

Trigger-action is one of the events of the popup, and the common click event is the same, meaning that the popup "when action" is triggered. Click "When mouse clicks".

The Popup's TriggerAction () method takes an index to trigger the Trigger-action event, and then executes the corresponding action of the index.

Now you get it!

Sum up.

Want to get a button on the pop-up window, you need to: Tell AJS I want to create a button, this button can do something.

The first step is to create a button that is created using the object Measurethisaction and added to the Actions property of Popuptemplate (array form).

The second step is to write out the event method measurethis the button and bind it to the Trigger-action event.

"Part II for buttons to customize more advanced unique features"

Save space, quoting and referencing the skeleton together to give

require (["Esri/map", "Esri/views/mapview", "Esri/layers/featurelayer", "dojo/domready!"    ],    function(map,mapview,featurelayer) {varMap =NewMap ({}); varView =NewMapview ({}); varFeaturelayer =NewFeaturelayer ({... definitionexpression:"Country = ' states '", Popuptemplate: {... actions: [{ID:"Find-brewery", Image: "Beer.png", Title: "Brewery Info"}]            }        });        Map.add (Featurelayer); View.then (function(){            varPopup =View.popup; Popup.viewModel.on ("Trigger-action",function(Event) {...})    }); })

Due to the syntactic characteristics and object-oriented features of JavaScript, many of the object and method parameters of Part I are assigned directly with {}.

You can see that the Featurelayer and actions,actions are still instantiated with the map and view, not the [object name] but [{}], but there is no substantial difference.

Then add the Featurelayer to the map.

The last and part I are different, the section I is View.popup.on ("Trigger-action", function (event) {...})

The part II here takes the popup first in the view's callback function and then uses Popup.viewModel.on ("Trigger-action", function (event) {...}).

We don't see the difference for the time being, let's take a look at this function. (event) {...} What it does:

 popup.viewmodel.on ("Trigger-action", function   if  (event.action.id = = = "Find-brewery"  var     attributes = popup.viewModel.selectedFeature.attributes;     var  info = Attributes.website;  if  (info!== null  ) {window.open (Info.trim ());  else   {window.open ( "https://    www.google.com/search?q= "+ Attributes.name); }  }});

Still and Part I no difference, the same is to get some information, if the info exists directly open, if not exist to Google search this keyword, that is, if the selection of the beer Shop has a website link, then jump to this site; If the beer shop does not have a website, give Google search page.

So I think, Popup.viewModel.on () of the Writing and View.popup.on () the wording of no different, more than a layer of reference.

We end up in the official example to see what's missing:

No. Explain that the two formulations should be generic? Leave a mark and test later.

At this point, the fifth chapter also concluded the study, this chapter is I am relatively busy when writing, may read more laborious, you crossing also please forgive me.

In the next chapter "Searching" is the spatial query, I will convert the mood, write better notes to learn AJS 4.2.

Spatial query code volume will surge, and AJS 4.3 release is also fast, so learning AJS 4.2 time is not much, the new version must have new features, I will continue to update 4.3 new features, and to be interpreted and tested.

Next Chapter Goodbye!

ArcGIS API for JavaScript 4.2 Learning notes [16] Popup Custom Function buttons and custom buttons for features (end of fifth chapter)