AnsweredAssumed Answered

Buffer not plotting in correct area

Question asked by matt.dewell@yahoo.com on Jul 27, 2017
Latest reply on Jul 28, 2017 by matt.dewell@yahoo.com

I have this standard buffer plotting code (there may be some typos as I am copying from another network that I can only view the code on a monitor, and not directly.  These are lines of code that I think don't need to be there, to save time in my typing):


define([
       "dojo/_base/declare"
       ...
     , "dojo/_base/array"
       ...
     , "dojo/dom"
     , "dojo/on"
       ...
     , "esri/SpatialReference"
     , "esri/graphic"
     , "esri/GraphicsLayer"
     , "esri/Color"
     , "esri/geometry/Point"
     , "esri/geometry/Polyline"
     , "esri/geometry/normalizeUtils"
     , "esri/symbols/SimpleLineSymbol"
     , "esri/symbols/SimpleFillSymbol"
     , "esri/tasks/GeometryService"
     , "esri/tasks/BufferParameters"
       ...
], function (
       declare
       ...
     , array
     , dom
     , on
       ...
     , SpatialReference
     , Graphic
     , GraphicsLayer
     , Color
     , Point
     , Polyline
     , normalizeUtils
     , SimpleLineSymbol
     , SimpleFillSymbol
     , GeometryService
     , BufferParameters
) {
     var plotArray = [
         { latitude:34, longitude: -118 },
         { latitude:32, longitude: -114 },
         { latitude:32, longitude: -109 },
         { latitude:37, longitude: -106 },
         { latitude:41, longitude: -104 },
         { latitude:41, longitude: -96 },
         { latitude:39, longitude: -91 },
         { latitude:38, longitude: -88 },
         { latitude:32, longitude: -96 },
         { latitude:37, longitude: -123 },
       
     return declare([ ... ],
     {
         ...
         gsvc: '',
         graphicsLayerID: '',
         graphicsLyr:'',
         ...
         constructor: function (options, srcRefNode) {
             try {

                 this.gsvc = esriConfig.defaults,geometryService;

                 this.map = (options.map || null);
                 ...

                 this.graphicsLayerID = (options.graphicsLayerID || 'Upload_gLyr');
                 ...
                 this.symbolMarker = {
                     'circle': SimpleMarkerSymbol.STYLE_CIRCLE,
                     ...
                 };

                 this.lineSymbol = {
                     'dash": SimpleLineSymbol.STYLE_DASH,
                     ...
                 };
             } catch (e) {
                 console.info("Error in Constructor - " + this.name);
             }
         },

         startup: function () {
             if (this.debugMode) {
                 console.info(this.name + ' - STARTUP called');
             }

             this.inherited(arguments)

             this.graphicsLyr = new GraphicsLayer({id: this.graphicsLayerID});
             this.map.add(this.graphicsLyr);
         },

         postCreate: function() {
             if (this.debugMode) {
                 console.info(this.name + ' - POST CREATE called');
             }

             this.inherited(arguments);

             this.own(
                 this.gsvc.on("buffer-complete", lang.hitch(this, this._showBuffer) )
             )
             ...
         },

         ...

         _buildLineSelection: function () {
             if (this.debugMode) {
                 console.info(this.name + ' - BUILD LINE SELECTION called');
             }

             lineColorID = dom.byId('lineCOlor');
             this.lineColor = this.colorSelection;
             dojo.style(lineColorID, 'backgroundcolor', this.colorSelection);

             ...

             on(dojo.byId('btnDrawLines'),'click', lang.hitch(this, this._drawLineData) );
         }

        
         _drawLineData: function(evt) {
             if (this.debugMode){
                 console.info( this.name + ' - DRAW LINE DATA called');
             }

             try {
                 var paths = [];
                 for (var j = 1; j < plotArray.length; j++) {
                     point0 = [];
                     point0 = [];
                     point0[0] = plotArray[j - 1].longitude;
                     point0[1] = plotArray[j - 1].latitude;
                     point1[0] = plotArray[j].longitude;
                     point1[1] = plotArray[j].latitude;
                     path = [point0, point1];

                     paths.push(path);
                 }

                 polylineDefinition = {"paths":paths,"spatialReference":this.map.spatialReference};
                 polyline = new Polyline(polylineDefinition);
                 graphic = new esri.Graphic().setGeometry(polyline);

                 this.lineColor = this.colorSelection;
                 lineStyle = dojo.byId('lineStyle').value;
                 dojoColor = new dojo.Color(this.lineColor);
                 rgbColor = dojoColor.toRgb();
                 lineSize = dojo.byId('lineSize').value;
                 alpha = dojo.byId('lineOpacity').value;
                 rgbColor[rgcColor.length] = alpha;

                 graphic.symbol = new SimpleLineSymbol()
                                      .setColor(rgbColor)
                                      .setWidth(lineSize)
                                      .setStyle(this.lineSymbol[lineStyle]);
                 this.graphicsLyr.add(graphic);

                 //fill in points on line intersections
                 for (var i = 0; i < plotArray.length; i++) {
                     data = "";
                     pt = new Point([plotAray[i].longitude,plotArray[i].latitude],this.map.spatialReference);
                     symbol = "circle";
                     dojoColor = new dojo.Color(this.lineColor);
                     rgbColor = dojoColor.toRgb();
                     size = dojo.byId('lineSize').value;
                     alpha = dojo.byId('lineOpacity').value;
                     rgbColor[rgcColor.length] = alpha;

                     point = {
                         pt: pt,
                         symbol: this.SymbolMarker[symbol],
                         outlineSize: 0,
                         size: size,
                         color: rgbColor,
                         data:data
                     };

                     this._plotPoint(this.map,point);

                 }

                 this._doBuffer( polyline );
             } catch (Error) {
                 if (this.debugMode){
                     console.info('Error in DRAW LINE DATA: ' + evt.target);
                     console.info(Error);
                 }
             }
         },

         _doBuffer: function ( polyline ) {

             if (this.debugMode) {
                 console.info( this.name + ' - DO BUFFER called');
                 console.info ( polyline );
             }

             bufferLineSize = dojo.byId('bufferDistance').value;
             bufferUnits = dojo.byId('bufferUnits').value

             try {

                 if (this.debugMode) {
                     console.info( this.name + ' - BUFFER LINE - ' + bufferLineSize
                 }

                 params = new BufferParameters();
                 params.distances = [ bufferLineSize ];
                 params.geometires = [ polyline ];
                 params.outSpatialReference = this.map.spatialReference
                 params.unit = GeometryService.UNIT_STATUTE_MILE;

                 if ( this.debugMode) {
                     console.info( this.name + ' - BUFFER...');
                 }

                 this.gsvc.buffer(params);

                 if (this.debugMode) {
                     console.info( this.name + ' - FINISHED BUFFERING...');
                 }

             } catch (e) {
                 console.info( this.name + ' - Error in DO BUFFER');
                 console.info(e);
             }
         },

         _showBuffer: funtion (results) {
             if (this.debugMode) {
                 console.info( this.name + ' - SHOW BUFFER called');
                 console.info( results );
             }

             dojoColor = new dojo.Color(this.bufferColor);
             rgbFillColor = dojoColor.toRgb();
             rgbOutlineColor = dojoColor.toRgb();
             alphaFill = 0.35;
             alphaOutline = 1;
             rgbFillColor[rgbFillColor.length] = alphaFill;
             rgbOutlineColor[rgbOutlineColor.length] = alphaOutline;

             symbol = new SimpleFillSymbol()
                          .setStyle(SimpleFillSymbol.STYLE_SOLID)
                          .setOutline(
                              new SimpleLineSymbol()
                                  .setStyle(SimpleLineSymbol.STYLE_SOLID)
                                  .setColor(rgbOutlineColor)
                                  .setWidth(2)
                          )
                          .setCOlor(rgbFillColor);

             graphic = new esri.Graphic(results.geometries[0],symbol);
             this.graphsLyr.add(graphic);
         }
     });
});

I can give you other functions if needed, but I give the essentials, I believe.  I get it to plot the buffer but not where the polyline is drawn.  The data for the rings looks like this:

rings[0][
    [-399.9999999,4053.06334471325],
    [-367.648012018999,4056.249737401],
    [-104.507677999999,4064.86406],
    ...
]

That comes out no where near the polyline that gets drawn.

Any insights?

Thanks in advance.

Outcomes