【官方文档: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. 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. 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. 4 };
  5.  
  6. //featureLayer的popup将使用自己设置的模板
  7. 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. 23 }]
  24. 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. 3 {//obj1(fields)
  4. 4 type:"fields",
  5. fieldInfos:[{
  6. //field1
  7. //some codes
  8. },{
  9. //field2
  10. //some codes
  11. }]
  12. 12 },
  13.  
  14. 14 {//obj2(text)
  15. 15 type:"text",
  16. text:""
  17. 17 },
  18.  
  19. 19 {//obj3(media)
  20. 20 type:"media",
  21. mediaInfos:[{
  22. //media1 pie-chart
  23. //some codes
  24. },{
  25. //media2 image
  26. //some codes
  27. }]
  28. 28 },
  29.  
  30. 30 {//obj4(attachment)
  31. type:"attachment" // some codes35 }
  32.  
  33. 37 ] //content结束

上面要展示的4个内容(obj1、obj2、obj3、obj4)对应着fields、text、media(图表或图片)、attachment这4种展示信息的形式,在后文中会讲到。

5.格式化显示数字数据

可以设置千分位符(当数字大于1000,显示小数点,不确定当数字大于1000000是否会显示两个小数点)、小数点位以达到更好的显示效果。

  1. format:{
  2. 2 digitSeparator:true, //设置千分位符
  3. places:0 //小数点保留0位(四舍五入到整数)
  4. 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. 2 url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
  3. popupTemplate:template,
  4. outFields:["*"]
  5. 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. format:{
  82. digitSeparator:true,
  83. places:0
  84. }
  85. }]
  86. }]
  87. };
  88.  
  89. //featureLayer的popup将使用自己设置的模板
  90. featureLayer.popupTemplate=template;
  91. });
  92. </script>
  93. </head>
  94.  
  95. <body>
  96. <div id="viewDiv"></div>
  97. </body>
  98. </html>

最终代码

二、Multiple popup elements(popup中的多种元素)

除了以表格形式,在popup中还可以通过文本、图表、图片或其他与图层有关的附件(attachment)来表示图层要素的字段值。这些内容在popup弹出框中显示的顺序由在popupTemplate中编写的顺序决定。这个例子展示了在popup中显示属性字段表格、文本、图片以及由字段值生成的图表。

1.基本代码

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  6. <title>Mutiple popup elements</title>
  7.  
  8. <!-- JS API的引入 -->
  9. <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
  10. <script src="https://js.arcgis.com/4.8/"></script>
  11.  
  12. <!-- 设置style,以正确显示地图 -->
  13. <style>
  14. html,body,#viewDiv{
  15. padding:0;
  16. margin:0;
  17. height:100%;
  18. width:100%;
  19. }
  20. </style>
  21.  
  22. <script>
  23. require([
  24. "esri/Map",
  25. "esri/views/MapView",
  26. "esri/layers/FeatureLayer",
  27. "dojo/domReady!"
  28. ],function(Map,MapView,FeatureLayer){
  29. //创建地图(实例化)
  30. var map=new Map({
  31. basemap:"hybrid"
  32. });
  33.  
  34. //创建视图(实例化)
  35. var view=new MapView({
  36. container:"viewDiv",
  37. map:map,
  38. center:[-118.3994,34.0871],
  39. zoom:17,
  40.  
  41. //固定popup,取消浮动
  42. popup:{
  43. dockEnabled:true, //将popup固定住
  44. dockOptions:{
  45. buttonEnabld:false, //将切换固定状态的那个按钮隐藏掉
  46. breakpoint:false //不明白什么作用,但是如果是true或去掉不写,popup将不固定
  47. }
  48. }
  49. });
  50.  
  51. var featureLayer=new FeatureLayer({
  52. url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
  53. outFields:["*"]
  54. });
  55.  
  56. //将featureLayer添加到map中
  57. map.layers.add(featureLayer);
  58. });
  59. </script>
  60. </head>
  61.  
  62. <body>
  63. <div id="viewDiv"></div>
  64. </body>
  65. </html>

因为这个例子中popup里面的内容比较多,为了更好的表现效果,将popup固定。popup是view的一个属性,在popup中,将dockEnabled设置为true,并将dockOptions属性下的两个属性buttonEnabled和breakpoint设置为false,即可固定popup。

