【官方文档：https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html】
一、Intro to PopupTemplate(关于popup模板)
popups(弹出框)提供了一种简便的方式去查看layers(图层)或者graphics(图形)的属性信息。它也可以展示鼠标在view(视图)中的点击位置的坐标等其他相关信息。在ArcMap中，查看要素图层(shapefile)的属性需要打开attribute table(属性表)。在地图中选择想查看信息的要素，在属性表中会高亮显示那一行；或者，在表中找到关心的那一行，在地图中会高亮显示那一个要素。除了在属性表中可以看到要素的属性字段值，也可以打开标注，但这样只能在地图中展示一个字段的值。
ArcGIS Pro、ArcGIS Online、Portal中出现了popup的概念，点击地图中关心的要素（点、线或面），就会弹出一个弹出框，以表格、文本、图表、图片等形式展现所选择要素的属性信息。这个弹出框就是popup。
每一个view(视图)都有一个popup，但是这个popup所展现的内容和展现这些内容所采用的形式、格式是由每一个图层(layer)决定的。如果不对popup进行自定义的设置（不对popupTemplate进行设置），popup会以默认表格的形式展示当前图层要素的所有字段值。API提供了popupTemplate(popup模板)的概念，允许用户自定义popup，回答要展现哪些字段值、怎样展现这些值的问题。
1.代码骨架
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- 移动端优化 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to PopupTemplate</title> <!-- JS API的引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <!-- 设置style以正确显示地图 -->
<style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style> <script> </script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
其中，包括JS API的引入、style样式的设置等等。
2.基础语句
<script>
2 require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer", //以展示FeatureLayer的popup为例
"dojo/domReady!"
],function(Map,MapView,FeatureLayer){
//创建Map（实例化）
var map=new Map({
basemap:"gray",
}); //创建MapView（实例化）
var view=new MapView({
container:"viewDiv",
map:map,
center:[-73.950,40.702],
zoom:11
}); //创建FeatureLayer（实例化）
var featureLayer=new FeatureLayer({
url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
outFields:["*"]
}); //将新创建的FeatureLayer添加到map中
map.layers.add(featureLayer);
29 });
</script>
上面语句创建了地图(Map)与和视图(MapView)，并将地图绑定到了视图中。创建了一个FeatureLayer(要素图层)并添加到了Map实例中。关于Map和MapView的概念，请查看：https://www.cnblogs.com/wangmengdx/p/9385033.html。
此时出现了底图和featureLayer，但是点击这个图层上的面状要素，并不会弹出popup。
3.编写popupTemplate模板标题
var template={ //autocasts as new popupTemplate()（一个概念）
//{ZIP}指向当前图层要素的ZIP属性字段值
title:"Marriage in NY,Zip Code:{ZIP}"
4 };
//featureLayer的popup将使用自己设置的模板
7 featureLayer.popupTemplate=template;
创建了一个模板并对模板的标题进行了设置，显示所选择图层要素的ZIP字段值，这个标题就是popup弹出框的标题。使用{field}这种形式引用图层要素的某一个字段值。这里有一个JavaScript API中很重要的概念：autocast。这里创建了一个对象（变量）template，并没有按照var template=new PopupTemplate({ //some codes })这种形式，甚至在require()中都没有引入esri/PopupTemplate模块。但是上面的代码中却使用了popupTemplate实例的属性title。这种用法是可以的，也是经常会用到的，这就是autocast的概念。有关autocast的更多信息，请查看：https://developers.arcgis.com/javascript/latest/guide/autocasting/index.html。
只包括title标题的模板创建完成后，将它赋给featureLayer的popupTemplate属性。当点击featureLayer中的要素时，就会按照这个自定义模板的形式弹出popup，展示相关的内容。
![[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UZ3VZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhORE15TURnNEx6SXdNVGd3T0M4eE5ETXlNRGc0TFRJd01UZ3dPREE1TVRZek5qRXpPREl3TFRFeU5qVXhOakk1TmpBdWFuQm4uanBn.jpg?w=700&webp=1 "[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式")
4.编写popupTemplate模板主体内容
var template={ //autocasts as new popupTemplate()（一个概念）
//{ZIP}指向当前图层要素的ZIP属性字段值
title:"Marriage in NY,Zip Code:{ZIP}",
content:[{
type:"fields",
fieldInfos:[{
fieldName:"MARRIEDRATE",
label:"Married %",
visible:true
},{
fieldName:"MARRIED_CY",
label:"People Married",
visible:true
},{
fieldName:"NEVMARR_CY",
label:"People that Never Married",
visible:true
},{
fieldName:"DIVORCD_CY",
label:"People Divorced",
visible:true
}]
23 }]
24 };
content是popupTemplate的主体内容，它的值是一个对象数组，按照这种形式：content:[{obj 1},{obj 2},...,{obj n}]。即在popup中可以显示很多种内容（obj 1规定的、obj 2规定的内容等等）。上面代码只规定了一个obj1，它设置了字段值以表格的形式展示（还可以以文本、图表、图片等形式展示）。obj1中有两个属性，第一个是type（这里是"fields"），用于标识这段内容想展示什么样的数据；第二个是fieldInfos（根据type的不同而不同），设置要展示的字段值以及展示的格式。其中，fieldInfos的形式是这样的：fieldInfos:[{filed 1},{field 2},...,{field n}]，图层要素可能包含很多的字段值，但这里只展示关心感兴趣的值。field 1中包含的属性有fieldName，字段名字；label，该字段在popup中展示时所用的名字；visible，设置这个字段是否显示出来，如果是false，即使对这个字段值进行了设置，也不在popup中显示。
这样的写法很容易看错，要注意层次关系和大括号的匹配。层次关系如下：
content:[ //content开始
3 {//obj1(fields)
4 type:"fields",
fieldInfos:[{
//field1
//some codes
},{
//field2
//some codes
}]
12 },
14 {//obj2(text)
15 type:"text",
text:""
17 },
19 {//obj3(media)
20 type:"media",
mediaInfos:[{
//media1 pie-chart
//some codes
},{
//media2 image
//some codes
}]
28 },
30 {//obj4(attachment)
type:"attachment" // some codes35 }
37 ] //content结束
上面要展示的4个内容(obj1、obj2、obj3、obj4)对应着fields、text、media(图表或图片)、attachment这4种展示信息的形式，在后文中会讲到。
![[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UZ3VZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhORE15TURnNEx6SXdNVGd3T0M4eE5ETXlNRGc0TFRJd01UZ3dPREE1TVRjd016QTJOakkyTFRFMk9USXlOek0xTmpNdWFuQm4uanBn.jpg?w=700&webp=1 "[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式")
5.格式化显示数字数据
可以设置千分位符（当数字大于1000，显示小数点，不确定当数字大于1000000是否会显示两个小数点）、小数点位以达到更好的显示效果。
format:{
2 digitSeparator:true, //设置千分位符
places:0 //小数点保留0位（四舍五入到整数）
4 }
format是fieldInfos中的一个属性，写在fieldInfos中。
6.将自定义的template赋给featureLayer的popupTemplate属性
（因为前面要演示popup的效果，已经进行了赋值）。将自定义的template(popup模板)赋值给图层的popupTemplate属性，就可以用自己定义的popup形式展示所点击要素的属性内容。
有两种方法可以实现。一是在featureLayer的构造函数中设置popupTemplate属性，即在创建featureLayer时将之前已经写好代码的template赋给popupTemplate；二是调用代码将template赋值给图层的popupTemplate属性，这适用于在创建图层时还没有写好template的情况。
方法一：
var featureLayer=new FeatureLayer({
2 url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
popupTemplate:template,
outFields:["*"]
5 });
方法二：
featureLayer.popupTemplate=template;
7.最终代码及运行效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- 移动端优化 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to PopupTemplate</title> <!-- JS API的引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <!-- 设置style以正确显示地图 -->
<style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style> <script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer", //以展示FeatureLayer的popup为例
"dojo/domReady!"
],function(Map,MapView,FeatureLayer){
//创建Map（实例化）
var map=new Map({
basemap:"gray",
}); //创建MapView（实例化）
var view=new MapView({
container:"viewDiv",
map:map,
center:[-73.950,40.702],
zoom:11
}); //创建FeatureLayer（实例化）
var featureLayer=new FeatureLayer({
url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
outFields:["*"]
}); //将新创建的FeatureLayer添加到map中
map.layers.add(featureLayer); var template={ //autocasts as new popupTemplate()（一个概念）
//{ZIP}指向当前图层要素的ZIP属性字段值
title:"Marriage in NY,Zip Code:{ZIP}",
content:[{
type:"fields",
fieldInfos:[{
fieldName:"MARRIEDRATE",
label:"Married %",
visible:true
},{
fieldName:"MARRIED_CY",
label:"People Married",
visible:true,
format:{
digitSeparator:true, //设置千分位符
places:0 //小数点保留0位（四舍五入到整数）
}
},{
fieldName:"NEVMARR_CY",
label:"People that Never Married",
visible:true,
format:{
digitSeparator:true,
places:0
}
},{
fieldName:"DIVORCD_CY",
label:"People Divorced",
visible:true,
format:{
digitSeparator:true,
places:0
}
}]
}]
}; //featureLayer的popup将使用自己设置的模板
featureLayer.popupTemplate=template;
});
</script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
最终代码
![[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UZ3VZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhORE15TURnNEx6SXdNVGd3T0M4eE5ETXlNRGc0TFRJd01UZ3dPREE1TVRjeU5URTFOell6TFRFM01EUTNNRFUxTXpBdWFuQm4uanBn.jpg?w=700&webp=1 "[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式")
二、Multiple popup elements(popup中的多种元素)
除了以表格形式，在popup中还可以通过文本、图表、图片或其他与图层有关的附件（attachment）来表示图层要素的字段值。这些内容在popup弹出框中显示的顺序由在popupTemplate中编写的顺序决定。这个例子展示了在popup中显示属性字段表格、文本、图片以及由字段值生成的图表。
1.基本代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Mutiple popup elements</title> <!-- JS API的引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <!-- 设置style，以正确显示地图 -->
<style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style> <script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],function(Map,MapView,FeatureLayer){
//创建地图（实例化）
var map=new Map({
basemap:"hybrid"
}); //创建视图（实例化）
var view=new MapView({
container:"viewDiv",
map:map,
center:[-118.3994,34.0871],
zoom:17, //固定popup，取消浮动
popup:{
dockEnabled:true, //将popup固定住
dockOptions:{
buttonEnabld:false, //将切换固定状态的那个按钮隐藏掉
breakpoint:false //不明白什么作用，但是如果是true或去掉不写，popup将不固定
}
}
}); var featureLayer=new FeatureLayer({
url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
outFields:["*"]
}); //将featureLayer添加到map中
map.layers.add(featureLayer);
});
</script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
因为这个例子中popup里面的内容比较多，为了更好的表现效果，将popup固定。popup是view的一个属性，在popup中，将dockEnabled设置为true，并将dockOptions属性下的两个属性buttonEnabled和breakpoint设置为false，即可固定popup。
当前运行结果显示底图和图层，但点击图层要素不会弹出popup。
![[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UZ3VZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhORE15TURnNEx6SXdNVGd3T0M4eE5ETXlNRGc0TFRJd01UZ3dPREE1TWpBME5UUXlPRGsxTFRFM016QTVPVGszTnk1cWNHYz0uanBn.jpg?w=700&webp=1 "[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式")
2.设置popupTemplate
var featureLayer=new FeatureLayer({
2 url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
outFields:["*"],
popupTemplate:{ //添加popupTemplate属性
5 }
6 });
在FeatureLayer的构造函数中添加popupTemplate属性，并用空括号给它赋值。属性虽然是空的，但是开启了图层要素的popup。现在再点击要素，会弹出一个空的popup。
![[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UZ3VZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhORE15TURnNEx6SXdNVGd3T0M4eE5ETXlNRGc0TFRJd01UZ3dPREE1TWpBMU1URXpORGMyTFRJeE1UUXdPVFEzTmpJdWFuQm4uanBn.jpg?w=700&webp=1 "[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式")
在popupTemplate属性中编写自定义的popup样式，这是直接在构造featureLayer时完成的，即在其构造函数中完成。而上一个例子是在FeatureLayer的构造函数外定义了一个模板，再赋值给featureLayer的popupTemplate属性。两种方式都可以。
①编写popupTemplate标题
popupTemplate:{
//在popupTemplate中可以使用HTML标签，以达到更好的表现效果
title:"<font color='#008000'>Beverly Hillstrees by block",
content:[{
}]
6 }
在popupTemplate中出现字符串的地方，都可以使用HTML标签对字符进行符号化设置，以达到更好的效果。上面在title中为标题设置了'#008000'颜色（绿色）。popup中最主要的内容要写在content中。content中代码的层次关系和上一个例子一样。
②编写popupTemplate中的fields(字段值)
popupTemplate:{
//在popupTemplate中可以使用HTML标签，以达到更好的表现效果
title:"<font color='#008000'>Beverly Hillstrees by block",
content:[{
type:"fields",
fieldInfos:[{ //fieldInfos 开始
fieldName:"Point_Count",
label:"Count of Points",
visible:true,
format:{
digitSeparator:true,
places:0
}
},{
fieldName:"relationships/0/Point_Count_COMMON",
label:"Sum of species tree count",
statisticType:"sum", //需要有这一句，不然结果是空（原因未知）
visible:true,
format:{
digitSeparator:true,
places:0
}
},{
fieldName:"relationships/0/COMMON",
label:"Common Name",
visible:true
},{
fieldName:"BLOCKCE10",
label:"Block",
visible:true
}] //fieldInfos 结束
32 }]
33 }
fieldName是要表现的图层要素的属性字段名称（存储在数据中的名称），label是在popup中显示的字段名称，visible设置该字段是否在popup中显示，format设置一些显示格式。
![[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UZ3VZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhORE15TURnNEx6SXdNVGd3T0M4eE5ETXlNRGc0TFRJd01UZ3dPREE1TWpFd09URXhOVFUwTFRNMk56ZzRNalU0Tmk1cWNHYz0uanBn.jpg?w=700&webp=1 "[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式")
③编写popupTemplate中的text(文本值)
popupTemplate:{
//在popupTemplate中可以使用HTML标签，以达到更好的表现效果
3 title:"<font color='#008000'>Beverly Hillstrees by block",
4 content:[{
type:"fields",
fieldInfos:[{
fieldName:"Point_Count",
label:"Count of Points",
visible:true,
format:{
digitSeparator:true,
places:0
}
},{
fieldName:"relationships/0/Point_Count_COMMON",
label:"Sum of species tree count",
statisticType:"sum", //需要有这一句，不然结果是空（原因未知）
visible:true,
format:{
digitSeparator:true,
places:0
}
},{
fieldName:"relationships/0/COMMON",
label:"Common Name",
visible:true
},{
fieldName:"BLOCKCE10",
label:"Block",
visible:true
}]
32 },{
type:"text",
text:"There are <strong>{Point_Count}</strong> trees within census block {BLOCKCE10}"
}]
36 }
![[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UZ3VZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhORE15TURnNEx6SXdNVGd3T0M4eE5ETXlNRGc0TFRJd01UZ3dPREE1TWpJeE9UUTVNREkwTFRFM01qYzRPRGc0TVRrdWFuQm4uanBn.jpg?w=700&webp=1 "[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式")
④编写popupTemplate中media(图表、图片)
popupTemplate:{
//在popupTemplate中可以使用HTML标签，以达到更好的表现效果
title:"<font color='#008000'>Beverly Hillstrees by block",
content:[{
type:"fields",
fieldInfos:[{
fieldName:"Point_Count",
label:"Count of Points",
visible:true,
format:{
digitSeparator:true,
places:0
}
},{
fieldName:"relationships/0/Point_Count_COMMON",
label:"Sum of species tree count",
statisticType:"sum", //需要有这一句，不然结果是空（原因未知）
visible:true,
format:{
digitSeparator:true,
places:0
}
},{
fieldName:"relationships/0/COMMON",
label:"Common Name",
visible:true
},{
fieldName:"BLOCKCE10",
label:"Block",
visible:true
}]
},{
type:"text",
text:"There are <strong>{Point_Count}</strong> trees within census block {BLOCKCE10}"
35 },{
type:"media",
mediaInfos:[{
title:"Count by type", //media内容下的标题
type:"pie-chart", //饼图
caption:"one pie-chart", //图表的标题
value:{
theme:"Grasshopper", //图表的主题样式
//一系列设置饼图的参数，涉及到related table的知识
fields:["relationships/0/Point_Count_COMMON"],
normalizeField:null,
tooltipField:"relationships/0/COMMON"
}
48 },{
title:"Welcome to Beverly Hills",
type:"image", //图片
value:{
sourceURL:"https://www.beverlyhills.org/cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg" //图片URL
}
}]
55 }]
56 }
对于每一个内容来说（字段表格、文本、图表、图片）都可以有一个标题。除了这几种类型外，popup中还可以添加一种attachment类型的内容。官方文档中未给出相应例子。
3.最终代码及运行效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Mutiple popup elements</title> <!-- JS API的引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <!-- 设置style，以正确显示地图 -->
<style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style> <script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],function(Map,MapView,FeatureLayer){
//创建地图（实例化）
var map=new Map({
basemap:"hybrid"
}); //创建视图（实例化）
var view=new MapView({
container:"viewDiv",
map:map,
center:[-118.3994,34.0871],
zoom:17, //固定popup，取消浮动
popup:{
dockEnabled:true, //将popup固定住
dockOptions:{
buttonEnabld:false, //将切换固定状态的那个按钮隐藏掉
breakpoint:false //不明白什么作用，但是如果是true或去掉不写，popup将不固定
}
}
}); var featureLayer=new FeatureLayer({
url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
outFields:["*"],
popupTemplate:{
//在popupTemplate中可以使用HTML标签，以达到更好的表现效果
title:"<font color='#008000'>Beverly Hillstrees by block",
content:[{
type:"fields",
fieldInfos:[{
fieldName:"Point_Count",
label:"Count of Points",
visible:true,
format:{
digitSeparator:true,
places:0
}
},{
fieldName:"relationships/0/Point_Count_COMMON",
label:"Sum of species tree count",
statisticType:"sum", //需要有这一句，不然结果是空（原因未知）
visible:true,
format:{
digitSeparator:true,
places:0
}
},{
fieldName:"relationships/0/COMMON",
label:"Common Name",
visible:true
},{
fieldName:"BLOCKCE10",
label:"Block",
visible:true
}]
},{
type:"text",
text:"There are <strong>{Point_Count}</strong> trees within census block {BLOCKCE10}"
},{
type:"media",
mediaInfos:[{
title:"Count by type", //media内容下的标题
type:"pie-chart", //饼图
caption:"one pie-chart", //图表的标题
value:{
theme:"Grasshopper", //图表的主题样式
//一系列设置饼图的参数，涉及到related table的知识
fields:["relationships/0/Point_Count_COMMON"],
normalizeField:null,
tooltipField:"relationships/0/COMMON"
}
},{
title:"Welcome to Beverly Hills",
type:"image", //图片
value:{
sourceURL:"https://www.beverlyhills.org/cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg" //图片URL
}
}]
}]
}
}); //将featureLayer添加到map中
map.layers.add(featureLayer);
});
</script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
最终代码
![[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UZ3VZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhORE15TURnNEx6SXdNVGd3T0M4eE5ETXlNRGc0TFRJd01UZ3dPREE1TWpJME1UUXpPRFUwTFRneU5qSTVNekEwTnk1cWNHYz0uanBn.jpg?w=700&webp=1 "[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式")
![[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UZ3VZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhORE15TURnNEx6SXdNVGd3T0M4eE5ETXlNRGc0TFRJd01UZ3dPREE1TWpJME1qQXdPVFUyTFRFMU16WTVOekV4TnpZdWFuQm4uanBn.jpg?w=700&webp=1 "[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式")