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.