arcgis for js 開發系列之地圖地圖繪製矩形
阿新 • • 發佈:2018-12-29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Simple Map</title> <link rel="stylesheet" type="text/css" href="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/esri/css/esri.css"/> <script type="text/javascript" src="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/init.js"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.layers.agstiled"); dojo.require("esri.toolbars.draw"); var map, tb,graphicLayer; function init() { map = new esri.Map("map"); dojo.connect(map, "onLoad", initToolbar); map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer")); } function initToolbar(map) { tb = new esri.toolbars.Draw(map); graphicLayer = new esri.layers.GraphicsLayer(); map.addLayer(graphicLayer); dojo.connect(tb, "onDrawEnd", addGraphic); } function addGraphic(geometry) { console.log(geometry) graphicLayer.clear(); symbol = tb.fillSymbol; console.log(symbol); graphicLayer.add(new esri.Graphic(geometry, symbol)); } function cancle(){ graphicLayer.clear(); tb.deactivate(); } dojo.addOnLoad(init); </script> </head> <body class="tundra"> <button onclick="tb.activate(esri.toolbars.Draw.EXTENT);">畫矩形</button> <button onclick="cancle();">取消</button> <div id="map" style="width:1024px; height:512px; border:2px solid #000;" class="tundra"></div> </body> </html>