javascript require内容对dojo.dom的影响导致的问题

阔活洵信 2015-05-21 03:48:29

下面这段代码是木有问题的，功能是点击按钮，然后再地图上画一个框



<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">



    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Shapes and Symbols</title>



    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">



    <style>

      #info {

        top: 20px;

        color: #444;

        height: auto;

        font-family: arial;

        right: 20px;

        margin: 5px;

        padding: 10px;

        position: absolute;

        width: 115px;

        z-index: 40;

        border: solid 2px #666;

        border-radius: 4px;

        background-color: #fff;

      }

      html, body, #mapDiv {

        padding:0;

        margin:0;

        height:100%;

      }

      button {

        display: block;

      }

    </style>



    <script src="http://js.arcgis.com/3.13/"></script>

    <script>

      var map, tb;



      require([

        "esri/map",

		"esri/toolbars/draw", "esri/symbols/SimpleLineSymbol",

        "esri/symbols/SimpleFillSymbol", "esri/graphic",

        "esri/Color","dojo/dom", "dojo/on", "dojo/domReady!"

      ], function(

        Map, Draw,SimpleLineSymbol,

        SimpleFillSymbol, 

        Graphic, 

        Color, dom, on

      ) {

        map = new Map("mapDiv", {

          basemap: "streets",

          center: [-25.312, 34.307],

          zoom: 3

        });

        map.on("load", initToolbar);



        // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol

        // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png

         var fillSymbol = new SimpleFillSymbol(

                  SimpleFillSymbol.STYLE_SOLID,

                  new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,

                  new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])

                );



        function initToolbar() {

          tb = new Draw(map);

          tb.on("draw-end", addGraphic);



          // event delegation so a click handler is not

          // needed for each individual button

		  var drawbutton = dom.byId("Extent");

          on(drawbutton, "click", function(evt) {

            var tool = "extent";

            map.disableMapNavigation();

            tb.activate(tool);

          });

        }



        function addGraphic(evt) {

          //deactivate the toolbar and clear existing graphics 

          tb.deactivate(); 

          map.enableMapNavigation();



          // figure out which symbol to use

          var symbol = fillSymbol;



          map.graphics.add(new Graphic(evt.geometry, symbol));

        }

      });

    </script>

  </head>

  

  <body>

    

    <div id="info">

      <div>Select a shape then draw on map to add graphic</div>

      <button id="Extent">Rectangle</button>

    </div>



    <div id="mapDiv"></div>



  </body>

</html>