1、创建地图,并创建load的响应函数initToolbar
map = new Map("map", {
basemap: "streets",
center: [-111.5, 39.541],
zoom: 7
});
map.on("load", initToolbar);
2、initToolbar函数,启用Draw对象,draw-end事件触发时响应doBuffer函数
function initToolbar(evtObj) {
app.tb = new Draw(evtObj.map);
app.tb.on("draw-end", doBuffer);
}
3、dobuffer
function doBuffer(evtObj) {
var geometry = evtObj.geometry,
map = app.map,
gsvc = app.gsvc;
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(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
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);
map.graphics.add(graphic);
//setup the buffer parameters
var params = new BufferParameters();
params.distances = [dom.byId("distance").value];
params.bufferSpatialReference = new esri.SpatialReference({ wkid: dom.byId("bufferSpatialReference").value });
params.outSpatialReference = map.spatialReference;
params.unit = GeometryService[dom.byId("unit").value];
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, showBuffer);
});
} else {
params.geometries = [geometry];
gsvc.buffer(params, showBuffer);
}
}
function showBuffer(bufferedGeometries) {
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);
app.map.graphics.add(graphic);
});
app.tb.deactivate();
app.map.showZoomSlider();
}