nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Buffer Graphic

jaykapalczynski

I have some code below that i am using to allow the user to create a point line or polygon

Each click of the toolbox to chose between each geometry type clears the graphic layer.

What I want to do is:

After the geometry is drawn

Buffer the graphic and write that geometry to another graphic and display it in the map.
I will then need to query for the new graphics geometry and pass this to another function for processing

I have a DIV that has the current text for the graphic but I figured it might be better to query the graphic and determine the geometry type?
Do I need to select the single graphic in the graphic layer?

Thoughts on the easiest way to do this?

Snip from a JSFiddle I was testing in:

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Draw polyline | Sample | ArcGIS API for JavaScript 4.24</title>

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

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      .topcorner{
        position:absolute;
        top:0;
        right:0;
        width: 185px;
        border: 1px solid black;
        text-align: center;
      }
      .topcorner2{
        position:absolute;
        bottom:0;
        right:0;
        width: 185px;
        border: 1px solid black;
        text-align: center;
      }
      </style>
    <script>
  require([
    "esri/Map","esri/views/MapView","esri/views/draw/Draw","esri/Graphic","esri/geometry/geometryEngine","esri/geometry/support/webMercatorUtils",
      "dojo/dom",
      "dojo/domReady!"
  ], (Map, MapView, Draw, Graphic, geometryEngine, webMercatorUtils, dom) => {
  
    var geometryType = "nothing"
  
  
    const map = new Map({
      basemap: "gray-vector"
    });

    const view = new MapView({
      container: "viewDiv",map: map,
      zoom: 10,
      center: [-77.367, 37.55]
    });

    // add the button for the draw tool
    view.ui.add("clear-button", "top-left");
    view.ui.add("line-button", "top-left");
    view.ui.add("point-button", "top-left");
    view.ui.add("polygon-button", "top-left");
    
    const draw = new Draw({
      view: view
    });

    document.getElementById("clear-button").onclick = () => {
      view.graphics.removeAll();    
      geometryType = "nothing";
      document.getElementById("info2").textContent=geometryType;
   };
    document.getElementById("point-button").onclick = () => {
      view.graphics.removeAll();

      geometryType = "point";
      document.getElementById("info2").textContent=geometryType;
      
      // creates and returns an instance of PolyLineDrawAction
      const action = draw.create("point");

      // focus the view to activate keyboard shortcuts for sketching
      view.focus();

     // PointDrawAction.cursor-update
      // Give a visual feedback to users as they move the pointer over the view
      action.on("cursor-update", function (evt) {
        updateVerticesPoint(evt.coordinates);
      });

      // PointDrawAction.draw-complete
      // Create a point when user clicks on the view or presses "C" key.
      action.on("draw-complete", function (evt) {
        updateVerticesPoint(evt.coordinates);
      });
     
    };
    document.getElementById("polygon-button").onclick = () => {
      view.graphics.removeAll();
      
      geometryType = "polygon";
      document.getElementById("info2").textContent=geometryType;
      
      // creates and returns an instance of PolyLineDrawAction
      const action = draw.create("polygon");

      // focus the view to activate keyboard shortcuts for sketching
      view.focus();

      // listen polylineDrawAction events to give immediate visual feedback
      // to users as the line is being drawn on the view.
      action.on(
        [
          "vertex-add",
          "vertex-remove",
          "cursor-update",
          "redo",
          "undo",
          "draw-complete"
        ],
        updateVerticesPolygon
      );
    };
    document.getElementById("line-button").onclick = () => {
      view.graphics.removeAll();

      geometryType = "line";
      document.getElementById("info2").textContent=geometryType;
      
      // creates and returns an instance of PolyLineDrawAction
      const action = draw.create("polyline");

      // focus the view to activate keyboard shortcuts for sketching
      view.focus();

      // listen polylineDrawAction events to give immediate visual feedback
      // to users as the line is being drawn on the view.
      action.on(
        [
          "vertex-add",
          "vertex-remove",
          "cursor-update",
          "redo",
          "undo",
          "draw-complete"
        ],
        updateVerticesLine
      );
    };

    // https://developers.arcgis.com/javascript/latest/esri-icon-font/
    
    function updateVerticesPoint(coordinates) {
      //// create a polyline from returned vertices
      //if (event.vertices.length > 0) {
      //  const result = createGraphicPoint(event);
      //}
      view.graphics.removeAll();
     let point = {
       type: "point", // autocasts as /Point
       x: coordinates[0],
       y: coordinates[1],
       spatialReference: view.spatialReference
     };

     let graphic = new Graphic({
         geometry: point,
         symbol: {
         type: "simple-marker", // autocasts as SimpleMarkerSymbol
         style: "circle",
         color: [51, 102, 153, 0.8],
         size: "16px",
         outline: { // autocasts as SimpleLineSymbol
           color: [0, 0, 0],
           width: 1
         }
       }
     });
     view.graphics.add(graphic);     
    }  
    function updateVerticesPolygon(event) {
      // create a polyline from returned vertices
      if (event.vertices.length > 1) {
        const result = createGraphicPolygon(event);
      }
    }
    function updateVerticesLine(event) {
      // create a polyline from returned vertices
      if (event.vertices.length > 1) {
        const result = createGraphicLine(event);

        // if the last vertex is making the line intersects itself,
        // prevent the events from firing
        if (result.selfIntersects) {
          event.preventDefault();
        }
      }
    }

    
    function createGraphicPoint(event) {      
      const vertices = event.vertices;
      view.graphics.removeAll();

      //          
      // a graphic representing the polyline that is being drawn
      const graphicPoly = new Graphic({
        geometry: {
          type: "point",
          spatialReference: view.spatialReference
        },
        symbol: {
          type: "simple-marker", // autocasts as new SimpleFillSymbol
          color: [51, 102, 153, 0.8],
          outline: {
             color: [255, 255, 255],
             width: 1
          }
        }

      });
     
      view.graphics.add(graphicPoly);
    }
    function createGraphicPolygon(event) {
      const vertices = event.vertices;
      view.graphics.removeAll();

      // a graphic representing the polyline that is being drawn
      const graphicPoly = new Graphic({
        geometry: {
          type: "polygon",
          rings: vertices,
          spatialReference: view.spatialReference
        },
        symbol: {
          type: "simple-fill", // autocasts as new SimpleFillSymbol
          color: [227, 139, 79, 0.8],
          outline: {
             color: [45, 55, 255],
             width: 1
          }
        }

      });
     
      view.graphics.add(graphicPoly);
    }
    function createGraphicLine(event) {
      const vertices = event.vertices;
      view.graphics.removeAll();

      // a graphic representing the polyline that is being drawn
      const graphicLine = new Graphic({
        geometry: {
          type: "polyline",
          paths: vertices,
          spatialReference: view.spatialReference
        },
        symbol: {
          type: "simple-line", // autocasts as new SimpleFillSymbol
          color: [4, 90, 141],
          width: 1,
          cap: "round",
          join: "round"
        }
      });

      // check if the polyline intersects itself.
      const intersectingSegment = getIntersectingSegment(graphicLine.geometry);

      // Add a new graphic for the intersecting segment.
      if (intersectingSegment) {
        view.graphics.addMany([graphicLine, intersectingSegment]);
      }
      // Just add the graphic representing the polyline if no intersection
      else {
        view.graphics.add(graphicLine);
      }

      // return intersectingSegment
      return {
        selfIntersects: intersectingSegment
      };
    }

    // function that checks if the line intersects itself
    function isSelfIntersecting(polyline) {
      if (polyline.paths[0].length < 3) {
        return false;
      }
      const line = polyline.clone();

      //get the last segment from the polyline that is being drawn
      const lastSegment = getLastSegment(polyline);
      line.removePoint(0, line.paths[0].length - 1);

      // returns true if the line intersects itself, false otherwise
      return geometryEngine.crosses(lastSegment, line);
    }
    // Checks if the line intersects itself. If yes, change the last
    // segment's symbol giving a visual feedback to the user.
    function getIntersectingSegment(polyline) {
      if (isSelfIntersecting(polyline)) {
        return new Graphic({
          geometry: getLastSegment(polyline),
          symbol: {
            type: "simple-line", // autocasts as new SimpleLineSymbol
            style: "short-dot",
            width: 3.5,
            color: "yellow"
          }
        });
      }
      return null;
    }
    // Get the last segment of the polyline that is being drawn
    function getLastSegment(polyline) {
      const line = polyline.clone();
      const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
      const existingLineFinalPoint = line.getPoint(
        0,
        line.paths[0].length - 1
      );

      return {
        type: "polyline",
        spatialReference: view.spatialReference,
        hasZ: false,
        paths: [
          [
            [existingLineFinalPoint.x, existingLineFinalPoint.y],
            [lastXYPoint.x, lastXYPoint.y]
          ]
        ]
      };
    }
 
       function showCoordinates(evt) {
        var point = view.toMap({x: evt.x, y: evt.y});
        //the map is in web mercator but display coordinates in geographic (lat, long)
        var mp = webMercatorUtils.webMercatorToGeographic(point);
        //display mouse coordinates
        dom.byId("info").innerHTML = mp.x.toFixed(6) + ", " + mp.y.toFixed(6);
      }

      view.when(function(){
        //after map loads, connect to listen to mouse move & drag events
        view.on("pointer-move", showCoordinates);
      });
 
 });
