Buffer not plotting in correct area

630
6
Jump to solution
07-27-2017 11:21 AM
MatthewDewell
New Contributor III

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.longitude;
                     point1[1] = plotArray.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.longitude,plotArray.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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Matthew,

   Try setting the buffer spatial ref:

params.bufferSpatialReference = new SpatialReference({wkid: 32662});

and also because you are using WGS 84 you should set the buffer param to geodesic true.

View solution in original post

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Emeritus

Matthew,

   Is this code for a WAB widget or just a custom dojo dijit? What is the Spatial reference of the map?

0 Kudos
MatthewDewell
New Contributor III

Robert, thank you for the response.  It is a Dojo Dijit, and the Spatial Reference is 4326.  I hope this helps.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Matthew,

   When you get to the line:

console.info( results );

in the _showBuffer function what is the spatial ref of the resulting polygon?

0 Kudos
MatthewDewell
New Contributor III

Hello Robert,

I get back the geometries[0]/spatialReference object with the attributes:

     spatialReference/declaredClass:"esri.SpatialReference"

     spatialReference/wkid:4326

     spatialReference/wkt: null

If you need anymore, just let me know.

Thank You

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Matthew,

   Try setting the buffer spatial ref:

params.bufferSpatialReference = new SpatialReference({wkid: 32662});

and also because you are using WGS 84 you should set the buffer param to geodesic true.

0 Kudos
MatthewDewell
New Contributor III

Robert,

I entered my buffer settings now as:

params = new BufferParameters();
params.bufferSpatialReference = new SpatialReference({ wkid 32662 });
params.distances = [ bufferLineSize ];

params.geodesic = true;

params.geometries = [ polyline ];

params.outSpatialReference = this.map.spatialReference;

params.unit = GeometryService.UNIT_STATUTE_MILE;

That appears to have done it, applying the params.bufferSpatialReference = new SpatialReference({ wkid 32662 });, and the params.geodesic = true;.  Though, I did try it without applying the geodesic parameters to true, and it appears to have not made any difference, but I'll keep it in, just in case.

Thank you for your help, Robert.

0 Kudos