用相同的符号可视化所有要素

尝试一下在线预览

T此示例演示如何使用相同符号对同一图层中的所有要素进行符号化。在某些情况下，用户只想知道要素的位置，例如城市、项目区域、道路、边界等。数据可能存储在单个图层中，其中所有要素必须具有相同的符号。在这种情况下，我们将使用 SimpleRenderer 来渲染具有相同符号的所有要素。

在完成以下步骤之前，您应该熟悉视图，地图和 FeatureLayer 。如果有必要，请先完成以下教程：

此应用程序的基本组件，例如创建 Map 和 MapView 类的实例以及理解 HTML 和 CSS 结构，将不予审查。如果您需要熟悉此应用程序中的这些组件，请参阅上面列出的教程。作为一般规则，上述教程中讨论的介绍性原则适用于文档中的大多数示例。

1. 为每一图层创建一个符号

此应用程序添加了三图层；一个用于州界，另一个用于主要高速公路，另一个用于主要城市。在每一图层中，我们希望用相同的符号渲染所有要素。由于城市用点表示，我们将使用 SimpleMarkerSymbol 。

const citiesSym = {
  type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
  size: 5,
  color: [0, 255, 255],
  outline: null
};

对于高速公路和州，我们将分别使用 SimpleLineSymbol 和 SimpleFillSymbol 。

2. 在 SimpleRenderer 中设置符号

接下来，在 SimpleRenderer 的symbol 属性中设置 symbol 对象。

const citiesRenderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: citiesSym
};

您也可以直接在渲染器中定义符号，而无需事先这样做。

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.在渲染器上设置其他属性（可选）

您可以选择在渲染器中设置其他属性，例如标签，它设置图例中符号的标签。

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
};