Gis Stack Exchange 202899

Buffer Question - 3.17 JS API

by Alex Azuero

HTML

<script src="https://js.arcgis.com/3.17/init.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<script type="text/javascript">
  var dojoConfig = {
    async: true
  };

</script>
<div id="map">
</div>

CSS

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

#map {
  height: 100%;
  width: 100%;
  margin: 0px;
}

JavaScript

require([
  'esri/map',
  'esri/layers/FeatureLayer',
  'esri/config',
  'esri/tasks/GeometryService',
  'esri/tasks/BufferParameters',
  'dojo/on',
  'dojo/_base/lang',
  'esri/symbols/SimpleLineSymbol',
  'esri/symbols/SimpleFillSymbol',
  'esri/Color',
  'esri/graphic'
], function(
  Map, FeatureLayer, config, GeometryService, BufferParameters, on, lang, SimpleLineSymbol, SimpleFillSymbol, Color, Graphic
) {
  var map = new Map("map", {
    center: [-118.3978, 34.4272],
    zoom: 12,
    basemap: "topo"
  });

  // add the lines feature layer:
  var fl = new FeatureLayer('https://sampleserver6.arcgisonline.com/arcgis/rest/services/Energy/Geology/MapServer/6', {
  mode: FeatureLayer.MODE_SNAPSHOT
  });
  map.addLayer(fl);

  // wait for the map to be ready:
  on.once(map, 'update-end', lang.hitch(this, function(evt) {
    var gs = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

    var params = new BufferParameters();
    params.distances = [1];
    params.outSpatialReference = map.spatialReference;
    params.unit = GeometryService.UNIT_KILOMETER;
    // set the gemetries, using array.map to turn the array of graphics into an array of geometries:
    params.geometries = fl.graphics.map(function(graphic) {
      return graphic.geometry;
    });

    // do the buffer operation
    gs.buffer(params).then(function(bufferedGeometries) {
      // map the resultant polygons that come back from the geometry service:
      var symbol = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID,
          new Color([255, 0, 0, 0.65]), 2
        ),
        new Color([255, 0, 0, 0.35])
      );

      bufferedGeometries.forEach(function(geometry) {
        var graphic = new Graphic(geometry, symbol);
        map.graphics.add(graphic);
      });
    });
  }));
});