ArcGIS API For JavaScrip入门 (6)-标注要素

已被阅读 2105 次 | 文章分类:ArcGIS API For Javascript | 2022-01-03 22:32

本教程逐步介绍了客户端示例上的标签功能中使用的代码。

1 简介

本教程逐步介绍了客户端示例上的标签功能中使用的代码。labelingInfo与 FeatureLayer 类一起工作。

小白GIS

为了访问它，将 Map 的showLabels构造函数选项设置为true。完成后，添加到地图的 FeatureLayer 将根据其labelingInfo. 使用LabelClass需要修改这些标签属性。

2 样例

让我们从一个页面开始，该页面具有一个带有单个要素图层的地图。请注意showLabels构造函数选项。必须将其设置为 true 才能正确放置所有标签。下面的代码还通过创建 SimpleRenderer 覆盖状态图层的默认符号系统：

                                        
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }
    </style>

    <script src="https://js.arcgis.com/3.39/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/geometry/Extent",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/TextSymbol",
        "esri/renderers/SimpleRenderer",
        "dojo/_base/Color"
      ], function(Map, Extent, FeatureLayer, SimpleLineSymbol, SimpleFillSymbol,
        TextSymbol, SimpleRenderer, Color) {
        // load the map centered on the United States
        var bbox = new Extent({"xmin":-1940058,"ymin":-814715,"xmax":1683105,"ymax":1446096,"spatialReference":{"wkid":102003}});
        map = new Map("map", {
          extent: bbox,
          showLabels : true //very important that this must be set to true!
        });

        var labelField = "STATE_NAME";

        // create a renderer for the states layer to override default symbology
        var statesColor = new Color("#666");
        var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5);
        var statesSymbol = new SimpleFillSymbol("solid", statesLine, null);
        var statesRenderer = new SimpleRenderer(statesSymbol);
        // create a feature layer to show country boundaries
        var statesUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
        var states = new FeatureLayer(statesUrl, {
          id: "states",
          outFields: ["*"]
        });
        states.setRenderer(statesRenderer);
        map.addLayer(states);
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

3 加载 LabelClass 依赖模块

LabelClass 的模块标识符是esri/layers/LabelClass，首选参数别名是LabelClass。将模块 ID 添加到依赖项列表，并将参数别名添加到 require 回调

                                        
require([
  "esri/map",
  "esri/geometry/Extent",
  "esri/layers/FeatureLayer",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/TextSymbol",
  "esri/renderers/SimpleRenderer",
  "esri/layers/LabelClass",
  "dojo/_base/Color"
], function(Map, Extent, FeatureLayer, SimpleLineSymbol, SimpleFillSymbol,
  TextSymbol, SimpleRenderer, LabelClass, Color) {

4 标注要素图层

在创建地图的代码之后，添加以下代码以创建用于州标签的文本符号，使用文本符号作为LabelClass.symbol

                                        
// create a text symbol to define the style of labels
var statesLabel = new TextSymbol().setColor(statesColor);
statesLabel.font.setSize("14pt");
statesLabel.font.setFamily("arial");

5 创建标签类

创建文本符号后。需要创建一个LabelClass. 可以在此处指定定义要素图层标注的所有属性。首先创建一个 JSON 对象，其中包含你在创建此 LabelClass 实例时希望传入的任何属性。尽管创建的文本符号应用于此类，但也可以直接在 JSON 本身中设置。

                                        
//Create a JSON object which contains the labeling properties. At the very least, specify which field to label using the labelExpressionInfo property. Other properties can also be specified such as whether to work with coded value domains, fieldinfos (if working with dates or number formatted fields, and even symbology if not specified as above)
var json = {
  "labelExpressionInfo": {"value": "{STATE_NAME}"}
};
//create instance of LabelClass (note: multiple LabelClasses can also be passed in as an array)
var labelClass = new LabelClass(json);
labelClass.symbol = statesLabel; // symbol also can be set in LabelClass' json

6 将 labelingInfo 应用到 States 要素图层并添加到地图

最后，需要setLabelingInfo使用上面创建的 LabelClass设置要素图层的方法。设置好后，将图层添加到地图中。除了上面指定的标签之外，你现在应该看到呈现的 States 要素图层。

                                        
states.setLabelingInfo([ labelClass ]);
map.addLayer(states);

上一篇:ArcGIS API For JavaScrip入门 (7)-写一个类

下一篇:ArcGIS API For JavaScrip入门 (5)-搜索部件

浏览热榜: