1. 程式人生 > >arcgis for js 開發系列之地圖地圖繪製矩形

arcgis for js 開發系列之地圖地圖繪製矩形

<!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>