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。