当前运行结果显示底图和图层,但点击图层要素不会弹出popup。

2.设置popupTemplate

  1. var featureLayer=new FeatureLayer({
  2. 2 url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
  3. outFields:["*"],
  4. popupTemplate:{ //添加popupTemplate属性
  5. 5 }
  6. 6 });

在FeatureLayer的构造函数中添加popupTemplate属性,并用空括号给它赋值。属性虽然是空的,但是开启了图层要素的popup。现在再点击要素,会弹出一个空的popup。

在popupTemplate属性中编写自定义的popup样式,这是直接在构造featureLayer时完成的,即在其构造函数中完成。而上一个例子是在FeatureLayer的构造函数外定义了一个模板,再赋值给featureLayer的popupTemplate属性。两种方式都可以。

①编写popupTemplate标题

  1. popupTemplate:{
  2. //在popupTemplate中可以使用HTML标签,以达到更好的表现效果
  3. title:"<font color='#008000'>Beverly Hillstrees by block",
  4. content:[{
  5. }]
  6. 6 }

在popupTemplate中出现字符串的地方,都可以使用HTML标签对字符进行符号化设置,以达到更好的效果。上面在title中为标题设置了'#008000'颜色(绿色)。popup中最主要的内容要写在content中。content中代码的层次关系和上一个例子一样。

②编写popupTemplate中的fields(字段值)

  1. popupTemplate:{
  2. //在popupTemplate中可以使用HTML标签,以达到更好的表现效果
  3. title:"<font color='#008000'>Beverly Hillstrees by block",
  4. content:[{
  5. type:"fields",
  6. fieldInfos:[{ //fieldInfos 开始
  7. fieldName:"Point_Count",
  8. label:"Count of Points",
  9. visible:true,
  10. format:{
  11. digitSeparator:true,
  12. places:0
  13. }
  14. },{
  15. fieldName:"relationships/0/Point_Count_COMMON",
  16. label:"Sum of species tree count",
  17. statisticType:"sum", //需要有这一句,不然结果是空(原因未知)
  18. visible:true,
  19. format:{
  20. digitSeparator:true,
  21. places:0
  22. }
  23. },{
  24. fieldName:"relationships/0/COMMON",
  25. label:"Common Name",
  26. visible:true
  27. },{
  28. fieldName:"BLOCKCE10",
  29. label:"Block",
  30. visible:true
  31. }] //fieldInfos 结束
  32. 32 }]
  33. 33 }

fieldName是要表现的图层要素的属性字段名称(存储在数据中的名称),label是在popup中显示的字段名称,visible设置该字段是否在popup中显示,format设置一些显示格式。

③编写popupTemplate中的text(文本值)

  1. popupTemplate:{
  2. //在popupTemplate中可以使用HTML标签,以达到更好的表现效果
  3. 3 title:"<font color='#008000'>Beverly Hillstrees by block",
  4. 4 content:[{
  5. type:"fields",
  6. fieldInfos:[{
  7. fieldName:"Point_Count",
  8. label:"Count of Points",
  9. visible:true,
  10. format:{
  11. digitSeparator:true,
  12. places:0
  13. }
  14. },{
  15. fieldName:"relationships/0/Point_Count_COMMON",
  16. label:"Sum of species tree count",
  17. statisticType:"sum", //需要有这一句,不然结果是空(原因未知)
  18. visible:true,
  19. format:{
  20. digitSeparator:true,
  21. places:0
  22. }
  23. },{
  24. fieldName:"relationships/0/COMMON",
  25. label:"Common Name",
  26. visible:true
  27. },{
  28. fieldName:"BLOCKCE10",
  29. label:"Block",
  30. visible:true
  31. }]
  32. 32 },{
  33. type:"text",
  34. text:"There are <strong>{Point_Count}</strong> trees within census block {BLOCKCE10}"
  35. }]
  36. 36 }

