這是一個很簡單的一個功能,希望能給朋友們提供幫助。
源碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the toolbar_draw sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/3/jssamples/toolbar_draw.html
-->
<title>Maps Toolbar</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.30/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
<style>
html, body{
font-family: sans-serif;
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.30/"></script>
<script>
var map, toolbar, symbol, geomTask;
var graphicLayer;
require([
"esri/map",
"esri/toolbars/draw",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/parser", "dijit/registry","esri/Color",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
], function(
Map, Draw, Graphic,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
parser, registry,Color
) {
parser.parse();//----------------
map = new Map("map", {
basemap: "streets",
center: [-15.469, 36.428],
zoom: 3
});
map.on("load", createToolbar);
registry.forEach(function(d) {
if ( d.declaredClass === "dijit.form.Button" ) {
d.on("click", activateTool);
}
});
graphicLayer = new esri.layers.GraphicsLayer();
function activateTool() {
var tool = this.label.toUpperCase().replace(/ /g, "_");
toolbar.activate(Draw[tool]);
map.hideZoomSlider();
}
function createToolbar(themap) {
toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
}
var asdi_graphic;
function addToMap(evt) {
var symbol;
toolbar.deactivate();
map.showZoomSlider();
switch (evt.geometry.type) {
default:
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255,215,0]), 2),new Color([255,215,0,0.25]));
///symbol = new SimpleFillSymbol();
break;
}
asdi_graphic = new Graphic(evt.geometry, symbol);
map.addLayer(graphicLayer);
graphicLayer.add(asdi_graphic);
}
});
//------------------------------------------------------------------
function test()
{//alert("SSS");debugger;
graphicLayer.clear();
}
</script>
</head>
<body>
<button data-dojo-type="dijit/form/Button">Polygon</button>
<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
<button id="test_btn" οnclick="test()">Clean</button>
<div id="map"></div>
</body>
</html>
效果: