尝试一下 在 CodePen 中打开 在线预览 T此示例演示如何使用相同 符号 对同一图层中的所有要素进行符号化。 在某些情况下,用户只想知道要素的位置,例如城市、项目区域、道路、边界等。数据可能存储在单个图层中,其中所有要素必须具有相同的符号。 在这种情况下,我们将使用 SimpleRenderer 来渲染具有相同符号的所有要素。
在完成以下步骤之前,您应该熟悉 视图 , 地图 和 FeatureLayer 。如果有必要,请先完成以下教程:
此应用程序的基本组件,例如创建 Map 和 MapView 类的实例以及理解 HTML 和 CSS 结构,将不予审查。 如果您需要熟悉此应用程序中的这些组件,请参阅上面列出的教程。 作为一般规则,上述教程中讨论的介绍性原则适用于文档中的大多数示例。
1. 为每一图层创建一个符号此应用程序添加了三图层; 一个用于州界,另一个用于主要高速公路,另一个用于主要城市。 在每一图层中,我们希望用相同的符号渲染所有要素。 由于城市用点表示,我们将使用 SimpleMarkerSymbol 。
Copy
1
2
3
4
5
6
const citiesSym = {
type : "simple-marker" , // autocasts as new SimpleMarkerSymbol()
size : 5 ,
color : [ 0 , 255 , 255 ],
outline : null
};
对于高速公路和州,我们将分别使用 SimpleLineSymbol 和 SimpleFillSymbol 。
2. 在 SimpleRenderer 中设置符号接下来,在 SimpleRenderer 的 symbol
属性中设置 symbol 对象。
Copy
1
2
3
4
const citiesRenderer = {
type : "simple" , // autocasts as new SimpleRenderer()
symbol : citiesSym
};
您也可以直接在渲染器中定义符号,而无需事先这样做。
Copy
1
2
3
4
5
6
7
8
9
const citiesRenderer = {
type : "simple" , // autocasts as new SimpleRenderer()
symbol : {
type : "simple-marker" , // autocasts as new SimpleMarkerSymbol()
size : 5 ,
color : [ 0 , 255 , 255 ],
outline : null
}
};
3.在渲染器上设置其他属性(可选)您可以选择在渲染器中设置其他属性,例如 标签 ,它设置 图例 中符号的标签。
Copy
1
2
3
4
5
6
7
8
9
10
const citiesRenderer = {
type : "simple" , // autocasts as new SimpleRenderer()
symbol : {
type : "simple-marker" , // autocasts as new SimpleMarkerSymbol()
size : 5 ,
color : [ 0 , 255 , 255 ],
outline : null
},
label : "Major cities" // this will appear next to the symbol in the legend
};
4. 总结使用单个符号分配单个图层中的所有要素是可视化数据的最简单方案。 向应用程序添加图例有助于用户了解图形在现实世界中所代表的内容。 有关将图例添加到视图的更多信息,请参阅 图例微件 示例。
点击下面的沙盒按钮查看应用程序的完整代码。
尝试一下 在 CodePen 中打开 在线预览 5. 其他可视化教程和示例