④编写popupTemplate中media(图表、图片)

  1. popupTemplate:{
  2. //在popupTemplate中可以使用HTML标签,以达到更好的表现效果
  3. title:"<font color='#008000'>Beverly Hillstrees by block",
  4. content:[{
  5. type:"fields",
  6. fieldInfos:[{
  7. fieldName:"Point_Count",
  8. label:"Count of Points",
  9. visible:true,
  10. format:{
  11. digitSeparator:true,
  12. places:0
  13. }
  14. },{
  15. fieldName:"relationships/0/Point_Count_COMMON",
  16. label:"Sum of species tree count",
  17. statisticType:"sum", //需要有这一句,不然结果是空(原因未知)
  18. visible:true,
  19. format:{
  20. digitSeparator:true,
  21. places:0
  22. }
  23. },{
  24. fieldName:"relationships/0/COMMON",
  25. label:"Common Name",
  26. visible:true
  27. },{
  28. fieldName:"BLOCKCE10",
  29. label:"Block",
  30. visible:true
  31. }]
  32. },{
  33. type:"text",
  34. text:"There are <strong>{Point_Count}</strong> trees within census block {BLOCKCE10}"
  35. 35 },{
  36. type:"media",
  37. mediaInfos:[{
  38. title:"Count by type", //media内容下的标题
  39. type:"pie-chart", //饼图
  40. caption:"one pie-chart", //图表的标题
  41. value:{
  42. theme:"Grasshopper", //图表的主题样式
  43. //一系列设置饼图的参数,涉及到related table的知识
  44. fields:["relationships/0/Point_Count_COMMON"],
  45. normalizeField:null,
  46. tooltipField:"relationships/0/COMMON"
  47. }
  48. 48 },{
  49. title:"Welcome to Beverly Hills",
  50. type:"image", //图片
  51. value:{
  52. sourceURL:"https://www.beverlyhills.org/cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg" //图片URL
  53. }
  54. }]
  55. 55 }]
  56. 56 }

对于每一个内容来说(字段表格、文本、图表、图片)都可以有一个标题。除了这几种类型外,popup中还可以添加一种attachment类型的内容。官方文档中未给出相应例子。

 3.最终代码及运行效果

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  6. <title>Mutiple popup elements</title>
  7.  
  8. <!-- JS API的引入 -->
  9. <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
  10. <script src="https://js.arcgis.com/4.8/"></script>
  11.  
  12. <!-- 设置style,以正确显示地图 -->
  13. <style>
  14. html,body,#viewDiv{
  15. padding:0;
  16. margin:0;
  17. height:100%;
  18. width:100%;
  19. }
  20. </style>
  21.  
  22. <script>
  23. require([
  24. "esri/Map",
  25. "esri/views/MapView",
  26. "esri/layers/FeatureLayer",
  27. "dojo/domReady!"
  28. ],function(Map,MapView,FeatureLayer){
  29. //创建地图(实例化)
  30. var map=new Map({
  31. basemap:"hybrid"
  32. });
  33.  
  34. //创建视图(实例化)
  35. var view=new MapView({
  36. container:"viewDiv",
  37. map:map,
  38. center:[-118.3994,34.0871],
  39. zoom:17,
  40.  
  41. //固定popup,取消浮动
  42. popup:{
  43. dockEnabled:true, //将popup固定住
  44. dockOptions:{
  45. buttonEnabld:false, //将切换固定状态的那个按钮隐藏掉
  46. breakpoint:false //不明白什么作用,但是如果是true或去掉不写,popup将不固定
  47. }
  48. }
  49. });
  50.  
  51. var featureLayer=new FeatureLayer({
  52. url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
  53. outFields:["*"],
  54. popupTemplate:{
  55. //在popupTemplate中可以使用HTML标签,以达到更好的表现效果
  56. title:"<font color='#008000'>Beverly Hillstrees by block",
  57. content:[{
  58. type:"fields",
  59. fieldInfos:[{
  60. fieldName:"Point_Count",
  61. label:"Count of Points",
  62. visible:true,
  63. format:{
  64. digitSeparator:true,
  65. places:0
  66. }
  67. },{
  68. fieldName:"relationships/0/Point_Count_COMMON",
  69. label:"Sum of species tree count",
  70. statisticType:"sum", //需要有这一句,不然结果是空(原因未知)
  71. visible:true,
  72. format:{
  73. digitSeparator:true,
  74. places:0
  75. }
  76. },{
  77. fieldName:"relationships/0/COMMON",
  78. label:"Common Name",
  79. visible:true
  80. },{
  81. fieldName:"BLOCKCE10",
  82. label:"Block",
  83. visible:true
  84. }]
  85. },{
  86. type:"text",
  87. text:"There are <strong>{Point_Count}</strong> trees within census block {BLOCKCE10}"
  88. },{
  89. type:"media",
  90. mediaInfos:[{
  91. title:"Count by type", //media内容下的标题
  92. type:"pie-chart", //饼图
  93. caption:"one pie-chart", //图表的标题
  94. value:{
  95. theme:"Grasshopper", //图表的主题样式
  96. //一系列设置饼图的参数,涉及到related table的知识
  97. fields:["relationships/0/Point_Count_COMMON"],
  98. normalizeField:null,
  99. tooltipField:"relationships/0/COMMON"
  100. }
  101. },{
  102. title:"Welcome to Beverly Hills",
  103. type:"image", //图片
  104. value:{
  105. sourceURL:"https://www.beverlyhills.org/cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg" //图片URL
  106. }
  107. }]
  108. }]
  109. }
  110. });
  111.  
  112. //将featureLayer添加到map中
  113. map.layers.add(featureLayer);
  114. });
  115. </script>
  116. </head>
  117.  
  118. <body>
  119. <div id="viewDiv"></div>
  120. </body>
  121. </html>

