显示弹出窗口

了解如何使用弹出窗口显示要素图层属性。

要素图层是要素服务的数据集。要素图层的每个要素都具有相同的几何类型 (点、线或面) 和属性。当用户单击某个要素时，可以使用弹出窗口显示属性。弹出窗口支持显示原始属性值、计算值、图表或媒体等内容。

在本教程中，将使用 PopupTemplate 在三个不同的托管要素图层的弹出窗口中以不同方式显示要素属性。

步骤 ​

创建新 Pen ​

1. 在此之前，先了解显示地图教程 。

添加模块 ​

1. 通过 require 引入FeatureLayer 模块。

   更多内容

   GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。AMD require 函数使用引用来确定加载哪些模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载模块后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   js

   require([
       "geoscene/config",
       "geoscene/Map",
       "geoscene/views/MapView",
   
       "geoscene/layers/FeatureLayer"
   ],
   
   function(geosceneConfig, Map, MapView, FeatureLayer){
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

显示属性 ​

显示要素属性最简单的方法是利用弹出窗口的标题或内容区域显示字段名。使用 PopupTemplate 类可为 登山点 要素图层定义弹窗。

1. 创建 popupTrailheads 对象，content 属性值设置为自定义 HTML 字符串，HTML 字符串由步道名称和城市辖区等信息组成。

   js

       const view = new MapView({
           container: "viewDiv",
           map: map,
           center: [-118.80543,34.02700], //Longitude, latitude
           zoom: 13
       });
   
       // Define a pop-up for Trailheads
       const popupTrailheads = {
           "title": "Trailhead",
           "content": "<b>Trail:</b> {TRL_NAME}<br><b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   

2. 创建 trailheads FeatureLayer。在将 trailheads 添加到 map 之前，请设置 url、outFields 和 popupTemplate 属性。FeatureLayer 将自动转换 popupTemplate 以创建对象的类实例。

   outFields 属性用来设置允许访问客户端的属性字段。

   js

       // Define a pop-up for Trailheads
       const popupTrailheads = {
           "title": "Trailhead",
           "content": "<b>Trail:</b> {TRL_NAME}<br><b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
       }
   
       const trailheads = new FeatureLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0",
           outFields: ["TRL_NAME","CITY_JUR","X_STREET","PARKING","ELEV_FT"],
           popupTemplate: popupTrailheads
       });
   
       map.add(trailheads);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   

3. 单击徒步旅行者，显示弹出窗口。

显示图表 ​

也可以在弹出窗口中显示不同类型的图表 (也称为媒体内容)。通过定义图表类型和字段 (属性) 值来创建图表。接下来我们使用 PopupTemplate 类来定义柱状图，显示 徒步路线 要素图层的最小和最大高程值。

1. 创建 popupTrails 对象。在 content 属性中，type 设置为 media，定义显示路线最小、最大高程值的 column-chart柱状图。

   js

       map.add(trailheads);
   
       // Define a popup for Trails
       const popupTrails = {
           title: "Trail Information",
           content: [{
               type: "media",
               mediaInfos: [{
                   type: "column-chart",
                   caption: "",
                   value: {
                       fields: [ "ELEV_MIN","ELEV_MAX" ],
                       normalizeField: null,
                       tooltipField: "Min and max elevation values"
                   }
               }]
           }]
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   

2. 创建 trails FeatureLayer，设置 url、outFields 和 popupTemplate 属性，将 trails 添加到 map。FeatureLayer 将自动转换 popupTemplate 以创建对象的类实例。

   js

       // Define a popup for Trails
       const popupTrails = {
           title: "Trail Information",
           content: [{
               type: "media",
               mediaInfos: [{
               type: "column-chart",
               caption: "",
               value: {
                   fields: [ "ELEV_MIN","ELEV_MAX" ],
                   normalizeField: null,
                   tooltipField: "Min and max elevation values"
                   }
               }]
           }]
       }
   
       const trails = new FeatureLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
           outFields: ["TRL_NAME","ELEV_GAIN"],
           popupTemplate: popupTrails
       });
   
       map.add(trails,0);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   

3. 单击线可查看包含高程数据柱状图的弹出窗口。

显示表格 ​

弹窗还支持以表格展示要素属性。接下来我们使用 PopupTemplate 和 fieldInfos 类在表中显示 公园和广场 要素图层的属性名称和值。

1. 创建 popupOpenspaces 对象。在 content 属性中，将 type 设置为 fields 并定义 fieldInfos 数组。

   js

       map.add(trails,0);
   
       // Define popup for Parks and Open Spaces
       const popupOpenspaces = {
           "title": "{PARK_NAME}",
           "content": [{
               "type": "fields",
               "fieldInfos": [
                   {
                       "fieldName": "AGNCY_NAME",
                       "label": "Agency",
                       "isEditable": true,
                       "tooltip": "",
                       "visible": true,
                       "format": null,
                       "stringFieldOption": "text-box"
                   },
                   {
                       "fieldName": "TYPE",
                       "label": "Type",
                       "isEditable": true,
                       "tooltip": "",
                       "visible": true,
                       "format": null,
                       "stringFieldOption": "text-box"
                   },
                   {
                       "fieldName": "ACCESS_TYP",
                       "label": "Access",
                       "isEditable": true,
                       "tooltip": "",
                       "visible": true,
                       "format": null,
                       "stringFieldOption": "text-box"
                   },
                   {
                       "fieldName": "GIS_ACRES",
                       "label": "Acres",
                       "isEditable": true,
                       "tooltip": "",
                       "visible": true,
                       "format": {
                           "places": 2,
                           "digitSeparator": true
                       },
   
                       "stringFieldOption": "text-box"
                   }
               ]
           }]
       }

   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
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   

2. 创建 openspaces FeatureLayer，设置 url、outFields 和 popupTemplate 属性，最后将 openspaces 添加到 map。FeatureLayer 将自动转换 popupTemplate 以创建对象的类实例。

   js

                       "stringFieldOption": "text-box"
                   }
               ]
           }]
       }
   
       const openspaces = new FeatureLayer({
           url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0",
           outFields: ["TYPE","PARK_NAME", "AGNCY_NAME","ACCESS_TYP","GIS_ACRES","TRLS_MI","TOTAL_GOOD","TOTAL_FAIR", "TOTAL_POOR"],
           popupTemplate: popupOpenspaces
       });
   
       map.add(openspaces,0);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   

运行应用程序 ​

在 CodePen 中，运行代码以显示地图。

单击地图中的每类要素都可查看对应弹出窗口，每个弹出窗口将以独特的方式显示要素属性。

下一步是什么？ ​

要了解如何使用其他API 功能，请参阅以下教程：

• 样式化要素图层

• 添加要素图层

• 显示 web 地图