尝试一下 Open in CodePen 在线预览 此示例演示如何使用手动定义的分类间隔基于数值数据可视化要素。当中断已知或预定义时，此渲染器提供用于为每个分类间隔设置区分符号的选项。
在完成以下步骤之前，您应该熟悉视图 、地图 和 FeatureLayer 。如有必要，请先完成以下教程：
将不会查看此应用程序的基本组件，例如创建 Map 和 MapView 类的实例以及了解 HTML 和 CSS 结构。如果需要熟悉此应用程序中的这些组件，请参阅上面列出的教程。作为一般规则，上述教程中讨论的介绍性原则适用于文档中的大多数示例。
此应用程序使用表示华盛顿州西雅图的美国人口普查区块组的数据。感兴趣的人口统计是拥有大学学位的 25 岁以上的成年人的数量。我们的用户可能有他们想要用于可视化此数据的预定义休息时间，例如区域为 0- 35% 的人口具有度，35%-50%，50%-75% 和 75%-100%。
首先，我们将使用 SimpleFillSymbol 为每个间隔定义一个单独的符号。
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
const less35 = {
type : "simple-fill" , // autocasts as new SimpleFillSymbol()
color : "#fffcd4" ,
style : "solid" ,
outline : {
width : 0.2 ,
color : [ 255 , 255 , 255 , 0.5 ]
}
};
const less50 = {
type : "simple-fill" , // autocasts as new SimpleFillSymbol()
color : "#b1cdc2" ,
style : "solid" ,
outline : {
width : 0.2 ,
color : [ 255 , 255 , 255 , 0.5 ]
}
};
const more50 = {
type : "simple-fill" , // autocasts as new SimpleFillSymbol()
color : "#38627a" ,
style : "solid" ,
outline : {
width : 0.2 ,
color : [ 255 , 255 , 255 , 0.5 ]
}
};
const more75 = {
type : "simple-fill" , // autocasts as new SimpleFillSymbol()
color : "#0d2644" ,
style : "solid" ,
outline : {
width : 0.2 ,
color : [ 255 , 255 , 255 , 0.5 ]
}
};
我们可以在为要素定义分类间隔时使用 ClassBreaksRenderer 。在构造函数中，我们指定了 field 和 normalizationField，其中包含感兴趣的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const renderer = {
type : "class-breaks" , // autocasts as new ClassBreaksRenderer()
field : "COL_DEG" , // total number of adults (25+) with a college degree
normalizationField : "EDUCBASECY" , // total number of adults 25+
defaultSymbol : {
type : "simple-fill" , // autocasts as new SimpleFillSymbol()
color : "black" ,
style : "backward-diagonal" ,
outline : {
width : 0.5 ,
color : [ 50 , 50 , 50 , 0.6 ]
}
},
defaultLabel : "no data" // legend label for features that don't match a class break
};
您可以通过以下两种方式之一在每个分类间隔上设置一个符号：在构造函数中使用 classBreakInfos ...
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
const renderer = {
type : "class-breaks" , // autocasts as new ClassBreaksRenderer()
// other properties set in step number 2
classBreakInfos : [
{
minValue : 0 ,
maxValue : 0.3499 ,
symbol : less35,
label : "< 35%" // label for symbol in legend
},
{
minValue : 0.35 ,
maxValue : 0.4999 ,
symbol : less50,
label : "35 - 50%" // label for symbol in legend
},
{
minValue : 0.5 ,
maxValue : 0.7499 ,
symbol : more50,
label : "50 - 75%" // label for symbol in legend
},
{
minValue : 0.75 ,
maxValue : 1.0 ,
symbol : more75,
label : "> 75%" // label for symbol in legend
}
]
};
或使用 addClassBreakInfo() 方法。
1
renderer.addClassBreakInfo( 0 , 0.3499 , less35);
定义渲染器后，您可以在图层上进行设置，视图和图例将自动更新。单击下面的沙盒按钮以查看应用的完整代码。
尝试一下 Open in CodePen 在线预览