6.配置使用pop-ups(弹出框)

最新推荐文章于 2024-06-14 13:55:12 发布

GIS猫

最新推荐文章于 2024-06-14 13:55:12 发布

阅读量2.5k

点赞数 1

分类专栏： ArcGIS for JS

原文链接：https://developers.arcgis.com/javascript/latest/guide/configure-pop-ups/

版权

ArcGIS for JS 专栏收录该内容

13 篇文章 6 订阅

订阅专栏

概述

本节您将学到： 为feature layer 配置pop-ups的样式和内容。

我们可以给feature layer 和graphic 配置pop-ups，使点击它们使能够弹出pop-ups以展示被点击要素的属性信息。我们可以通过PopupTemplate对象来设置pop-ups的样式、内容和格式。通过PopupTemplate我们可以定义pop-ups的标题、内容以及多媒体信息的展示。可以通过一段HTML、一个方法或者需要表格形式展示的一系列字段名来设置pop-up的内容。在pop-up弹出前我们还可以通过Arcade表达式来对数据进行计算或者格式化。如果我们展示的使graphics或者graphics layer，可以给graphic都是单独的pop-ups。有关更多的PopupTemplate可以查看:
PopupTemplate：https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html

本节我们将给 Trailheads、Trails和Parks and Open Spaces layers三个FeatureLayer，配置 pou-ups , 点击这三个图层的每个要素，都会弹出的对应的pop-ups，效果如下：
效果图

撸代码步骤

创建一个简单HTML页面

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

使用HTML为Trailheads图层定义pop-up

在require引用中添加FeatureLayer模块的引用.

require([
  "esri/Map",
  "esri/views/MapView",
  //*** ADD ***//
  "esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {

在main方法尾创建一个popupTemplate，设置其title为要素TRL_NAME字段值，content为一串HMTL字符串。将popupTemplate设置给图层，并把图层加入到地图中。

在本例中我们给popupTemplate设置了title和content的值。content的值为一段带有字段引用的HTML字符串，字段可以通过{字段名}的形式引用，在运行时引用将会被对应的字段值替换。为了显示字段值，需要给图层设置outFields属性包含该字段以便在客户端可用。

var popupTrailheads = {
  "title": "{TRL_NAME}",
  "content": "<b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
}

var trailheads = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0",
  outFields: ["TRL_NAME","CITY_JUR","X_STREET","PARKING","ELEV_FT"],
  popupTemplate: popupTrailheads
});

map.add(trailheads);

**注意：**feaute layer会自动将popupTemplate的Json值转为对应的类的对象。有关autocasting(自动转换)的内容，可以查看：
https://developers.arcgis.com/javascript/latest/guide/programming-patterns/#autocasting

运行代码，点击trailhead图层要素，将看到弹出框展示刚才配置的标题和内容。

HTML定义pop-up

使用function为Trails图层定义pop-up

在mian方法中创建一个popupTemplate,设置其title属性值为Trail Information、content为一个方法。将popupTemplate设置给图层，并把图层加入到地图中。

在本例中我们使用一个方法返回一串带有引用的HTML字符串。使用方法我们可以方便的对字段值进行计算或者对内容进行格式化返回。

var popupTrails = {
  "title": "Trail Information",
  "content": function(){
     return "This is {TRL_NAME} with {ELEV_GAIN} ft of climbing.";
  }
}

var trails = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
  outFields: ["TRL_NAME","ELEV_GAIN"],
  popupTemplate: popupTrails
});

map.add(trails,0);

运行代码，点击 trails图层要素，将看到弹出框展示刚才配置的标题和内容。

function定义pop-up

使用表格形式为Parks and Open Spaces图层定义pop-up

在mian方法中，创建一个popupTemplate，设置其title属性为{PARK_NAME},定义一个fieldsInfos数组去展示内容。这样在pop-pu将会展示一个第一列为字段名，第二列为字段值的表格。将popupTemplate设置给图层，并把图层加入到地图中。

在本例中，使用表格展示字段值和字段名。这些要展示的字段都通过fieldInfos定义，其中最经常使用的属性为label和format，它们可以控制如何展示以及如何格式化，例如对数值进行四舍五入等。

