arcgis api for js 實現標繪實例

這是一個很簡單的一個功能,希望能給朋友們提供幫助。

源碼如下:


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

 

 

效果:

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章