5.feature layer 配置样式

最新推荐文章于 2020-10-13 14:18:23 发布

GIS猫

最新推荐文章于 2020-10-13 14:18:23 发布

阅读量1.8k

点赞数 2

分类专栏： ArcGIS for JS

原文链接：https://developers.arcgis.com/javascript/latest/guide/style-feature-layers/

版权

ArcGIS for JS 专栏收录该内容

13 篇文章 6 订阅

订阅专栏

概述

本节您将学到： 怎么根据属性值配置feature layer的样式和符号。

应用能够使用不同的样式展示feature layer 以增加数据的可视化。第一步是选择合适的renderer。SimpleRenderer提供相同的符号渲染所有的要素，UniqueValueRenderer能根据属性不同值提供不同的符号渲染要素（唯一值渲染）,ClassBreaksRenderer能根据属性不同范围值提供不能的符号渲染（范围值渲染）。在绘制feature layer时Renderers负责接收数据并提供合适的符号去渲染要素。Labels同样能够展示要素的属性信息，visual variables和expressions通常用来创建更加复杂的数据驱动可视化，相关的内容可以查下以下文档：
https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html

在本节将使用不同的Renderer增强 Trailheads, Trails 和 Parks and Open Spaces feat可视化渲染。效果如下：
效果图

撸代码步骤

创建一个简单HTML页面

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

使用徒步者图标配置trailheads图层符号以及配置其注记（点状符号和注记）

在require中加入FeatureLayer的模块引用并且更新function的参数。

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

在main方法尾创建一个trailheadsRenderer对象，定义其type属性为simple(简单渲染器)、symbol的ttype属性为picture-marker(图片符号)、url为指向图标地址的url、宽（width）高（height）属性都为18px。

SimpleRenderer会使用相同的符号渲染图层的所有要素。在本节中使用PictureMarkerRenderer（SimpleRenderer的子类）在每个要素的点位上绘制一个图标。有关SimpleRenderer和Symbols的更多内容可参考：https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html

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

为了显示Trailheads图层的注记，创建一个trailheadsLabels对象将其设置给Trailheads的labelingInfo属性。设置trailheadsLabels的symbol使注记的字体颜色为白色(#FFFFFF)并且带有绿色阴影(#5E8D74)、在要素符号正上方居中显示，最后使用简单表达式指向TRL_Name为注记值。

我们可以给feature layer 设置labelingInfo属性开启图层的注记。在设置该属性时，需要至少设置该属性的labelExpressionInfo和symbol用于表示标记显示的内容以及符号。关于注记的更多内容可以参考:https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#labelingInfo

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

创建trailheads的FeatureLayer，并设置其url, renderer和labelingInfo属性，最后将trailheads加入到map中。

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

运行代码，将看到使用徒步者符号渲染和使用TRL_NAME字段值作为注记的feature layer。

点状符号

根据`ELEV_GAIN`字段值给trail 图层配置样式（线状符号）

为了使用图层根据属性值渲染不同符号，我们可以使用VisualVariables

在mian方法的底部，创建一个SimpleRenderer对象，并设置其VisualVariables属性，使图层渲染时能根据ELEV_GAIN字段的值越大图层的线宽度越宽。VisualVariables属性设置其type为size表示要改变符号的大小，field设置为ELEV_GAIN表示根据ELEV_GAIN字段值改变符号大小，minDataValue和maxDataValue设置ELEV_GAIN的最大和最小值，当ELEV_GAIN的值超过最大或最小值将会按设置的最大或最小值计算。minSize和maxSize分别为3px和7px表示线框最小和最大值。设置完这些参数，在渲染时线框就会自动计算。
关于VisualVariables的更多内容可以查看:https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-VisualVariable.html

var trailsRenderer = {
  type: "simple",
  symbol: {
    color: "#BA55D3",
    type: "simple-line",
    style: "solid"
  },
  visualVariables: [
    {
      type: "size",
      field: "ELEV_GAIN",
      minDataValue: 0,
      maxDataValue: 2300,
      minSize: "3px",
      maxSize: "7px"
    }
  ]
};

创建trails的FeatureLayer,并设置其url, renderer和 opacity (0.75) 属性，最后把它加入map中。

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

运行代码，会发现trails图层在不同的地方线符号的宽度会根据设置的值自动计算渲染。

线状符号

为park 图层配置唯一值渲染（面状符号）

在mian方法中，创建一个UniqueValueRenderer（唯一值渲染器）用来根据park图层的TYPE属性给每个要素渲染不同的颜色。定义一个方法，接受两个参数分别为属性值和颜色，方法将根据参数构建一个uniqueValueInfo对象返回。接下来创建一个openSpacesRenderer对象，设置其type属性为unique-value,表示要创建的时UniqueValueRenderer,field属性为TYPE,表示要根据TYPE字段值进行渲染，设置uniqueValueInfos为一个UniqueValueInfo的数组，用来定义不同的TYPE所对应的符号。

UniqueValueRenderer能根据属性的不同值渲染不同的符号。本节使用TYPE字段及其值来匹配符号。有关UniqueValueRenderer和符号，可以查看：https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html

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")
  ]
};

创建一个openspaces的FeatureLayer，设置其 renderer 和opacity属性，并把他加入到map中。

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

运行代码查看 Parks and Open Spaces，会发现不同类型的 parks and open spaces 会使用不同的符号渲染。

到此您已经完成了。

完整代码

<html>
<head>
  <meta name="description" content="DevLab: Style a feature layer">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Style a feature layer</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>
</head>

<script>
  require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer"
    ],
    function(
      Map,
      MapView,
      FeatureLayer
    ) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
      });

      // 定义一个SimpleRenderer ,并设置图片符号
      var trailheadsRenderer = {
        "type": "simple",
        "symbol": {
          "type": "picture-marker",
          "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
          "width": "18px",
          "height": "18px"
        }
      }

      // 定义注记
      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"
        }
      };

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

      // 添加图层
      map.add(trailheads);

      // 定义一个SimpleRenderer,设置其Symbol和visualVariables
      var trailsRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-line",
          style: "solid"
        },
        visualVariables: [
          {
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }
        ]
      };

      // 创建图层，并设置renderer（渲染器）和opacity（透明度）
      var trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        renderer: trailsRenderer,
        opacity: .75
      });

      // 添加图层
      map.add(trails,0);

      // 定义一个SimpleRenderer,设置其Symbol
      var bikeTrailsRenderer = {
        type: "simple",
        symbol: {
          type: "simple-line",
          style: "short-dot",
          color: "#FF91FF",
          width: "1px"
        }
      };

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


      //根据不同类型的值，创建不同的符号
      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")
        ]
      };

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

      map.add(openspaces,0);

    });

  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>

再撸点

查看以下文档可以学习更多关于数据可视化和样式的内容。

欢迎关注我的微信公众号，第一时间为您推送相关教程。

GIS猫公众号

GIS猫

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
5.feature layer 配置样式

概述本节您将学到：怎么根据属性值配置feature layer的样式和符号。应用能够使用不同的样式展示feature layer 以增加数据的可视化。第一步是选择合适的renderer。SimpleRenderer提供相同的符号渲染所有的要素，UniqueValueRenderer能根据属性不同值提供不同的符号渲染要素（唯一值渲染）,ClassBreaksRenderer能根据属性不同范围值...
复制链接

扫一扫