var popupOpenspaces = {
  "title": "{PARK_NAME}",
  "content": [{
    "type": "fields",
    "fieldInfos": [
      {
        "fieldName": "AGNCY_NAME",
        "label": "Agency", //字段别名，如果设置了会显示在第一列代替默认字段名
        "isEditable": true, //是否可以编辑
        "tooltip": "",//编辑时候的提示
        "visible": true,//是否可见
        "format": null,//格式化
        "stringFieldOption": "textbox"//展示的html容器元素，可选值有 rich-text | text-area | text-box
      },
      {
        "fieldName": "TYPE",
        "label": "Type",
        "isEditable": true,
        "tooltip": "",
        "visible": true,
        "format": null,
        "stringFieldOption": "textbox"
      },
      {
        "fieldName": "ACCESS_TYP",
        "label": "Access",
        "isEditable": true,
        "tooltip": "",
        "visible": true,
        "format": null,
        "stringFieldOption": "textbox"
      },
      {
        "fieldName": "GIS_ACRES",
        "label": "Acres",
        "isEditable": true,
        "tooltip": "",
        "visible": true,
        "format": {
          "places": 2,
          "digitSeparator": true
        },
        "stringFieldOption": "textbox"
      }
    ]
  }]
}

var openspaces = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0",
  outFields: ["TYPE","PARK_NAME", "AGNCY_NAME","ACCESS_TYP","GIS_ACRES"],
  popupTemplate: popupOpenspaces
});

map.add(openspaces,0);

运行代码，点击 openspaces图层要素，将看到弹出框展示刚才配置的标题和内容。

表格定义pop-up

到此您已经完成

再撸点

为pup-up添加图表

pop-up支持多种内容形式的展示。我们可以更新上面的代码，使用柱状图(使用ELEV_MIN和ELEV_MAX字段值做为x y轴)显示 Trail 图层的pop-up。
注意：不要忘记了将ELEV_MIN和ELEV_MAX字段加入到trails.outFields中。

var popupTrails = {
  title: "Trail Information",
  //*** 注释掉用来代码***//
  // content: function(){
  //    return "This is {TRL_NAME} with {ELEV_GAIN} ft of climbing.";
  // }
  content: [{
    type: "media",
      mediaInfos: [{
        type: "column-chart",
        caption: "",
        value: {
          fields: [ "ELEV_MIN","ELEV_MAX" ],
          normalizeField: null,
          tooltipField: "Min and max elevation values"
        }
      }]
  }]
}

-运行代码，点击 trails 图层要素，pop-up如下。

柱状图

使用 Arcade 表达式

pop-up支持使用 Arcade 表达式进行数值计算、几何计算和格式化输出。我们可以更新上面的代码，使 Trails 图层的pop-up展示每英里的平均坡度。

注意：不要忘记了将ELEV_MIN和ELEV_MAX和LENGTH_MI字段加入到trails.outFields中。

var popupTrails = {
  title: "Trail Information",
  //***注释掉用来代码 ***//
  // content: function(){
  //    return "This is {TRL_NAME} with {ELEV_GAIN} ft of climbing.";
  // }, {
  expressionInfos: [{
    name: "elevation-ratio",
    title: "Elevation change",
    expression: "Round((($feature.ELEV_MAX - $feature.ELEV_MIN)/($feature.LENGTH_MI)/5280)*100,2)"
  }],
  content: "The {TRL_NAME} trail average slope per mile is: {expression/elevation-ratio}% over a total of {LENGTH_MI} miles."
}

更多Arcade 表达式资料，可以参考：
https://developers.arcgis.com/javascript/latest/api-reference/esri-popup-ExpressionInfo.html

-运行代码，点击 trails 图层要素，pop-up如下。

Arcade表达式

完整代码比较长，可以在公众号回复`6`查看

欢迎关注我的微信公众号，第一时间为您推送相关教程。

GIS猫公众号

GIS猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
6.配置使用pop-ups(弹出框)

概述本节您将学到：为feature layer 配置pop-ups的样式和内容。我们可以给feature layer 和graphic 配置pop-ups，使点击它们使能够弹出pop-ups以展示被点击要素的属性信息。我们可以通过PopupTemplate对象来设置pop-ups的样式、内容和格式。通过PopupTemplate我们可以定义pop-ups的标题、内容以及多媒体信息的展示。可以...
复制链接

扫一扫