1、引用claro.css和esri.css
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
2、页面布局
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="gutters:‘true‘, design:‘sidebar‘"
style="width:100%;height:100%;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:‘center‘">
</div>
<div id="leftPane"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:‘left‘">
<div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>
<button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.LINE);app.map.hideZoomSlider();">Line</button>
<button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.POLYLINE);app.map.hideZoomSlider();">Polyline</button>
<button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);app.map.hideZoomSlider();">Freehand Polyline</button>
<br />
<button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.POLYGON);app.map.hideZoomSlider();">Polygon</button>
<button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);app.map.hideZoomSlider();">Freehand Polygon</button>
<br /><hr />
<div><b>Buffer Parameters</b></div>
Spatial Reference WKID: <input type="text" id="bufferSpatialReference" size="5" value="32612" /><br />
Distance: <input type="text" id="distance" size="5" value="25" />
<select id="unit" style="width:100px;">
<option value="UNIT_STATUTE_MILE">Miles</option>
<option value="UNIT_FOOT">Feet</option>
<option value="UNIT_KILOMETER">Kilometers</option>
<option value="UNIT_METER">Meters</option>
<option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>
<option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>
<option value="UNIT_DEGREE">Degrees</option>
</select><br />
<button data-dojo-type="dijit.form.Button" type="button" onclick="app.map.graphics.clear();">Clear Graphics</button>
</div>
</div>
</body>
3、页面样式
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#leftPane{
color:#000;
width:250px;
padding-bottom:15px;
}
#map{
padding:0;
}
.details{
font-size:14px;
font-weight:600;
padding-bottom:20px;
}
</style>
4、页面加载响应处理
<script src="http://js.arcgis.com/3.10/"></script>
<script>
require(["dojo/dom",
"dojo/dom-attr",
"dojo/_base/array",
"esri/Color",
"dojo/parser",
"esri/config",
"esri/map",
"esri/graphic",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"],
function (dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
var map, gsvc, tb;
parser.parse();
map = new Map("map", {
basemap: "streets",
center: [-111.5, 39.541],
zoom: 7
});
map.on("load", initToolbar);
gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
esriConfig.defaults.io.proxyUrl = "/proxy";
esriConfig.defaults.io.alwaysUseProxy = false;
//该方法初始化App类
function initToolbar(evtObj) {
app.tb = new Draw(evtObj.map);
app.tb.on("draw-end", 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();
}
//这相当于C#里面的类的概念，用于存储临时使用的值
app = {
map: map,
tb: tb,
gsvc: gsvc
};
});
</script>