</script>
  </head>

  <body>
    <!-- https://developers.arcgis.com/javascript/latest/esri-icon-font/ -->
    <div id="viewDiv">
      <div id="clear-button" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
        <span class="esri-icon-erase"></span>           
      </div> 
      <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Draw point">
        <span class="esri-icon-map-pin"></span>           
      </div> 
      <div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polyline">
        <span class="esri-icon-polyline"></span>           
      </div>
      <div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
        <span class="esri-icon-polygon"></span>   
      </div>   
  
      <div class="topcorner">
         <span id="info" ></span>     
      </div>      
      <div class="topcorner2">
         <div id="info2">fghfghf</div>     
      </div>               
    </div>
  </body>
</html>

タグ付けされた投稿をもっと見る

Accepted answers

RobertScheitlin__GISP

Jay, So here is what I would do.

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Draw polyline | Sample | ArcGIS API for JavaScript 4.24</title>

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

  <style>
    html,
    body,
    #viewDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .topcorner {
      position: absolute;
      top: 0;
      right: 0;
      width: 185px;
      border: 1px solid black;
      text-align: center;
    }

    .topcorner2 {
      position: absolute;
      bottom: 16;
      right: 0;
      width: 185px;
      border: 1px solid black;
      text-align: center;
    }
  </style>
  <script>
    require([
      "esri/Map", "esri/views/MapView", "esri/views/draw/Draw", "esri/Graphic", "esri/geometry/geometryEngine",
      "esri/geometry/support/webMercatorUtils",
      "esri/layers/GraphicsLayer",
      "dojo/dom",
      "dojo/domReady!"
    ], (Map, MapView, Draw, Graphic, geometryEngine, webMercatorUtils, GraphicsLayer, dom) => {

      var geometryType = "nothing"
      let bufferGralayer = new GraphicsLayer({id: "BufferGraLyr"});

      const map = new Map({
        basemap: "gray-vector",
        layers: [bufferGralayer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 10,
        center: [-77.367, 37.55]
      });

      // add the button for the draw tool
      view.ui.add("clear-button", "top-left");
      view.ui.add("line-button", "top-left");
      view.ui.add("point-button", "top-left");
      view.ui.add("polygon-button", "top-left");

      const draw = new Draw({
        view: view
      });

      document.getElementById("clear-button").onclick = () => {
        view.graphics.removeAll();
        bufferGralayer.removeAll();
        geometryType = "nothing";
        document.getElementById("info2").textContent = geometryType;
      };
      document.getElementById("point-button").onclick = () => {
        view.graphics.removeAll();

        geometryType = "point";
        document.getElementById("info2").textContent = geometryType;

        // creates and returns an instance of PolyLineDrawAction
        const action = draw.create("point");

        // focus the view to activate keyboard shortcuts for sketching
        view.focus();

        // PointDrawAction.cursor-update
        // Give a visual feedback to users as they move the pointer over the view
        action.on("cursor-update", function (evt) {
          updateVerticesPoint(evt.coordinates);
        });

        // PointDrawAction.draw-complete
        // Create a point when user clicks on the view or presses "C" key.
        action.on("draw-complete", function (evt) {
          updateVerticesPoint(evt.coordinates);
        });

      };
      document.getElementById("polygon-button").onclick = () => {
        view.graphics.removeAll();

        geometryType = "polygon";
        document.getElementById("info2").textContent = geometryType;

        // creates and returns an instance of PolyLineDrawAction
        const action = draw.create("polygon");

        // focus the view to activate keyboard shortcuts for sketching
        view.focus();

        // listen polylineDrawAction events to give immediate visual feedback
        // to users as the line is being drawn on the view.
        action.on(
          [
            "vertex-add",
            "vertex-remove",
            "cursor-update",
            "redo",
            "undo",
            "draw-complete"
          ],
          updateVerticesPolygon
        );
      };
      document.getElementById("line-button").onclick = () => {
        view.graphics.removeAll();

        geometryType = "line";
        document.getElementById("info2").textContent = geometryType;

        // creates and returns an instance of PolyLineDrawAction
        const action = draw.create("polyline");

        // focus the view to activate keyboard shortcuts for sketching
        view.focus();

        // listen polylineDrawAction events to give immediate visual feedback
        // to users as the line is being drawn on the view.
        action.on(
          [
            "vertex-add",
            "vertex-remove",
            "cursor-update",
            "redo",
            "undo",
            "draw-complete"
          ],
          updateVerticesLine
        );
      };

      // https://developers.arcgis.com/javascript/latest/esri-icon-font/

      function updateVerticesPoint(coordinates) {
        //// create a polyline from returned vertices
        //if (event.vertices.length > 0) {
        //  const result = createGraphicPoint(event);
        //}
        view.graphics.removeAll();
        let point = {
          type: "point", // autocasts as /Point
          x: coordinates[0],
          y: coordinates[1],
          spatialReference: view.spatialReference
        };

        let graphic = new Graphic({
          geometry: point,
          symbol: {
            type: "simple-marker", // autocasts as SimpleMarkerSymbol
            style: "circle",
            color: [51, 102, 153, 0.8],
            size: "16px",
            outline: { // autocasts as SimpleLineSymbol
              color: [0, 0, 0],
              width: 1
            }
          }
        });
        view.graphics.add(graphic);
        BufferGeom(graphic.geometry, 500);
      }

      function updateVerticesPolygon(event) {
        // create a polyline from returned vertices
        if (event.vertices.length > 1) {
          const result = createGraphicPolygon(event);
        }
      }

      function updateVerticesLine(event) {
        // create a polyline from returned vertices
        if (event.vertices.length > 1) {
          const result = createGraphicLine(event);

          // if the last vertex is making the line intersects itself,
          // prevent the events from firing
          if (result.selfIntersects) {
            event.preventDefault();
          }
        }
      }


      function createGraphicPoint(event) {
        const vertices = event.vertices;
        view.graphics.removeAll();

        //          
        // a graphic representing the polyline that is being drawn
        const graphicPnt= new Graphic({
          geometry: {
            type: "point",
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-marker", // autocasts as new SimpleFillSymbol
            color: [51, 102, 153, 0.8],
            outline: {
              color: [255, 255, 255],
              width: 1
            }
          }

        });

        view.graphics.add(graphicPnt);
        BufferGeom(graphicPnt.geometry, 500);
      }

      function createGraphicPolygon(event) {
        const vertices = event.vertices;
        view.graphics.removeAll();

        // a graphic representing the polyline that is being drawn
        const graphicPoly = new Graphic({
          geometry: {
            type: "polygon",
            rings: vertices,
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-fill", // autocasts as new SimpleFillSymbol
            color: [227, 139, 79, 0.8],
            outline: {
              color: [45, 55, 255],
              width: 1
            }
          }

        });

        view.graphics.add(graphicPoly);
        BufferGeom(graphicPoly.geometry, 500);
      }

      function createGraphicLine(event) {
        const vertices = event.vertices;
        view.graphics.removeAll();

        // a graphic representing the polyline that is being drawn
        const graphicLine = new Graphic({
          geometry: {
            type: "polyline",
            paths: vertices,
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-line", // autocasts as new SimpleFillSymbol
            color: [4, 90, 141],
            width: 1,
            cap: "round",
            join: "round"
          }
        });

        // check if the polyline intersects itself.
        const intersectingSegment = getIntersectingSegment(graphicLine.geometry);

        // Add a new graphic for the intersecting segment.
        if (intersectingSegment) {
          view.graphics.addMany([graphicLine, intersectingSegment]);
        }
        // Just add the graphic representing the polyline if no intersection
        else {
          view.graphics.add(graphicLine);
          BufferGeom(graphicLine.geometry, 500);
        }

        // return intersectingSegment
        return {
          selfIntersects: intersectingSegment
        };
      }

      function BufferGeom(geom, dist) {
        const buffGeom = geometryEngine.buffer(geom, dist, "feet");
        const buffgra = new Graphic({
          geometry: buffGeom,
          symbol: getGeomSymbol()
        });
        bufferGralayer.removeAll();
        bufferGralayer.add(buffgra)
      }

      function getGeomSymbol() {
        let sym;
        switch(geometryType) {
          case "point":
            sym = {
              style: "circle",
              size: 22,
              type: "simple-marker",
              color: [255, 0, 0, 0.8],
              outline: {
                color: [255, 0, 0],
                width: 1
              }
            }
            break;
          case "line":
          case "polygon":
            sym = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol
              color: [255, 0, 0],
              width: 1,
              cap: "round",
              join: "round"
            }
            break;
          default :
            sym = null;
        }
        return sym;
      }

      // function that checks if the line intersects itself
      function isSelfIntersecting(polyline) {
        if (polyline.paths[0].length < 3) {
          return false;
        }
        const line = polyline.clone();

        //get the last segment from the polyline that is being drawn
        const lastSegment = getLastSegment(polyline);
        line.removePoint(0, line.paths[0].length - 1);

        // returns true if the line intersects itself, false otherwise
        return geometryEngine.crosses(lastSegment, line);
      }

      // Checks if the line intersects itself. If yes, change the last
      // segment's symbol giving a visual feedback to the user.
      function getIntersectingSegment(polyline) {
        if (isSelfIntersecting(polyline)) {
          return new Graphic({
            geometry: getLastSegment(polyline),
            symbol: {
              type: "simple-line", // autocasts as new SimpleLineSymbol
              style: "short-dot",
              width: 3.5,
              color: "yellow"
            }
          });
        }
        return null;
      }
      // Get the last segment of the polyline that is being drawn
      function getLastSegment(polyline) {
        const line = polyline.clone();
        const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
        const existingLineFinalPoint = line.getPoint(
          0,
          line.paths[0].length - 1
        );

        return {
          type: "polyline",
          spatialReference: view.spatialReference,
          hasZ: false,
          paths: [
            [
              [existingLineFinalPoint.x, existingLineFinalPoint.y],
              [lastXYPoint.x, lastXYPoint.y]
            ]
          ]
        };
      }

      function showCoordinates(evt) {
        var point = view.toMap({
          x: evt.x,
          y: evt.y
        });
        //the map is in web mercator but display coordinates in geographic (lat, long)
        var mp = webMercatorUtils.webMercatorToGeographic(point);
        //display mouse coordinates
        dom.byId("info").innerHTML = mp.x.toFixed(6) + ", " + mp.y.toFixed(6);
      }

      view.when(function () {
        //after map loads, connect to listen to mouse move & drag events
        view.on("pointer-move", showCoordinates);
      });

    });
  </script>
