点聚类的弹出式图表

尝试一下在线预览

此示例演示如何使用聚类出窗口中的图表按类型汇总聚类要素。该应用程序将发电厂可视化为点聚类。每个聚类的弹出窗口显示聚类内用于发电的五种最常见燃料类型的列表。它还包括两个饼图,按燃料类型总结发电厂的数量,以及聚类内每种燃料类型的总 mW 容量。

列表和图表是使用 ExpressionContent 弹出元素创建的,这些元素可用于有条件地使用 Arcade 表达式构建富文本、图表或字段列表。返回弹出元素的表达式必须返回表示所需内容元素的 Web 地图规范 web 的字典。支持以下弹出元素:TextContentFieldsContentMediaContent

使用 Arcade 创建 HTML 列表

要从 Arcade 表达式返回 HTML,必须将 HTML 作为 TextContent 元素返回。用于构建文本内容元素的表达式必须返回与以下规范匹配的字典:

    
1
2
3
4
return {
  type: "text",
  text: "<b>The text to display in the popup</b>"
}

因为 TextContent 可以包含富文本,所以我们可以在 Arcade 表达式中动态构建 HTML 元素作为文本值。请注意,在任何其他情况下,都不能在 Arcade 中返回 HTML,例如显示 PopupTemplate.expressionInfos 属性中的表达式值。

下面的表达式演示了它是如何工作的。阅读评论了解详细信息。

                               
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Inform the popup, which fields the expression expects to use
// to ensure they are downloaded to the client
Expects($aggregatedFeatures, "fuel1", "capacity_mw")

// Get the total number of features in the cluster
// grouped by type and store it in a num_features field
var statsFS = GroupBy($aggregatedFeatures,
  [
    { name: 'Type', expression: 'fuel1'},
  ],
  [
    { name: 'num_features', expression: '1', statistic: 'COUNT' }
  ]
);
// Only return the top 5 results ordered by total features
var ordered = Top(OrderBy(statsFs, 'num_features DESC'), 5);

// create an HTML ordered list as a string
var list = "<ol>";

// Create a new list item for each type in the top 5 'ordered' featureset
for (var group in ordered){
  list += \`<li>\${group.Type} (\${Text(group.num_features, "#,###")})</li>\`
}
list += "</ol>";

// return the list as rich text
return {
  type: "text",
  text: list
}

使用 Arcade 创建饼图

图表表达式必须返回与 MediaContent 元素的 web 地图规范匹配的字典:

                   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
return {
  type: "media",
  attributes: {
    field1: number,
    field2: number
  },
  title: "Media content title",
  mediaInfos: [
    {
      type: "piechart",  // can also be "columnchart", "linechart", "piechart", "image"
      title: "Chart title",
      value: {
        // the list of attribute values to include in the chart
        fields: [ "field1", "field2" ]
      }
    }
  // you can define more charts here
  ]
}

在 JavaScript 中实现时,可以使用字段名列表来定义图表。但是,在使用 Arcade 动态创建图表时,必须创建一个 attributes 字典,用于存储包含图表中使用的数据的密钥值对。密钥是要在图表值的 fields 属性中引用的字段名。

下面的表达式通过创建两个饼图来演示其工作原理。阅读评论了解详细信息。

                                                       
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// Inform the popup, which fields the expression expects to use
// to ensure they are downloaded to the client
Expects($aggregatedFeatures, "fuel1", "capacity_mw");
// create an object to store attributes
// and arrays used to store field names for each chart
var attributes = {};
var countFieldNames = [];
var capacityFieldNames = [];

// Get the distinct types of fuel within the cluster.
// This can be an array of 1-12 types depending on the cluster.
var types = Distinct($aggregatedFeatures, "fuel1");

// add attributes to the dictionary for each type
// one for the total count, the other for capacity
for(var t in types){
  var type = t.fuel1;
  // contains all the features belonging to the type
  // on this iteration of the loop
  var filtered = Filter($aggregatedFeatures, "fuel1 = @type");

  // Create a field name for the count of the current type
  var countFieldName = type + " count";
  // Store the total number of features in the attribute
  attributes[countFieldName] = Count(filtered);
  // Push the fieldName to the appropriate array
  Push(countFieldNames, countFieldName);

  // Repeat this process for the second chart
  var capacityFieldName = type + " capacity (mW)";
  // Instead of count, get the sum for the capacity and add to attributes
  attributes[capacityFieldName] = DefaultValue(Sum(filtered, "capacity_mw"), 0);
  Push(capacityFieldNames, capacityFieldName);
}

return {
  type: "media",
  // attributes for both charts here
  attributes: attributes,
  title: "Count vs. capacity comparison",
  // list keys for attributes for each chart in "value"
  mediaInfos: [{
    type: "piechart",
    title: "Total count",
    value: {
      fields: countFieldNames
    }
  }, {
    type: "piechart",
    title: "Total capacity (mW)",
    value: {
      fields: capacityFieldNames
    }
  }]
}

表达式直接添加到 popupTemplate 内容中的 ExpressionContent 元素。

                 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
layer.featureReduction = {
  type: "cluster",
  popupTemplate: {
    title: "Power plant summary",
    content: [{
      type: "expression",
      expressionInfo: "// list expression here",
      title: "List of fuel types"
    }, {
      type: "expression",
      expressionInfo: {
        expression: "// chart expression here"
        title: "Pie charts"
      }
    }]
  }
};

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.