ArcGIS API for JavaScript 4.2 Learning notes [+] layer's pop-up window (popuptemplate)

In the previous article, the popup is a pop-up window, which is the default built-in pop-up window for the View object, and is constructed when the view object is constructed.

So what is this popuptemplate?

The latter half of the word template is the meaning of "templates", I initially understand that can be customized pop-up window. Read the API ref carefully to give a more accurate definition:

Popuptemplate is a pop-up window for layers and graphic, which differs from the one that is most important to the popup (the popup is primarily for view). The object it serves is the feature class or graphic in the layer, which gets the field from the feature and displays it in HTML syntax to the content property of the pop-up window.

Plain English said, Popuptemplate are more customizable, and many times complex data displays rely on popuptemplate rather than simple popup.

The query learns that Popuptemplate has fewer attributes, but retains important attributes of the popup, such as

Actions, content, title

Surprised to find that the title and content of Popuptemplate is different from the title and content of the popup, the former title and content, in addition to the string type, can also be a method, content provides an object [] Support. This is important, for the following to introduce the popuptemplate with function, here first say hello, will be introduced in detail later.

In this example, the data is based on Featurelayer. Do not know Featurelayer, as is the desktop version of the Featurelayer, with a simple feature classes and fields.

Give a reference

require (    [      "Esri/map",      "Esri/views/mapview",      "esri/layers/ Featurelayer ",      " dojo/domready! "     ],     function (Map, Mapview, Featurelayer) {});

function parameters

function (map, Mapview, Featurelayer) {    var map  new  map ({...});     var New Mapview ({...});     var template = {...};     var New Featurelayer ({...});    Map.add (Featurelayer);}

After extracting the skeleton content, this example code is very concise:

1. Routinely instantiate map and Mapview

2. var a template Anonymous object, this is the Popuptemplate object

3. New one Featurelayer

4. Add Featurelayer to map

The most critical part is the content of this anonymous object and how the Featurelayer object is bound to the template, and the rest is not difficult.

How is the template object organized?

Still take the trunk and see what the template is:

var template = {    "marriage in NY, zip Code: {zip}",    "...",    Fieldinfos: [{... },{...},{...}]}

Clearly, there are several key attributes of Popuptemplate: Title, Content, Fieldinfos

The first two are headings and content. In the content, the HTML syntax shows the "template" 's Power:

Content: "<p>as of <b>{MARRIEDRATE}%</b> of the population in this zip code is married.</p>" +   "<ul><li>{married_cy} People is married</li>" +   "<li>{nevmarr_cy} has never Married</li> "+   " <li>{divorcd_cy} are divorced</li></ul> "

Familiar with the HTML grammar of the students must not be unfamiliar with the meaning of these tags. But--

{marriedrate}, {nevmarr_cy}, {Divorcd_cy}, and {ZIP} with title above is what ghost?

Originally, this is featurelayer each field name, when the window, the corresponding field value will replace the curly brace.

So what is the object array in FieldInfo?

Fieldinfos: [    {      "married_cy",      format: {        true,         0        }    },     {      "nevmarr_cy",      format: {/// Ibid}    } ,    {      "divorcd_cy",      format: {// Ibid}    }]

Here//Ibid is exactly the same meaning, in order to omit it is not written again.

It can be seen that each object contains FieldName, which appears to correspond to the field name of the Featurelayer field.

and format, which is formatted, contains the number format of the output to the pop-up window, where Digitseparator is the delimiter, such as the number "10,000,000", the comma is the delimiter; places is the decimal place.

So this fieldinfo is also a property that describes the data and its format.

So, how does this Popuptemplate object (anonymous) bind to Featurelayer?

Pop-up windows and feature layer bindings

In fact, there is an attribute in Featurelayer, called Popuptemplate. That's easy to understand, right? On the code:

var New Featurelayer ({  "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ nycdemographics1/featureserver/0 ",  outfields: [" * "],  popuptemplate:template});

Whatever else, featurelayer. This object binds popuptemplate by assigning the template object to Featurelayer's Popuptemplate property.

Well, let's look at the results:

The results are obvious, and all the formatting you've just set up has a corresponding display on the pop-up window.

There is a layer of vectors in the Mapview, which is featurelayer. (I can see that ESRI's stroke algorithm for vector graphics is not very good, the sharp place is not as good as the desktop version, it should be the problem of buffer algorithm)

Sum up.

To customize a specific feature layer or graphic set the following steps:

1. Instantiating the map and view objects

2. Create a Popuptemplate object that can be created anonymously or new

3. When creating Featurelayer, assign a value to the Popuptemplate property in the constructor.

4. Add Featurelayer in Map

over~!

ArcGIS API for JavaScript 4.2 Learning notes [+] layer's pop-up window (popuptemplate)