You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
6.4 KiB
202 lines
6.4 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> |
|
<title>Buffer</title> |
|
|
|
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css"> |
|
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"> |
|
<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; |
|
} |
|
|
|
button{ |
|
margin:2px; |
|
cursor:pointer; |
|
} |
|
</style> |
|
|
|
<script src="https://js.arcgis.com/3.46/"></script> |
|
<script> |
|
var map, tb; |
|
|
|
require(["dojo/dom", |
|
|
|
"dojo/_base/array", |
|
"dojo/parser", |
|
"dojo/query", |
|
"dojo/on", |
|
|
|
"esri/Color", |
|
"esri/config", |
|
"esri/map", |
|
"esri/graphic", |
|
|
|
"esri/geometry/normalizeUtils", |
|
"esri/tasks/GeometryService", |
|
"esri/tasks/BufferParameters", |
|
|
|
"esri/toolbars/draw", |
|
|
|
"esri/symbols/SimpleMarkerSymbol", |
|
"esri/symbols/SimpleLineSymbol", |
|
"esri/symbols/SimpleFillSymbol", |
|
|
|
"dijit/layout/BorderContainer", |
|
"dijit/layout/ContentPane", |
|
"dijit/form/Button", "dojo/domReady!" |
|
], |
|
function(dom, array, parser, query, on, Color, esriConfig, Map, Graphic, normalizeUtils, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol){ |
|
|
|
parser.parse(); |
|
|
|
|
|
esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); |
|
|
|
//Setup button click handlers |
|
on(dom.byId("clearGraphics"), "click", function(){ |
|
if(map){ |
|
map.graphics.clear(); |
|
} |
|
}); |
|
//click handler for the draw tool buttons |
|
query(".tool").on("click", function(evt){ |
|
if(tb){ |
|
tb.activate(evt.target.id); |
|
} |
|
}); |
|
|
|
map = new Map("map", { |
|
basemap: "streets-vector", |
|
center: [-111.5, 39.541], |
|
zoom: 7 |
|
}); |
|
map.on("load", initToolbar); |
|
|
|
|
|
|
|
function initToolbar(evtObj) { |
|
tb = new Draw(evtObj.map); |
|
tb.on("draw-end", doBuffer); |
|
} |
|
|
|
function doBuffer(evtObj) { |
|
tb.deactivate(); |
|
var geometry = evtObj.geometry, symbol; |
|
switch (geometry.type) { |
|
case "point": |
|
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": |
|
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255,0,0]), 1); |
|
break; |
|
case "polygon": |
|
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.outSpatialReference = map.spatialReference; |
|
params.unit = GeometryService[dom.byId("unit").value]; |
|
//normalize the geometry |
|
|
|
normalizeUtils.normalizeCentralMeridian([geometry]).then(function(normalizedGeometries){ |
|
var normalizedGeometry = normalizedGeometries[0]; |
|
if (normalizedGeometry.type === "polygon") { |
|
//if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct. |
|
esriConfig.defaults.geometryService.simplify([normalizedGeometry], function(geometries) { |
|
params.geometries = geometries; |
|
esriConfig.defaults.geometryService.buffer(params, showBuffer); |
|
}); |
|
} else { |
|
params.geometries = [normalizedGeometry]; |
|
esriConfig.defaults.geometryService.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); |
|
map.graphics.add(graphic); |
|
}); |
|
|
|
} |
|
}); |
|
</script> |
|
|
|
</head> |
|
|
|
<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 type="button" class="tool" id="line">Line</button> |
|
<button type="button" class="tool" id="polyline">Polyline</button> |
|
<button type="button" class="tool" id="freehandpolyline">Freehand Polyline</button> |
|
<br/> |
|
<button type="button" class="tool" id="polygon">Polygon</button> |
|
<button type="button" class="tool" id="freehandpolygon">Freehand Polygon</button> |
|
<br/><hr /> |
|
<div><b>Buffer Parameters</b></div> |
|
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 type="button" id="clearGraphics">Clear Graphics</button> |
|
</div> |
|
</div> |
|
</body> |
|
</html> |
|
|