最终代码

[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式的更多相关文章

  1. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/index.html]  一.Intro to MapView(2D ...

  2. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html] 一.Intro ...

  3. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-popups简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popup/index.html] 一.Intro to ...

  4. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-layers简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-layers/index.html] 一.Intro t ...

  5. ArcGIS API for JavaScript开发初探——HelloMap

    1.前言 在开始ArcGIS API for JavaScript开发之前我们需要了解一些基本的知识: 1.开发工具选什么? 前端技术的开发工具选择是一个仁者见仁智者见智的问题,有人喜欢Hbuilde ...

  6. 创建ArcGIS API for JavaScript的第一个示例程序

    原文:创建ArcGIS API for JavaScript的第一个示例程序 在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话 ...

  7. arcgis api for javascript 学习(七) 调用发布地图信息,并将地图属性信息输出到Excel表格---进阶版

    我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...

  8. 下载并部署 ArcGIS API for JavaScript 4.10

    学习ArcGIS API for JavaScript 4.10 的第一步就是下载并部署该文件. 有的读者由于之间没接触过,不知道怎么下载和部署文件.这些读者要求作者详细的写一篇关于下载和部署的文章( ...

  9. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

随机推荐

  1. springboot: thymeleaf 使用详解

    springboot:thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎 ...

  2. 并发库应用之八 & 循环路障CyclicBarrier应用

    JDK包位置:java.util.concurrent.CyclicBarrier 一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及 ...

  3. Springboot+Atomikos+Jpa+Mysql实现JTA分布式事务

    1 前言 之前整理了一个spring+jotm实现的分布式事务实现,但是听说spring3.X后不再支持jotm了,jotm也有好几年没更新了,所以今天整理springboot+Atomikos+jp ...

  4. 在Mac OS X中配置Apache + PHP + MySQL 很详细

    这是一篇超级详细的配置mac os下面php+mysql+apache的文章.非常详细我的大部分配置就是参考上面的内容的,比如,PHP不能连接数据库,就是改一下默认的php.ini中pdo_mysql ...

  5. TensorFlow 常用函数汇总

    本文介绍了tensorflow的常用函数,源自网上整理. TensorFlow 将图形定义转换成分布式执行的操作, 以充分利用可用的计算资源(如 CPU 或 GPU.一般你不需要显式指定使用 CPU ...

  6. TensorFlow练习2: 对评论进行分类

    本帖是前一贴的补充: 使用大数据,了解怎么处理数据不能一次全部加载到内存的情况.如果你内存充足,当我没说 训练好的模型的保存和使用 使用的模型没变,还是简单的feedforward神经网络(updat ...

  7. Java EE

  8. aliyun oss操作汇总

    // endpoint以杭州为例,其它region请按实际情况填写 String endpoint = "http://oss-cn-hangzhou.aliyuncs.com"; ...

  9. springMVC框架在js中使用window.location.href请求url时IE不兼容问题解决

    是使用springMVC框架时,有时候需要在js中使用window.location.href来请求url,比如下面的路径: window.location.href = 'forecast/down ...

  10. tcp.go

    )     _, err := io.ReadFull(clientConn, buf)     if err != nil {         p.ctx.nsqd.logf("ERROR ...