JavaScript ArcGIS GraphicsLayer用法及代码示例

AMD: require(["esri/layers/GraphicsLayer"], (GraphicsLayer) => { /* code goes here */ });

ESM: import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";

类： esri/layers/GraphicsLayer

继承: GraphicsLayer > Layer > Accessor

自从：用于 JavaScript 4.0 的 ArcGIS API

GraphicsLayer 包含一个或多个客户端 Graphics 。 GraphicsLayer 中的每个图形都在 SceneView 或 MapView 内的 LayerView 中渲染。图形包含代表real-world现象的离散向量geometries。

与 FeatureLayer 和 MapImageLayer 不同，GraphicsLayer 没有架构。因此，构成GraphicsLayer 的图形可能具有不止一种几何类型(points、lines 或polygons)。每个图形都必须有自己的符号，因为 GraphicsLayer 不能有关联的渲染器。图形也可能包含彼此不同的属性模式。

可以通过多种方式将图形添加到GraphicsLayer 的实例中。它们可以通过add()方法添加，直接在构造函数中的图形属性上添加，或者在创建实例之后添加。使用Map.add() 将GraphicsLayer 添加到Map 实例。

require(["esri/layers/GraphicsLayer", "esri/Graphic"], function(GraphicsLayer, Graphic){
  // Create graphics
  let graphicA = new Graphic({  // graphic with line geometry
    geometry: new Polyline({...}), // set geometry here
    symbol: new SimpleLineSymbol({...}) // set symbol here
  });
  let graphicB = new Graphic({  // graphic with point geometry
    geometry: new Point({...}), // set geometry here
    symbol: new SimpleMarkerSymbol({...}) // set symbol here
  });
  let graphicC = new Graphic({  // graphic with polygon geometry
    geometry: new Polygon({...}), // set geometry here
    symbol: new SimpleFillSymbol({...}) // set symbol here
  });
  let graphicD = new Graphic();
  let graphicE = new Graphic();

  // Add graphic when GraphicsLayer is constructed
  let layer = new GraphicsLayer({
    graphics: [graphicA]
  });

  // Add graphic to graphics collection
  layer.graphics.add(graphicB);

  // Add graphic using add()
  layer.add(graphicC);
  layer.addMany([graphicD, graphicE]);

  // Add graphics using push method graphics collection
  layer.graphics.push(graphic1, graphic2);

  // Add GraphicsLayer to map
  map.add(layer);
});

MapView 和 SceneView 每个都包含一个 graphics collection，可以用来代替 GraphicsLayer。