PopupTemplate 简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
require(["geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer"], (
  Map,
  MapView,
  FeatureLayer
) => {
  // Create a FeatureLayer
  const featureLayer = new FeatureLayer({
    url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2"
  });

  // Create the Map and add the featureLayer defined above
  const map = new Map({
    basemap: "gray-vector",
    layers: [featureLayer]
  });

  // Create the MapView
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-73.95, 40.702],
    zoom: 10
  });
});

1
2
3
4
const template = {
  // NAME and COUNTY are fields in the service containing the Census Tract (NAME) and county of the feature
  title: "{NAME} in {COUNTY}",
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const template = {
  // autocasts as new PopupTemplate()
  title: "{NAME} in {COUNTY}",
  content: [
    {
      type: "fields",
      fieldInfos: [
        {
          fieldName: "B12001_calc_pctMarriedE",
          label: "Married %"
        },
        {
          fieldName: "B12001_calc_numMarriedE",
          label: "People Married"
        },
        {
          fieldName: "B12001_calc_numNeverE",
          label: "People that Never Married"
        },
        {
          fieldName: "B12001_calc_numDivorcedE",
          label: "People Divorced"
        }
      ]
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const template = {
  // autocasts as new PopupTemplate()
  title: "{NAME} in {COUNTY}",
  content: [
    {
      type: "fields",
      fieldInfos: [
        {
          fieldName: "B12001_calc_pctMarriedE", // The field whose values you want to format
          label: "Married %"
        },
        {
          fieldName: "B12001_calc_numMarriedE", // The field whose values you want to format
          label: "People Married"
          format: {
            digitSeparator: true, // Uses a comma separator in numbers >999
            places: 0 // Sets the number of decimal places to 0 and rounds up
          }
        },
        {
          fieldName: "B12001_calc_numNeverE", // The field whose values you want to format
          label: "People that Never Married"
          format: {
            digitSeparator: true, // Uses a comma separator in numbers >999
            places: 0 // Sets the number of decimal places to 0 and rounds up
          }
        },
        {
          fieldName: "B12001_calc_numDivorcedE", // The field whose values you want to format
          label: "People Divorced"
          format: {
            digitSeparator: true, // Uses a comma separator in numbers >999
            places: 0 // Sets the number of decimal places to 0 and rounds up
          }
        }
      ]
    }
  ]
};

1
featureLayer.popupTemplate = template;