ArcGIS API For JavaScript官方文档二十一之Popups and Info Windows②

ArcGIS API For JS官方文档解析目录

四、Popup概述

Working with Popups

1、使用ArcGIS.com创建Popup

    您能使用JavaScript API程序化构建info window,请参阅“fomat info window content topic”查看详细说明。另一种方法是使用ArcGIS.com在地图查看器中构建一个web地图并配置 pop-up windows(弹出窗口)。您可以快速创建包含格式化文本、图像、图表和更多内容的pop-up windows。在ArcGIS.com help中查看有关配置pop-up windows的详细信息。一旦配置了pop-up window,它就可以用来显示嵌入应用程序中的信息以及使用ArcGIS Web APIs构建的应用程序。下面是一个包含popups window的嵌入式webmap的示例。注意,您可以导航map并单击以查看popup。mobile popup被优化显示在移动设备上的map。

    示例在原网页

    创建pop-up windows后,您可以共享和嵌入您的Web地图,或者使用所提供的模板快速创建一个web应用程序,该应用程序显示了不需要编程的map和pop-up window。应用程序的最终用户可以单击地图以显示信息弹出。查看Building Web applications with ArcGIS.com templates帮组主题以获取关于创建和共享web地图的信息。

2、用popup的方式替换地图的默认信息窗口

    在2.3版中,Popup类和PopupTemplate类被添加到ArcGIS API for JavaScript。这些类允许开发人员定义和使用一个弹出程序,它跟ArcGIS.com popup具有相同的体验。Popup可以替换地图的info window,并显示像查询或识别任务结果等内容。在3.4版中,popup是地图的默认信息窗口。

    Popup类,一个InfoWindow的实现提供了以下功能:

  • 允许您通过选定的要素进行移动的导航工具
  • 缩放到选定的要素
  • 高亮显示选定的要素
  • 最大化info window

    查看Feature layer from feature collectionFeature Layer with popup了解popup如何工作

3、Mobile Popup

    在2.4版本中,添加了MobilePopup类,以便在移动设备上显示小地图时提供更好的用户体验。它提供了一个信息窗口,当一个要素最初被触及时,它会有一个小的脚印。一旦打开,信息窗口就有一个按钮来使要素的属性填充屏幕,所以所有关于要素的信息都可以看到。我们在ArcGIS.com 移动站点使用mobile popup,从移动设备访问ArcGIS.com或者直接导航到移动站点m.arcgis.com,以尝试mobile popup


五、格式化Popup Content

Format Popup Content

Define popup content

    开发人员可以使用setContent()和setTitle()方法定义popup content,content可以是字符串或者函数,查看Format Info Window Content帮助主题了解更多细节。您还可以通过指定模板并将其与layer或graphic相关联来定义content,请参阅下面的PopupTemplate获取更多信息。

    额外的信息可以添加到popup的动作列表部分,例如,您可以添加一个链接提供有关所选feature的额外信息,或者单击时执行一个geoprocessing tool的链接。查看Popup with Geoprocessing Tool示例获取更多细节。

1、Popup Template

    PopupTemplate类扩展了esri/InfoTemplate,允许开发人员定义包含标题、描述、附件、图像和图表的模板。然后这些组件被组织在布局中,它与ArcGIS.com的popup体验相同。

    PopupTemplate类扩展了esri/InfoTemplate,提供了定义布局的支持,该布局可以包含以下组件:

  • Title —— 使用title属性定义popup的title
  • Description —— 自定义content,来自一个字段的content,来自所有字段的name/value。可以使用description或者fieldInfos[]属性来定义description内容
  • Media —— 图像、图表(饼图、条状图、线图),使用mediaInfos[]属性定义media内容
  • 显示附件 —— 如果content支持附件,使用showAttachments属性激活附件

    字段中的内容可以通过指定花括号中的字段名来使用,例如:{field_name},此语法不同于用于定义info template的语法。

    若要创建一个PopupTemplate,通过创建包含下面表(列表在原网页中)中列出的属性的对象来定义popup content。

    在3.10版本和以后版本中,popup template可以包含来自表的字段引用或者加入关系类的图层。使用这些字段的语法是relationships/relationship_id/field_name,要使用一个来自关系的字段,该字段应该包含在fieldInfos、title、description或者mediaInfos,使用此语法的示例显示在本页的底部。

2、示例

    popup template定义了popup的将来自字段的标题和描述,在popup,字段可以使用{field_name}语法引用。

var template = new PopupTemplate({
  title: "{title}",
  description: "{description}"
});

    模板使用fieldInfos[]定义来自多个字段的content

var template = new PopupTemplate({
  title: "Age Distribution in {FIPS}",
  fieldInfos: [{
    fieldName: "AGE_UNDER5",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_5_17",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_18_21",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_22_29",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_30_39",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_40_49",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_50_64",
    visible: true,
    format: {
      places: 0
    }
  }, {
    fieldName: "AGE_65_UP",
    visible: true,
    format: {
      places: 0
    }
  }]
});

模板定义了一个popup图表:

var template = new PopupTemplate({
  title: "Age Distribution in {FIPS}",
  mediaInfos: [{
    type: "piechart",
    value: {
      fields: ["AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29", "AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"],
      theme: "Julie"
    }
  }]
});

模板定义了在media部分显示一张图片:

var template = new PopupTemplate({
  title: "Parcel Photos",
  mediaInfos: [{
    "title": "",
    "caption": "",
    "type": "image",
    "value": {
      "sourceURL": "{link}",
      "linkURL": "{link}"
    }
  }]
});

模板引用了一个相关字段并且在图表中使用它:

var template = new PopupTemplate({
  "title": "Beverly Hills Trees By Block",
  "fieldInfos": [{
    "fieldName": "Point_Count",
    "label": "Count of Points",
    "format": {
      "places": 0,
      "digitSeparator": true
    }
  }, {
    "fieldName": "relationships/0/Point_Count_COMMON",
    "label": "Sum of species tree count",
    "format": {
      "places": 0,
      "digitSeparator": true
    },
    "statisticType": "sum"
  }, {
    "fieldName": "relationships/0/COMMON",
    "label": "Common Name"
  }, {
    "fieldName": "BLOCKCE10",
    "label": "Block"
  }],
  "description": "There are {Point_Count} trees within census block {BLOCKCE10}",
  "showAttachments": false,
  "mediaInfos": [{
    "title": "Count By Type",
    "type": "columnchart",
    "caption": "",
    "value": {
      "theme": "GreySkies",
      "fields": ["relationships/0/Point_Count_COMMON"],
      "normalizeField": null,
      "tooltipField": "relationships/0/COMMON"
    }
  }]
});

模板引用了一个Arcade表达式

var template = new PopupTemplate({
  expressionInfos: [{
    name: "participation-rate",
    title: "% of population 16+ participating in the labor force",
    expression: "Round(($feature.CIVLBFR_CY / $feature.POP_16UP)*100,2)"
  }],
  description: "In {NAME} county, {expression/participation-rate}% of the population"
    + " participates in the labor force."
});

    

转载自:https://blog.csdn.net/qq_35732147/article/details/80056741

You may also like...