</head>

<body>
  <!-- https://developers.arcgis.com/javascript/latest/esri-icon-font/ -->
  <div id="viewDiv">
    <div id="clear-button" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
      <span class="esri-icon-erase"></span>
    </div>
    <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Draw point">
      <span class="esri-icon-map-pin"></span>
    </div>
    <div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polyline">
      <span class="esri-icon-polyline"></span>
    </div>
    <div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
      <span class="esri-icon-polygon"></span>
    </div>

    <div class="topcorner">
      <span id="info"></span>
    </div>
    <div class="topcorner2">
      <div id="info2">fghfghf</div>
    </div>
  </div>
</body>

</html>

All comments

jaykapalczynski

@RobertScheitlin__GISP

Cool I like the timeout draw-complete showing the Geometry JSON Results being displayed..
Yea the initial code I submitted had an issue with the Point not buffering properly. It was all down to the Variable set up for "geometryType"
Other changes to the text reporting as well were done well...

Cheers and thanks for your input.... learn more and more every day....

RobertScheitlin__GISP

@jaykapalczynski

Here are my updates to your code UI wise has a bunch of updates to how things are styled and placed. Functionally the point method was not rendering the proper buffer visualization on the screen due to the improper symbol style being used and because the map is in webmercator the geometryEngine method should be geodesicBuffer and not buffer (my mistake there).

