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

by · 2018-12-17

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 collection和Feature 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

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序

退出移动版