Following on from the previous basic layer creation, this article focuses on creating geometric shapes using Graphic and Layers /GraphicsLayer.

Graphic class

A Graphic class contains four basic parameters: an geometer, a Symbol,attribute, and infoTemplate.

  • Attributes: Value of an attribute field
  • Geometry: Defines a geometric figure
  • InfoTemplate: The content displayed in the infoWindow
  • Symbol: The style of a graphic
  • Visible: Indicates the visibility of a graph

The module reference

  • Add layers/GraphicsLayer and Graphic classes to the base layer:
  • A Graphic is used to create a Graphic, and Grpaphic can only be displayed in a GraphicsLayer object, that is, listening on the GraphicLayer for a Graphic object.
require([
      "esri/Map"."esri/views/MapView"."esri/Graphic"."esri/layers/GraphicsLayer"].function(Map, MapView, Graphic, GraphicsLayer) {}
Copy the code

Define graph (point)

Var point = {var point = {type: "point", longitude: 104, latitude: 30 }; // Point style attribute var simpleMarkerSymbol = {type: "simple-marker",
         color: [226, 119, 40],  // orange
         outline: {
           color: [255, 255, 255], // white
           width: 1
         }
       };
       
       var pointGraphic = new Graphic({
         geometry: point,
         symbol: simpleMarkerSymbol
       });
Copy the code
  • Create graphics from a Graphic instance
  • Listen to a Graphic object through the GraphicLayer.
    var graphicsLayer = new GraphicsLayer();
    graphicsLayer.add(pointGraphic);
Copy the code
  • Add ()** map.add()**map.add(graphicsLayer)

Complete code and renderings

require([
        "esri/Map"."esri/views/MapView"."esri/Graphic"."esri/layers/GraphicsLayer"].function(Map, MapView, Graphic, GraphicsLayer) {
  
      var map = new Map({
        basemap: "satellite", //light-gray-vector, dark-gray-vector, satellite, streets-relief-vector, and streets-navigation-vector}); var view = new MapView({ container:"viewDiv", map: map, center: [104, 30.02700], // longitude, latitude zoom: 13}); var point = {type: "point",
         longitude: 104,
         latitude: 30
       };
       var simpleMarkerSymbol = {
         type: "simple-marker",
         color: [226, 119, 40],  // orange
         outline: {
           color: [255, 255, 255], // white
           width: 1
         }
       };


        var pointGraphic = new Graphic({
          geometry: point,
          symbol: simpleMarkerSymbol
        });
        graphicsLayer.add(pointGraphic);
        map.add(graphicsLayer);
    });
Copy the code

Line drawing

Immediately after the drawing point, the line is much simpler

  • Define line and simpleLineSymbol objects
        var simpleLineSymbol = {
         type: "simple-line",
         color: [226, 119, 40], // orange
         width: 2
       };

       var polyline = {
         type: "polyline",
         paths: [
           [104, 30],
           [114, 30],
           [124, 30]
         ]
       };
Copy the code
  • Create a Graphic instance and listen to a Graphic
    var polylineGraphic = new Graphic({
          geometry: polyline,
          symbol: simpleLineSymbol
        });
    graphicsLayer.add(polylineGraphic);
    map.add(graphicsLayer);
Copy the code
  • Effect:

Add polygons

By adding dots and lines, you can see that the difference between the shapes is mainly based on the type, so polygons can be completed by simply changing their type

var polygon = {
         type: "polygon", rings: [[-118.818984489994, 34.0137559967283], [-118.806796597377, 34.0215816298725], [-118.791432890735, 34.0163883241613], [-118.79596686535, 34.008564864635], [-118.808558110679, 34.0035027131376]]}; var simpleFillSymbol = {type: "simple-fill"Color: [227, 139, 79, 0.8], // orange, opacity 80% : {color: [255, 255, 255], width: 1}}; var polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic);Copy the code

In general, the addition of graphics is undoubtedly the use of APIS and classes. This video needs to focus on Graphic and GraphicsLayer