概述

本文你将学习通过属性如何设置符号的颜色和样式。

如果想要提高样式和可视性，可以使用Renderer。首先，需要选择正确的渲染器，SimpleRenderer应用相同的图标到所有的图层，UniqueValueRenderer 对每一个不同的字符串属性值应用不同的图标符号，ClassBreaksRenderer 对一个范围内的值应用同一个图标符号。渲染器负责在图层绘制时为每一个图层应用恰当的图标。
可以设置标签在图层上展示文本属性

在本文中将使用不同的渲染器加强Trailheads的可视性。

步骤

1. 使用练习1创建的地图应用程序。

使用标签和小人图片增强样式

2. 在require中添加FeatureLayer模块

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

3. 在主函数的末尾，创建一个对象，用它表示一个simple渲染器，设置这个对象的symbol属性。

 var trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

4. 要创建展示小路名字的标签，可以定义一个对象保存标签的信息，定义使用symbol属性，设置字体颜色是白色，并且有2px的边框，位置是图层的上方居中。并且使用表达式来应用数据库中的字段（feature对象的属性）。

 var trailheadsLabels = {
        symbol: {
          type: "text",
          color: "#FFFFFF",
          haloColor: "#5E8D74",
          haloSize: "2px",
          font: {
            size: "12px",
            family: "noto-sans",
            style: "italic",
            weight: "normal"
          }
        },
        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.TRL_NAME"
        }
      };

5. 创建trailheads的一个Feature Layer层。

 var trailheads = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        renderer: trailheadsRenderer,
        labelingInfo: [trailheadsLabels]
      });

      map.add(trailheads);

由海拔决定小路的宽度（海拔越高路越宽）

若要想根据属性值给feature应用不同的图标，你需要使用VisualVariables.

6. 在主函数底部定义一个SimpleRenderer对象，VisualVariables属性定义线的宽度随海拔增高而增大。

 var trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },
        visualVariables: [
          {
            type: "size", 
            field: "ELEV_GAIN", //依据的feature属性字段
            minDataValue: 0, //属性最小值
            maxDataValue: 2300,//属性最大值
            minSize: "3px", //图标宽度最小值
            maxSize: "7px" //图标宽度最大值
          }
        ]
      };

7. 创建一个feature图层，设置opacity为0.7

  var trails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      map.add(trails, 0);

加载一个feature图层，只显示自行车路线

在一个图层中如果你想设计并绘制一部分数据，你可以应用一个不同的符号，设置definitionExpression属性，然后把这个图层放到最顶层。
8. 在主函数中创建一个simple的渲染器。

   var bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

9. 创建一个feature layer 图层，设置Url并查询条件。

  var bikeTrails = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: bikeTrailsRenderer,
        definitionExpression: "USE_BIKE = 'YES'"
      });

      map.add(bikeTrails, 1);

公园区域使用不一样的颜色

10. 在主函数中创建一个UniqueValueRenderer 对象，type属性是unique-value，field属性是feature数据集的TYPE字段，uniqueValueInfos 是一个数组，为每一种TYPE的值定义一个图标。在本例中我定义了一个函数，返回图标信息。

 function createFillSymbol(value, color) {
        return {
          "value": value,
          "symbol": {
            "color": color,
            "type": "simple-fill",
            "style": "solid",
            "outline": {
              "style": "none"
            }
          },
          "label": value
        };
      }

      var openSpacesRenderer = {
        type: "unique-value",
        field: "TYPE",
        uniqueValueInfos: [
          createFillSymbol("Natural Areas", "#9E559C"),
          createFillSymbol("Regional Open Space", "#A7C636"),
          createFillSymbol("Local Park", "#149ECE"),
          createFillSymbol("Regional Recreation Park", "#ED5151")
        ]
      };

11. 创建一个feature图层，设置他的renderer属性

   var openspaces = new FeatureLayer({
        url:
          "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        renderer: openSpacesRenderer,
        opacity: 0.20
      });

      map.add(openspaces, 0);