<html>

<head>
  <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
  <title>Buffer Geometry</title>

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

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .flex-container {
      height: 100%;
      display: flex;
      overflow: hidden;
    }

    #viewDiv {
      flex: 2;
      padding: 0;
      margin: 0;
    }

    .side-panel {
      padding: 1em;
      overflow: auto;
    }

    .FixedHeightContainer {
      float: left;
      height: 380px;
      width: 230px;
      padding: 3px;
      background: rgb(112, 128, 144, 0.5);
    }

    #info {
      min-height: 17px;
    }

    .header {
      height: 30px;
      padding-top: 5px;
    }

    .geometryResultsdiv {
      height: 345px;
      overflow: auto;
      background: #fff;
      font-size: 8px;
    }

    .menu {
      display: table;
      width: 100%;
      border: 1px solid black;
      border-right: none;
      box-sizing: border-box;
    }

    .menu>div {
      display: table-row;
      background-color: white;
    }

    .menu>div>div {
      border-right: 1px solid black;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    @media screen and (max-width: 240px) {
      .menu {
        display: block;
        float: left;
        width: auto;
        border: none;
      }

      .menu>div {
        display: block;
      }

      .menu>div>div {
        border: none;
        padding-right: 10px;
        display: block;
        text-align: left;
      }
    }

    .boxpadding {
      margin: 8px 0;
    }

    .float-container {
      display: flex;
      padding: 2px;
      gap: 8px;
      margin: 8px 0;
    }

    .float-child1 {
      flex: 1;
    }

    .float-child2 {
      flex: 2;
    }
  </style>
  <script>
    function valDistance() {
      d = document.getElementById("distance").value;
      document.getElementById("infoDistance").textContent = "Distance: " + d;
    }

    function valType() {
      t = document.getElementById("distanceType").value;
      document.getElementById("infoType").textContent = "Type: " + t;
    }

    require([
      "esri/Map", "esri/views/MapView", "esri/views/draw/Draw", "esri/Graphic", "esri/geometry/geometryEngine",
      "esri/geometry/support/webMercatorUtils",
      "esri/layers/GraphicsLayer"
    ], (Map, MapView, Draw, Graphic, geometryEngine, webMercatorUtils, GraphicsLayer) => {

      var geometryType = "No Geometry Selected"
      let bufferGralayer = new GraphicsLayer({
        id: "BufferGraLyr",
      });
      bufferGralayer.opacity = 0.5;

      const map = new Map({
        basemap: "gray-vector",
        layers: [bufferGralayer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 10,
        center: [-77.367, 37.55]
      });

      const draw = new Draw({
        view: view
      });

      // THIS IS FOR THE BUTTONS IN THE SIDE BAR
      document.getElementById("clear-button2").onclick = () => {
        view.graphics.removeAll();
        bufferGralayer.removeAll();
        geometryType = "No Geometry Selected";
        document.getElementById("info2").textContent = geometryType;
        document.getElementById("geometryResultsdiv").textContent = "";
      };

      document.getElementById("point-button2").onclick = () => {
        view.graphics.removeAll();
        bufferGralayer.removeAll();
        document.getElementById("geometryResultsdiv").innerText = "";
        geometryType = "point";
        document.getElementById("info2").textContent = "Geometry: " + geometryType;
        const action = draw.create("point");
        view.focus();
        action.on("cursor-update", function (evt) {
          updateVerticesPoint(evt.coordinates);
        });
        action.on("draw-complete", function (evt) {
          updateVerticesPoint(evt.coordinates);
          setTimeout(() => {
            document.getElementById("geometryResultsdiv").innerText = JSON.stringify(bufferGralayer.graphics.items[0].geometry);
          }, 200);
        });
      };

      document.getElementById("polygon-button2").onclick = () => {
        view.graphics.removeAll();
        bufferGralayer.removeAll();
        document.getElementById("geometryResultsdiv").innerText = "";
        geometryType = "polygon";
        document.getElementById("info2").textContent = "Geometry: " + geometryType;
        const action = draw.create("polygon");
        view.focus();
        action.on(
          [
            "vertex-add",
            "vertex-remove",
            "cursor-update",
            "redo",
            "undo",
            "draw-complete"
          ],
          updateVerticesPolygon
        );
      };

      document.getElementById("line-button2").onclick = () => {
        view.graphics.removeAll();
        bufferGralayer.removeAll();
        document.getElementById("geometryResultsdiv").innerText = "";
        geometryType = "line";
        document.getElementById("info2").textContent = "Geometry: " + geometryType;
        const action = draw.create("polyline");
        view.focus();
        action.on(
          [
            "vertex-add",
            "vertex-remove",
            "cursor-update",
            "redo",
            "undo",
            "draw-complete"
          ],
          updateVerticesLine
        );
      };

      function updateVerticesPoint(coordinates) {
        //// create a polyline from returned vertices
        view.graphics.removeAll();
        let point = {
          type: "point", // autocasts as /Point
          x: coordinates[0],
          y: coordinates[1],
          spatialReference: view.spatialReference
        };

        let graphic = new Graphic({
          geometry: point,
          symbol: {
            type: "simple-marker", // autocasts as SimpleMarkerSymbol
            style: "circle",
            size: "16px",
            color: [70, 90, 141, 0.4],
            outline: {
              color: [47, 76, 119, 0.5],
              width: 1
            }
          }
        });
        view.graphics.add(graphic);
        BufferGeom(graphic.geometry);
      }

      function updateVerticesPolygon(event) {
        // create a polyline from returned vertices
        if (event.vertices.length > 1) {
          const result = createGraphicPolygon(event);
        }
        if(event.type === 'draw-complete'){
          setTimeout(() => {
            document.getElementById("geometryResultsdiv").innerText = JSON.stringify(bufferGralayer.graphics.items[0].geometry);
          }, 200);
        }
      }

      function updateVerticesLine(event) {
        // create a polyline from returned vertices
        if (event.vertices.length > 1) {
          const result = createGraphicLine(event);

          // if the last vertex is making the line intersects itself,
          // prevent the events from firing
          if (result.selfIntersects) {
            event.preventDefault();
          }
        }
        if(event.type === 'draw-complete'){
          setTimeout(() => {
            document.getElementById("geometryResultsdiv").innerText = JSON.stringify(bufferGralayer.graphics.items[0].geometry);
          }, 200);
        }
      }

      function createGraphicPoint(event) {
        const vertices = event.vertices;
        view.graphics.removeAll();

        // a graphic representing the polyline that is being drawn
        const graphicPnt = new Graphic({
          geometry: {
            type: "point",
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-marker", // autocasts as new SimpleFillSymbol
            color: [255, 255, 255, 0.9], //[70,90,141,0.2],
            opacity: 0.2,
            outline: {
              color: [255, 255, 255, 0.9], //[47,76,119, 0.2],
              width: 1
            }
          }

        });

        view.graphics.add(graphicPnt);
        BufferGeom(graphicPnt.geometry, 500);
      }

      function createGraphicPolygon(event) {
        const vertices = event.vertices;
        view.graphics.removeAll();

        // a graphic representing the polyline that is being drawn
        const graphicPoly = new Graphic({
          geometry: {
            type: "polygon",
            rings: vertices,
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-fill", // autocasts as new SimpleFillSymbol
            color: [70, 90, 141, 0.4],
            outline: {
              color: [47, 76, 119],
              width: 1
            }
          }
        });

        view.graphics.add(graphicPoly);
        BufferGeom(graphicPoly.geometry);
      }

      function createGraphicLine(event) {
        const vertices = event.vertices;
        view.graphics.removeAll();

        // a graphic representing the polyline that is being drawn
        const graphicLine = new Graphic({
          geometry: {
            type: "polyline",
            paths: vertices,
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-line", // autocasts as new SimpleFillSymbol
            color: [70, 90, 141, 0.4],
            width: 1,
            cap: "round",
            join: "round"
          }
        });

        // check if the polyline intersects itself.
        const intersectingSegment = getIntersectingSegment(graphicLine.geometry);

        // Add a new graphic for the intersecting segment.
        if (intersectingSegment) {
          view.graphics.addMany([graphicLine, intersectingSegment]);
        }
        // Just add the graphic representing the polyline if no intersection
        else {
          view.graphics.add(graphicLine);
          BufferGeom(graphicLine.geometry);
        }

        // return intersectingSegment
        return {
          selfIntersects: intersectingSegment
        };
      }

      function BufferGeom(geom) {
        var d = parseInt(document.getElementById("distance").value);
        var t = document.getElementById("distanceType").value;

        const buffGeom = geometryEngine.geodesicBuffer(geom, d, t);

        const buffgra = new Graphic({
          geometry: buffGeom,
          symbol: {
              type: "simple-fill", // autocasts as new SimpleFillSymbol
              color: [112, 128, 144],
              width: 1,
              cap: "round",
              join: "round"
            }
        });
        bufferGralayer.removeAll();
        bufferGralayer.add(buffgra);

        // document.getElementById("geometryResultsdiv").innerText = JSON.stringify(userDefinedGeometry);
      }

      // function that checks if the line intersects itself
      function isSelfIntersecting(polyline) {
        if (polyline.paths[0].length < 3) {
          return false;
        }
        const line = polyline.clone();

        //get the last segment from the polyline that is being drawn
        const lastSegment = getLastSegment(polyline);
        line.removePoint(0, line.paths[0].length - 1);

        // returns true if the line intersects itself, false otherwise
        return geometryEngine.crosses(lastSegment, line);
      }
      
      // Checks if the line intersects itself. If yes, change the last
      // segment's symbol giving a visual feedback to the user.
      function getIntersectingSegment(polyline) {
        if (isSelfIntersecting(polyline)) {
          return new Graphic({
            geometry: getLastSegment(polyline),
            symbol: {
              type: "simple-line", // autocasts as new SimpleLineSymbol
              style: "short-dot",
              width: 3.5,
              color: "yellow"
            }
          });
        }
        return null;
      }
      
      // Get the last segment of the polyline that is being drawn
      function getLastSegment(polyline) {
        const line = polyline.clone();
        const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
        const existingLineFinalPoint = line.getPoint(
          0,
          line.paths[0].length - 1
        );

        return {
          type: "polyline",
          spatialReference: view.spatialReference,
          hasZ: false,
          paths: [
            [
              [existingLineFinalPoint.x, existingLineFinalPoint.y],
              [lastXYPoint.x, lastXYPoint.y]
            ]
          ]
        };
      }

      function showCoordinates(evt) {
        var point = view.toMap({
          x: evt.x,
          y: evt.y
        });
        //the map is in web mercator but display coordinates in geographic (lat, long)
        var mp = webMercatorUtils.webMercatorToGeographic(point);
        //display mouse coordinates
        document.getElementById("info").innerHTML = mp.x.toFixed(6) + ", " + mp.y.toFixed(6);
      }

      view.when().then(() => {
        //after map loads, connect to listen to mouse move & drag events
        view.on("pointer-move", showCoordinates);
      });

    });
  </script>
</head>

<body>
  <div class="flex-container">
    <div id="viewDiv"></div>
    <div class="esri-widget side-panel">
      <div>
        <h2>Geometry Selection</h2>
        <span id="info"></span>
        <div class="float-container">
          <div class="float-child1">
            <div>Distance</div>
          </div>
          <div class="float-child2">
            <select name="distance" id="distance" onchange="valDistance()" style="width:75px;">
              <option value="1"> 1</option>
              <option value="2"> 2</option>
              <option value="3"> 3</option>
              <option value="5"> 5</option>
              <option value="10"> 10</option>
            </select>
          </div>
        </div>
        <div class="float-container">
          <div class="float-child1">
            <div>Unit</div>
          </div>
          <div class="float-child2">
            <select name="distanceType" id="distanceType" onchange="valType()" style="width:75px;">
              <option value="miles">mile(s)</option>
              <option value="feet">feet</option>
              <option value="meters">meter(s)</option>
            </select>
          </div>
        </div>
        <div class="boxpadding" id="infoDistance">Distance: 1</div>
        <div class="boxpadding" id="infoType">Unit: mile</div>
        <div class="menu">
          <div>
            <div id="clear-button2" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
              <span class="esri-icon-erase"></span>
            </div>
            <div id="point-button2" class="esri-widget esri-widget--button esri-interactive" title="Draw point">
              <span class="esri-icon-map-pin"></span>
            </div>
            <div id="line-button2" class="esri-widget esri-widget--button esri-interactive" title="Draw polyline">
              <span class="esri-icon-polyline"></span>
            </div>
            <div id="polygon-button2" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
              <span class="esri-icon-polygon"></span>
            </div>
          </div>
        </div>
        <div id="info2" class="boxpadding">Geometry:</div>
        <div class="FixedHeightContainer">
          <div class="header" id="header">Results</div>
          <div class="geometryResultsdiv" id="geometryResultsdiv"> </div>
        </div>
      </div>
    </div>
    
  </div>
</body>

</html>

RobertScheitlin__GISP

Jay, You are on the right tract with the distance and unit stuff. A far as querying the buffer graphic. Just get the graphic from the bufferGraLayer graphics property.

let buffGeom = bufferGraLayer.graphics[0].geometry;

Or just keep a global var of the buffGeom in your app from the BufferGeom function.

jaykapalczynski

Ok thanks...

One more question... How then do I query for the geometry of the buffered section... I need to get this geometry to pass onto a GP tool to do further processing...

I assume that I can query for the graphics in the new Graphics Layer that was created "bufferGraLayer"?

RobertScheitlin__GISP

Jay, So here is what I would do.

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Draw polyline | Sample | ArcGIS API for JavaScript 4.24</title>

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

  <style>
    html,
    body,
    #viewDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .topcorner {
      position: absolute;
      top: 0;
      right: 0;
      width: 185px;
      border: 1px solid black;
      text-align: center;
    }

    .topcorner2 {
      position: absolute;
      bottom: 16;
      right: 0;
      width: 185px;
      border: 1px solid black;
      text-align: center;
    }
  </style>
  <script>
    require([
      "esri/Map", "esri/views/MapView", "esri/views/draw/Draw", "esri/Graphic", "esri/geometry/geometryEngine",
      "esri/geometry/support/webMercatorUtils",
      "esri/layers/GraphicsLayer",
      "dojo/dom",
      "dojo/domReady!"
    ], (Map, MapView, Draw, Graphic, geometryEngine, webMercatorUtils, GraphicsLayer, dom) => {

      var geometryType = "nothing"
      let bufferGralayer = new GraphicsLayer({id: "BufferGraLyr"});

      const map = new Map({
        basemap: "gray-vector",
        layers: [bufferGralayer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 10,
        center: [-77.367, 37.55]
      });

      // add the button for the draw tool
      view.ui.add("clear-button", "top-left");
      view.ui.add("line-button", "top-left");
      view.ui.add("point-button", "top-left");
      view.ui.add("polygon-button", "top-left");

      const draw = new Draw({
        view: view
      });

      document.getElementById("clear-button").onclick = () => {
        view.graphics.removeAll();
        bufferGralayer.removeAll();
        geometryType = "nothing";
        document.getElementById("info2").textContent = geometryType;
      };
      document.getElementById("point-button").onclick = () => {
        view.graphics.removeAll();

        geometryType = "point";
        document.getElementById("info2").textContent = geometryType;

        // creates and returns an instance of PolyLineDrawAction
        const action = draw.create("point");

        // focus the view to activate keyboard shortcuts for sketching
        view.focus();

        // PointDrawAction.cursor-update
        // Give a visual feedback to users as they move the pointer over the view
        action.on("cursor-update", function (evt) {
          updateVerticesPoint(evt.coordinates);
        });

        // PointDrawAction.draw-complete
        // Create a point when user clicks on the view or presses "C" key.
        action.on("draw-complete", function (evt) {
          updateVerticesPoint(evt.coordinates);
        });

      };
      document.getElementById("polygon-button").onclick = () => {
        view.graphics.removeAll();

        geometryType = "polygon";
        document.getElementById("info2").textContent = geometryType;

        // creates and returns an instance of PolyLineDrawAction
        const action = draw.create("polygon");

        // focus the view to activate keyboard shortcuts for sketching
        view.focus();

        // listen polylineDrawAction events to give immediate visual feedback
        // to users as the line is being drawn on the view.
        action.on(
          [
            "vertex-add",
            "vertex-remove",
            "cursor-update",
            "redo",
            "undo",
            "draw-complete"
          ],
          updateVerticesPolygon
        );
      };
      document.getElementById("line-button").onclick = () => {
        view.graphics.removeAll();

        geometryType = "line";
        document.getElementById("info2").textContent = geometryType;

        // creates and returns an instance of PolyLineDrawAction
        const action = draw.create("polyline");

        // focus the view to activate keyboard shortcuts for sketching
        view.focus();

        // listen polylineDrawAction events to give immediate visual feedback
        // to users as the line is being drawn on the view.
        action.on(
          [
            "vertex-add",
            "vertex-remove",
            "cursor-update",
            "redo",
            "undo",
            "draw-complete"
          ],
          updateVerticesLine
        );
      };

      // https://developers.arcgis.com/javascript/latest/esri-icon-font/

      function updateVerticesPoint(coordinates) {
        //// create a polyline from returned vertices
        //if (event.vertices.length > 0) {
        //  const result = createGraphicPoint(event);
        //}
        view.graphics.removeAll();
        let point = {
          type: "point", // autocasts as /Point
          x: coordinates[0],
          y: coordinates[1],
          spatialReference: view.spatialReference
        };

        let graphic = new Graphic({
          geometry: point,
          symbol: {
            type: "simple-marker", // autocasts as SimpleMarkerSymbol
            style: "circle",
            color: [51, 102, 153, 0.8],
            size: "16px",
            outline: { // autocasts as SimpleLineSymbol
              color: [0, 0, 0],
              width: 1
            }
          }
        });
        view.graphics.add(graphic);
        BufferGeom(graphic.geometry, 500);
      }

      function updateVerticesPolygon(event) {
        // create a polyline from returned vertices
        if (event.vertices.length > 1) {
          const result = createGraphicPolygon(event);
        }
      }

      function updateVerticesLine(event) {
        // create a polyline from returned vertices
        if (event.vertices.length > 1) {
          const result = createGraphicLine(event);

          // if the last vertex is making the line intersects itself,
          // prevent the events from firing
          if (result.selfIntersects) {
            event.preventDefault();
          }
        }
      }


      function createGraphicPoint(event) {
        const vertices = event.vertices;
        view.graphics.removeAll();

        //          
        // a graphic representing the polyline that is being drawn
        const graphicPnt= new Graphic({
          geometry: {
            type: "point",
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-marker", // autocasts as new SimpleFillSymbol
            color: [51, 102, 153, 0.8],
            outline: {
              color: [255, 255, 255],
              width: 1
            }
          }

        });

        view.graphics.add(graphicPnt);
        BufferGeom(graphicPnt.geometry, 500);
      }

      function createGraphicPolygon(event) {
        const vertices = event.vertices;
        view.graphics.removeAll();

        // a graphic representing the polyline that is being drawn
        const graphicPoly = new Graphic({
          geometry: {
            type: "polygon",
            rings: vertices,
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-fill", // autocasts as new SimpleFillSymbol
            color: [227, 139, 79, 0.8],
            outline: {
              color: [45, 55, 255],
              width: 1
            }
          }

        });

        view.graphics.add(graphicPoly);
        BufferGeom(graphicPoly.geometry, 500);
      }

      function createGraphicLine(event) {
        const vertices = event.vertices;
        view.graphics.removeAll();

        // a graphic representing the polyline that is being drawn
        const graphicLine = new Graphic({
          geometry: {
            type: "polyline",
            paths: vertices,
            spatialReference: view.spatialReference
          },
          symbol: {
            type: "simple-line", // autocasts as new SimpleFillSymbol
            color: [4, 90, 141],
            width: 1,
            cap: "round",
            join: "round"
          }
        });

        // check if the polyline intersects itself.
        const intersectingSegment = getIntersectingSegment(graphicLine.geometry);

        // Add a new graphic for the intersecting segment.
        if (intersectingSegment) {
          view.graphics.addMany([graphicLine, intersectingSegment]);
        }
        // Just add the graphic representing the polyline if no intersection
        else {
          view.graphics.add(graphicLine);
          BufferGeom(graphicLine.geometry, 500);
        }

        // return intersectingSegment
        return {
          selfIntersects: intersectingSegment
        };
      }

      function BufferGeom(geom, dist) {
        const buffGeom = geometryEngine.buffer(geom, dist, "feet");
        const buffgra = new Graphic({
          geometry: buffGeom,
          symbol: getGeomSymbol()
        });
        bufferGralayer.removeAll();
        bufferGralayer.add(buffgra)
      }

      function getGeomSymbol() {
        let sym;
        switch(geometryType) {
          case "point":
            sym = {
              style: "circle",
              size: 22,
              type: "simple-marker",
              color: [255, 0, 0, 0.8],
              outline: {
                color: [255, 0, 0],
                width: 1
              }
            }
            break;
          case "line":
          case "polygon":
            sym = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol
              color: [255, 0, 0],
              width: 1,
              cap: "round",
              join: "round"
            }
            break;
          default :
            sym = null;
        }
        return sym;
      }

      // function that checks if the line intersects itself
      function isSelfIntersecting(polyline) {
        if (polyline.paths[0].length < 3) {
          return false;
        }
        const line = polyline.clone();

        //get the last segment from the polyline that is being drawn
        const lastSegment = getLastSegment(polyline);
        line.removePoint(0, line.paths[0].length - 1);

        // returns true if the line intersects itself, false otherwise
        return geometryEngine.crosses(lastSegment, line);
      }

      // Checks if the line intersects itself. If yes, change the last
      // segment's symbol giving a visual feedback to the user.
      function getIntersectingSegment(polyline) {
        if (isSelfIntersecting(polyline)) {
          return new Graphic({
            geometry: getLastSegment(polyline),
            symbol: {
              type: "simple-line", // autocasts as new SimpleLineSymbol
              style: "short-dot",
              width: 3.5,
              color: "yellow"
            }
          });
        }
        return null;
      }
      // Get the last segment of the polyline that is being drawn
      function getLastSegment(polyline) {
        const line = polyline.clone();
        const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
        const existingLineFinalPoint = line.getPoint(
          0,
          line.paths[0].length - 1
        );

        return {
          type: "polyline",
          spatialReference: view.spatialReference,
          hasZ: false,
          paths: [
            [
              [existingLineFinalPoint.x, existingLineFinalPoint.y],
              [lastXYPoint.x, lastXYPoint.y]
            ]
          ]
        };
      }

      function showCoordinates(evt) {
        var point = view.toMap({
          x: evt.x,
          y: evt.y
        });
        //the map is in web mercator but display coordinates in geographic (lat, long)
        var mp = webMercatorUtils.webMercatorToGeographic(point);
        //display mouse coordinates
        dom.byId("info").innerHTML = mp.x.toFixed(6) + ", " + mp.y.toFixed(6);
      }

      view.when(function () {
        //after map loads, connect to listen to mouse move & drag events
        view.on("pointer-move", showCoordinates);
      });

    });
  </script>
</head>

<body>
  <!-- https://developers.arcgis.com/javascript/latest/esri-icon-font/ -->
  <div id="viewDiv">
    <div id="clear-button" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
      <span class="esri-icon-erase"></span>
    </div>
    <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Draw point">
      <span class="esri-icon-map-pin"></span>
    </div>
    <div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polyline">
      <span class="esri-icon-polyline"></span>
    </div>
    <div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
      <span class="esri-icon-polygon"></span>
    </div>

    <div class="topcorner">
      <span id="info"></span>
    </div>
    <div class="topcorner2">
      <div id="info2">fghfghf</div>
    </div>
  </div>
</body>

</html>

jaykapalczynski

OK so I tried to simply this script to just polygons. I am confused on how to get the geometry of the graphic the user draws to a buffer function, then to write that buffer to a new graphic.

Any thoughts? Am I off the mark here.

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Draw polyline | Sample | ArcGIS API for JavaScript 4.24</title>

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

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      </style>
    <script>
  require([
    "esri/Map","esri/views/MapView","esri/views/draw/Draw","esri/Graphic","esri/geometry/geometryEngine","esri/geometry/support/webMercatorUtils",
    "esri/rest/geometryService", 
    "dojo/dom",
    "dojo/domReady!"
  ], (Map, MapView, Draw, Graphic, geometryEngine, webMercatorUtils, geometryService, dom) => {
 
    //esriConfig.defaults.geometryService = new GeometryService("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");

    const map = new Map({
      basemap: "gray-vector"
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      zoom: 10,
      center: [-77.367, 37.55]
    });

    // add the button for the draw tool
    view.ui.add("clear-button", "top-left");
    view.ui.add("polygon-button", "top-left");
    
    const draw = new Draw({
      view: view
    });

    document.getElementById("clear-button").onclick = () => {
      view.graphics.removeAll();    
   };

    document.getElementById("polygon-button").onclick = () => {
      view.graphics.removeAll();
      
      // creates and returns an instance of PolyLineDrawAction
      const action = draw.create("polygon");

      // focus the view to activate keyboard shortcuts for sketching
      view.focus();

      // listen polylineDrawAction events to give immediate visual feedback
      // to users as the line is being drawn on the view.
      action.on(
        [
          "vertex-add",
          "vertex-remove",
          "cursor-update",
          "redo",
          "undo",
          "draw-complete"
        ],
        updateVerticesPolygon
      );
    };

    function updateVerticesPolygon(event) {
      // create a polyline from returned vertices
      if (event.vertices.length > 1) {
        const result = createGraphicPolygon(event);
      }
    }

    function createGraphicPolygon(event) {
      const vertices = event.vertices;
      view.graphics.removeAll();
      
        // a graphic representing the polyline that is being drawn
      const graphicPoly = new Graphic({
        geometry: {
          type: "polygon",
          rings: vertices,
          spatialReference: view.spatialReference
        },
        symbol: {
          type: "simple-fill", // autocasts as new SimpleFillSymbol
          color: [227, 139, 79, 0.8],
          outline: {
             color: [45, 55, 255],
             width: 1
          }
        }
      });
      
      view.graphics.add(graphicPoly)
      // PASS GEOMETRY TO BUFFER FUNCTION AND ADD TO NEW GRAPHIC???
    }

    function createBuffer(event) {      
     const graphicsFinal = new Graphic({
        geometry: {
          type: "polygon",
          rings: vertices,
          spatialReference: view.spatialReference
        },
        symbol: {
          type: "simple-fill", // autocasts as new SimpleFillSymbol
          color: [227, 139, 79, 0.8],
          outline: {
             color: [45, 55, 255],
             width: 1
          }
        }
      });
 
   //bufferSpatialReference: new SpatialReference({wkid: 3857}),
   //   geometries: graphicPoly
      const params = new BufferParameters({
        distances: [560],
        unit: "kilometers",
        geodesic: true,
        outSpatialReference: view.spatialReference //,
      });

        var url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"

      buffer(url, params).then(function(results){
            graphicsFinal.add(new Graphic({
           geometry: results[0]
        }));
      });  
   }
 });
</script>
  </head>

  <body>
    <!-- https://developers.arcgis.com/javascript/latest/esri-icon-font/ -->
    <div id="viewDiv">
      <div id="clear-button" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
        <span class="esri-icon-erase"></span>           
      </div> 
      <div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
        <span class="esri-icon-polygon"></span>   
      </div>   
    </div>
  </body>
</html>

jaykapalczynski

I have seen this example but this is JS 3.x

https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=util_buffergraphic

I am in 4.x... I think I should be able to do something similar right after I draw one of the graphics?

Im not finding a buffer like the one in 3.x Maybe I should be doing this a different way?

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.