[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式
Posted wangmengdx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式相关的知识，希望对你有一定的参考价值。
【官方文档：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.代码骨架
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- 移动端优化 --> 6 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 7 <title>Intro to PopupTemplate</title> 8 9 <!-- JS API的引入 --> 10 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 11 <script src="https://js.arcgis.com/4.8/"></script> 12 13 <!-- 设置style以正确显示地图 --> 14 <style> 15 html,body,#viewDiv{ 16 padding:0; 17 margin:0; 18 height:100%; 19 width:100%; 20 } 21 </style> 22 23 <script> 24 25 </script> 26 </head> 27 28 <body> 29 <div id="viewDiv"></div> 30 </body> 31 </html>
其中，包括JS API的引入、style样式的设置等等。
2.基础语句
1 <script> 2 require([ 3 "esri/Map", 4 "esri/views/MapView", 5 "esri/layers/FeatureLayer", //以展示FeatureLayer的popup为例 6 "dojo/domReady!" 7 ],function(Map,MapView,FeatureLayer){ 8 //创建Map（实例化） 9 var map=new Map({ 10 basemap:"gray", 11 }); 12 13 //创建MapView（实例化） 14 var view=new MapView({ 15 container:"viewDiv", 16 map:map, 17 center:[-73.950,40.702], 18 zoom:11 19 }); 20 21 //创建FeatureLayer（实例化） 22 var featureLayer=new FeatureLayer({ 23 url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0", 24 outFields:["*"] 25 }); 26 27 //将新创建的FeatureLayer添加到map中 28 map.layers.add(featureLayer); 29 }); 30</script>
上面语句创建了地图(Map)与和视图(MapView)，并将地图绑定到了视图中。创建了一个FeatureLayer(要素图层)并添加到了Map实例中。关于Map和MapView的概念，请查看：https://www.cnblogs.com/wangmengdx/p/9385033.html。
此时出现了底图和featureLayer，但是点击这个图层上的面状要素，并不会弹出popup。
3.编写popupTemplate模板标题
1 var template={ //autocasts as new popupTemplate()（一个概念） 2//{ZIP}指向当前图层要素的ZIP属性字段值 3 title:"Marriage in NY,Zip Code:{ZIP}" 4 }; 5 6//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，展示相关的内容。
4.编写popupTemplate模板主体内容
1 var template={ //autocasts as new popupTemplate()（一个概念） 2//{ZIP}指向当前图层要素的ZIP属性字段值 3 title:"Marriage in NY,Zip Code:{ZIP}", 4 content:[{ 5 type:"fields", 6 fieldInfos:[{ 7 fieldName:"MARRIEDRATE", 8 label:"Married %", 9 visible:true 10 },{ 11 fieldName:"MARRIED_CY", 12 label:"People Married", 13 visible:true 14 },{ 15 fieldName:"NEVMARR_CY", 16 label:"People that Never Married", 17 visible:true 18 },{ 19 fieldName:"DIVORCD_CY", 20 label:"People Divorced", 21 visible:true 22 }] 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中显示。
这样的写法很容易看错，要注意层次关系和大括号的匹配。层次关系如下：
1 content:[ //content开始 2 3 {//obj1(fields) 4 type:"fields", 5 fieldInfos:[{ 6 //field1 7 //some codes 8 },{ 9 //field2 10 //some codes 11 }] 12 }, 13 14 {//obj2(text) 15 type:"text", 16 text:"" 17 }, 18 19 {//obj3(media) 20 type:"media", 21 mediaInfos:[{ 22 //media1 pie-chart 23 //some codes 24 },{ 25 //media2 image 26 //some codes 27 }] 28 }, 29 30 {//obj4(attachment) 31 type:"attachment"32 // some codes35 } 36 37 ] //content结束
上面要展示的4个内容(obj1、obj2、obj3、obj4)对应着fields、text、media(图表或图片)、attachment这4种展示信息的形式，在后文中会讲到。
5.格式化显示数字数据
可以设置千分位符（当数字大于1000，显示小数点，不确定当数字大于1000000是否会显示两个小数点）、小数点位以达到更好的显示效果。
1 format:{ 2 digitSeparator:true, //设置千分位符 3 places:0 //小数点保留0位（四舍五入到整数） 4 }
format是fieldInfos中的一个属性，写在fieldInfos中。
6.将自定义的template赋给featureLayer的popupTemplate属性
（因为前面要演示popup的效果，已经进行了赋值）。将自定义的template(popup模板)赋值给图层的popupTemplate属性，就可以用自己定义的popup形式展示所点击要素的属性内容。
有两种方法可以实现。一是在featureLayer的构造函数中设置popupTemplate属性，即在创建featureLayer时将之前已经写好代码的template赋给popupTemplate；二是调用代码将template赋值给图层的popupTemplate属性，这适用于在创建图层时还没有写好template的情况。
方法一：
1 var featureLayer=new FeatureLayer({ 2 url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0", 3 popupTemplate:template, 4 outFields:["*"] 5 });
方法二：
1 featureLayer.popupTemplate=template;
7.最终代码及运行效果
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- 移动端优化 --> 6 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 7 <title>Intro to PopupTemplate</title> 8 9 <!-- JS API的引入 --> 10 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 11 <script src="https://js.arcgis.com/4.8/"></script> 12 13 <!-- 设置style以正确显示地图 --> 14 <style> 15 html,body,#viewDiv{ 16 padding:0; 17 margin:0; 18 height:100%; 19 width:100%; 20 } 21 </style> 22 23 <script> 24 require([ 25 "esri/Map", 26 "esri/views/MapView", 27 "esri/layers/FeatureLayer", //以展示FeatureLayer的popup为例 28 "dojo/domReady!" 29 ],function(Map,MapView,FeatureLayer){ 30 //创建Map（实例化） 31 var map=new Map({ 32 basemap:"gray", 33 }); 34 35 //创建MapView（实例化） 36 var view=new MapView({ 37 container:"viewDiv", 38 map:map, 39 center:[-73.950,40.702], 40 zoom:11 41 }); 42 43 //创建FeatureLayer（实例化） 44 var featureLayer=new FeatureLayer({ 45 url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0", 46 outFields:["*"] 47 }); 48 49 //将新创建的FeatureLayer添加到map中 50 map.layers.add(featureLayer); 51 52 var template={ //autocasts as new popupTemplate()（一个概念） 53 //{ZIP}指向当前图层要素的ZIP属性字段值 54 title:"Marriage in NY,Zip Code:{ZIP}", 55 content:[{ 56 type:"fields", 57 fieldInfos:[{ 58 fieldName:"MARRIEDRATE", 59 label:"Married %", 60 visible:true 61 },{ 62 fieldName:"MARRIED_CY", 63 label:"People Married", 64 visible:true, 65 format:{ 66 digitSeparator:true, //设置千分位符 67 places:0 //小数点保留0位（四舍五入到整数） 68 } 69 },{ 70 fieldName:"NEVMARR_CY", 71 label:"People that Never Married", 72 visible:true, 73 format:{ 74 digitSeparator:true, 75 places:0 76 } 77 },{ 78 fieldName:"DIVORCD_CY", 79 label:"People Divorced", 80 visible:true, 81 无法从 ArcGIS API for Python 检索 ArcGIS 角色arcgis api for javascript怎么加载天地图的影像图
arcgis api for javascript中怎么获取当前地图的大小
ArcGIS API For Android Errors汇总