Hello
I am trying to create a buffer tool widget and I saw couple of examples. The first example shows creating buffer on point and second is to create buffer on line and polygons. Here are the links.
Buffer a point | ArcGIS API for JavaScript
Geometry Service - Buffer | ArcGIS API for JavaScript
The buffer on point works fine with me, but I have an issue creating the buffer on line and polygon. Below is my code:
var gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
startup: function() {
this.inherited(arguments);
this.toolbar = new Draw(this.map);
this.toolbar.on("draw-end", this._doBuffer);
},
_doBuffer: function(evtObj) {
var geometry = evtObj.geometry;
switch (geometry.type) {
case "point":
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 1), new Color([0,255,0,0.25]));
break;
case "polyline":
var symbol = new SimpleLineSymbol();
break;
case "polygon":
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255,0,0]), 2), new Color([255,255,0,0.25]));
break;
}
var graphic = new Graphic(geometry, symbol);
this.map.graphics.add(graphic);
//setup the buffer parameters
var params = new BufferParameters();
params.distances = [ 5 ];
params.bufferSpatialReference = this.map.spatialReference;
params.outSpatialReference = this.map.spatialReference;
//**************BELOW I TRIED DIFFERENT WAYS****************************
//params.unit = GeometryService["UNIT_KILOMETER"];
//params.unit = esri.tasks.GeometryService.UNIT_KILOMETER;
params.unit = GeometryService["UNIT_KILOMETER"];
//params.unit =eval("esri.tasks.GeometryService.UNIT_FOOT");
if (geometry.type === "polygon") {
//if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct.
gsvc.simplify([geometry], function(geometries) {
params.geometries = geometries;
gsvc.buffer(params, this._test);
});
} else {
console.log("The geometry is "+geometry.type);
params.geometries = [geometry];
lang.hitch(this, gsvc.buffer(params, this._test));
//*********************THIS IS WHERE MY CODE BREAKS***************************
//******************IF I USE EITHER OF BELOW CODE, IT DOES NOT DO ANYTHING***********************
gsvc.buffer(params, lang.hitch(this, _test));
gsvc.buffer(params, lang.hitch(this, this._showBuffer));
}
},
_showBuffer: function(bufferedGeometries) {
//************IT NEVER REACHES HERE TO SHOW BELOW MESSAGE IN CONSOLE **************************
console.log("test");
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])
);
array.forEach(bufferedGeometries, function(geometry) {
var graphic = new Graphic(geometry, symbol);
this.map.graphics.add(graphic);
});
this.toolbar.deactivate();
//app.map.showZoomSlider();
},
I would really appreciate if someone can help me.
Thanks
Qazi
Solved! Go to Solution.
Qazi,
Here is some corrections to your code:
define([ "dojo/_base/declare", "dijit/_WidgetsInTemplateMixin", "jimu/BaseWidget", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/toolbars/draw", "dojo/_base/lang", "dojo/on", "dojo/_base/Color", "dojo/_base/array", "esri/tasks/GeometryService", "esri/tasks/BufferParameters" ], function (declare, _WidgetsInTemplateMixin, BaseWidget, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Draw, lang, on, Color, array, GeometryService, BufferParameters) { return declare([BaseWidget, _WidgetsInTemplateMixin], { baseClass: 'buffer-widget', //this property is set by the framework when widget is loaded. name: 'Buffer', gsvc: new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"), symbol: null, startup: function () { this.inherited(arguments); this.toolbar = new Draw(this.map); this.toolbar.activate(Draw.POLYLINE); this.toolbar.on("draw-end", lang.hitch(this, this._doBuffer)); }, _doBuffer: function (evtObj) { var geometry = evtObj.geometry; switch (geometry.type) { case "point": this.symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25])); break; case "polyline": this.symbol = new SimpleLineSymbol(); break; case "polygon": this.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])); break; } var graphic = new Graphic(geometry, this.symbol); this.map.graphics.add(graphic); //setup the buffer parameters var params = new BufferParameters(); params.distances = [5]; params.bufferSpatialReference = this.map.spatialReference; params.outSpatialReference = this.map.spatialReference; params.unit = GeometryService.UNIT_KILOMETER; if (geometry.type === "polygon") { //if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct. this.gsvc.simplify([geometry], lang.hitch(this,function (geometries) { params.geometries = geometries; this.gsvc.buffer(params, lang.hitch(this, this._showBuffer)); })); } else { console.log("The geometry is " + geometry.type); params.geometries = [geometry]; //lang.hitch(this, this.gsvc.buffer(params, this._test)); //*********************THIS IS WHERE MY CODE BREAKS*************************** //******************IF I USE EITHER OF BELOW CODE, IT DOES NOT DO ANYTHING*********************** //this.gsvc.buffer(params, lang.hitch(this, this._test)); this.gsvc.buffer(params, lang.hitch(this, this._showBuffer)); } }, _showBuffer: function (bufferedGeometries) { //************IT NEVER REACHES HERE TO SHOW BELOW MESSAGE IN CONSOLE ************************** var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])); array.forEach(bufferedGeometries, lang.hitch(this, function (geometry) { var graphic = new Graphic(geometry, symbol); this.map.graphics.add(graphic); })); this.toolbar.deactivate(); //app.map.showZoomSlider(); } }); });
Hi Qazi,
It may be worth your time to take a look at the Incident Analysis widget. I was trying to develop a buffer widget with moderate success, but found that this widget does almost everything I was trying to accomplish.
Jake
Thanks for pointing me towards this widget. I tried to look into it, but it seems too complicated for me. I dont want any buffers with feature service. I want a simple point, line or polygon buffer created around a graphic and I wonder why it is not working. Any further help will be really appreciated.
Thanks
Qazi
Qazi,
I have plans to introduce a buffer widget but I don't have a timeline for this development.
Robert
That would be awesome. I wish it was soon.
I would appreciate if you could provide some help to get my code work.
Qazi
I will take a look
Qazi,
Here is some corrections to your code:
define([ "dojo/_base/declare", "dijit/_WidgetsInTemplateMixin", "jimu/BaseWidget", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/toolbars/draw", "dojo/_base/lang", "dojo/on", "dojo/_base/Color", "dojo/_base/array", "esri/tasks/GeometryService", "esri/tasks/BufferParameters" ], function (declare, _WidgetsInTemplateMixin, BaseWidget, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Draw, lang, on, Color, array, GeometryService, BufferParameters) { return declare([BaseWidget, _WidgetsInTemplateMixin], { baseClass: 'buffer-widget', //this property is set by the framework when widget is loaded. name: 'Buffer', gsvc: new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"), symbol: null, startup: function () { this.inherited(arguments); this.toolbar = new Draw(this.map); this.toolbar.activate(Draw.POLYLINE); this.toolbar.on("draw-end", lang.hitch(this, this._doBuffer)); }, _doBuffer: function (evtObj) { var geometry = evtObj.geometry; switch (geometry.type) { case "point": this.symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25])); break; case "polyline": this.symbol = new SimpleLineSymbol(); break; case "polygon": this.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])); break; } var graphic = new Graphic(geometry, this.symbol); this.map.graphics.add(graphic); //setup the buffer parameters var params = new BufferParameters(); params.distances = [5]; params.bufferSpatialReference = this.map.spatialReference; params.outSpatialReference = this.map.spatialReference; params.unit = GeometryService.UNIT_KILOMETER; if (geometry.type === "polygon") { //if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct. this.gsvc.simplify([geometry], lang.hitch(this,function (geometries) { params.geometries = geometries; this.gsvc.buffer(params, lang.hitch(this, this._showBuffer)); })); } else { console.log("The geometry is " + geometry.type); params.geometries = [geometry]; //lang.hitch(this, this.gsvc.buffer(params, this._test)); //*********************THIS IS WHERE MY CODE BREAKS*************************** //******************IF I USE EITHER OF BELOW CODE, IT DOES NOT DO ANYTHING*********************** //this.gsvc.buffer(params, lang.hitch(this, this._test)); this.gsvc.buffer(params, lang.hitch(this, this._showBuffer)); } }, _showBuffer: function (bufferedGeometries) { //************IT NEVER REACHES HERE TO SHOW BELOW MESSAGE IN CONSOLE ************************** var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])); array.forEach(bufferedGeometries, lang.hitch(this, function (geometry) { var graphic = new Graphic(geometry, symbol); this.map.graphics.add(graphic); })); this.toolbar.deactivate(); //app.map.showZoomSlider(); } }); });
Robert
You are awesome. It worked like a champ. I really appreciate your help.
Qazi
Hi rscheitlin,
I have also been looking into a buffer on features. I am trying to use a selection as the starting point for Geometry, and based on user input for distance and color scheme/Line type will generate a buffer as an operational layer.
I have been looking into you Identify and your eSearch widgets. And trying to get the parts of what I want from it, but of course, it is becoming quite a barbaric task that I might be losing at.
So given the specs:
- user selected color and line type for buffer
- feature selection on the map (point/polygon type graphic)
- text-based distance input
Do you have any advice to get this going? I have spent a few days so far on my mentioned method and feel lost in the progress.