显示弹出窗口
了解如何利用弹出窗口显示要素属性。
要素图层是托管要素服务中的数据集。每个要素图层包含具有单一几何类型和属性组的要素。当用户单击要素时，弹出窗口可显示所选要素属性。可将弹出窗口配置为以不同方式 (包括图表或媒体) 显示原始属性值、计算值或内容。
在本教程中，将使用 PopupTemplate 在三个不同的托管要素图层的弹出窗口中以不同方式显示要素属性。
步骤
创建新 Pen
添加模块
在
require语句中，添加FeatureLayer模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Add line. Change line 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151<html> <head> <meta name="description" content="DevLab: Configure a popup"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 显示弹出窗口 (JSAPI)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> </head> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, FeatureLayer){ const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.02700], //Longitude, latitude zoom: 13 }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
显示属性
显示要素属性的最简单方法是利用弹出窗口的标题或内容区域显示字段名和值。使用 PopupTemplate 类可为 Trailheads 要素图层定义具有属性的内容。
创建
popupTrailheads并将content属性设置为自定义 HTML 字符串，以显示诸如步道名称和城市辖区等信息。Add line. Add line. Add line. Add line. Add line. 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151<html> <head> <meta name="description" content="DevLab: Configure a popup"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 显示弹出窗口 (JSAPI)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> </head> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, FeatureLayer){ const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.02700], //经度、纬度 zoom: 13 }); // 为 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" } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建
trailheadsFeatureLayer。在将trailheads添加到map之前，请设置url、outFields和popupTemplate属性。FeatureLayer将自动转换popupTemplate以创建对象的类实例。outFields属性允许在客户端访问属性数据。Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151<html> <head> <meta name="description" content="DevLab: Configure a popup"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 显示弹出窗口 (JSAPI)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> </head> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, FeatureLayer){ const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ container: "viewDiv", map: map, center: [-118.80543,34.02700], //Longitude, latitude zoom: 13 }); // 定义 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);
}); </script> </head> <body> <div id="viewDiv"></div> </body> </html>单击徒步旅行者图标以显示弹出窗口。
显示图表
您可在弹出窗口中显示不同类型的图表 (也称为媒体内容)。图表可通过定义类型和字段 (属性) 值来创建。使用 PopupTemplate 类定义条形图，以显示 Trails 要素图层的最小和最大高程值。
创建
popupTrails。在content属性中，将type设置为media，以显示每条小道的最小和最大高程的column-chart。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151<html> <head> <meta name="description" content="DevLab: Configure a popup"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 显示弹出窗口 (JSAPI)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> </head> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, FeatureLayer){ const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); 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" } 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); // 定义 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" } }] }] } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建
trailsFeatureLayer。在将trails添加到map之前，请设置url、outFields和popupTemplate属性。FeatureLayer将自动转换popupTemplate以创建对象的类实例。Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151<html> <head> <meta name="description" content="DevLab: Configure a popup"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 显示弹出窗口 (JSAPI)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> </head> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, FeatureLayer){ const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); 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" } 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); // 定义 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); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>单击小道可查看包含高程数据条形图的弹出窗口。
显示表格
要素属性也可显示在表格中。使用 PopupTemplate 和 fieldInfos 类在表中显示 Parks and Open Spaces 要素图层的属性名称和值。将表与 fieldInfos 一起使用的优点之一是能够以不同方式设置字段的格式，例如，显示货币或小数位数。
创建
popupOpenspaces。在content属性中，将type设置为fields并定义fieldInfos数组。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151<html> <head> <meta name="description" content="DevLab: Configure a popup"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 显示弹出窗口 (JSAPI)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> </head> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, FeatureLayer){ const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); 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" } 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); // 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); // 为 Parks 和 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" } ] }] } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>创建
openspacesFeatureLayer。在将openspaces添加到map之前，请设置url、outFields和popupTemplate属性。FeatureLayer将自动转换popupTemplate以创建对象的类实例。Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151<html> <head> <meta name="description" content="DevLab: Configure a popup"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>GeoScene API for JavaScript Tutorials: 显示弹出窗口 (JSAPI)</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css"> <script src="https://js.geoscene.cn/4.23/"></script> </head> <script> require([ "geoscene/config", "geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer" ], function(geosceneConfig,Map, MapView, FeatureLayer){ const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); 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" } 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); // 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); // 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" } ] }] } 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); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
单击不同的公园区域以显示包含指定字段和值的表视图弹出窗口。您应能够单击地图中的所有要素并可查看弹出窗口。每个弹出窗口将以独特的方式显示要素属性。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：
解决方案
估计时间
15 分钟