ArcGIS API for JS的一般编码习惯

最新推荐文章于 2025-05-14 11:57:19 发布

diaoji8156

最新推荐文章于 2025-05-14 11:57:19 发布

阅读量91

点赞数

文章标签： c#

原文链接：http://www.cnblogs.com/rockman/p/3920688.html

版权

1、引用claro.css和esri.css

<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">

2、页面布局

<body class="claro">
  <div data-dojo-type="dijit.layout.BorderContainer" 
       data-dojo-props="gutters:'true', design:'sidebar'" 
       style="width:100%;height:100%;">

    <div id="map" 
         data-dojo-type="dijit.layout.ContentPane" 
         data-dojo-props="region:'center'">
    </div>

    <div id="leftPane" 
         data-dojo-type="dijit.layout.ContentPane" 
         data-dojo-props="region:'left'">

      <div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>
      <button data-dojo-type="dijit.form.Button" οnclick="app.tb.activate(esri.toolbars.Draw.LINE);app.map.hideZoomSlider();">Line</button>
      <button data-dojo-type="dijit.form.Button" οnclick="app.tb.activate(esri.toolbars.Draw.POLYLINE);app.map.hideZoomSlider();">Polyline</button>
      <button data-dojo-type="dijit.form.Button" οnclick="app.tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);app.map.hideZoomSlider();">Freehand Polyline</button>
      <br />
      <button data-dojo-type="dijit.form.Button" οnclick="app.tb.activate(esri.toolbars.Draw.POLYGON);app.map.hideZoomSlider();">Polygon</button>
      <button data-dojo-type="dijit.form.Button" οnclick="app.tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);app.map.hideZoomSlider();">Freehand Polygon</button>

      <br /><hr />
      <div><b>Buffer Parameters</b></div>
      Spatial Reference WKID: <input type="text" id="bufferSpatialReference" size="5" value="32612" /><br />
      Distance: <input type="text" id="distance" size="5" value="25" />
      <select id="unit" style="width:100px;">
        <option value="UNIT_STATUTE_MILE">Miles</option>
        <option value="UNIT_FOOT">Feet</option>
        <option value="UNIT_KILOMETER">Kilometers</option>
        <option value="UNIT_METER">Meters</option>
        <option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>
        <option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>
        <option value="UNIT_DEGREE">Degrees</option>
      </select><br />
      <button data-dojo-type="dijit.form.Button" type="button" οnclick="app.map.graphics.clear();">Clear Graphics</button>
    </div>
  </div>
  
</body>

3、页面样式

  <style>
     html, body {
      height: 100%;
      width: 100%;
      margin: 0; 
      padding: 0;
      overflow:hidden;
    }
    #leftPane{
      color:#000;
      width:250px;
      padding-bottom:15px;
    }
    #map{
      padding:0;
    }
    .details{
      font-size:14px;
      font-weight:600;
      padding-bottom:20px;
    }
  </style>

4、页面加载响应处理

  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
      require(["dojo/dom",
              "dojo/dom-attr",
              "dojo/_base/array",
              "esri/Color",
              "dojo/parser",

              "esri/config",
              "esri/map",
              "esri/graphic",

              "esri/tasks/GeometryService",
              "esri/tasks/BufferParameters",

              "esri/toolbars/draw",

              "esri/symbols/SimpleMarkerSymbol",
              "esri/symbols/SimpleLineSymbol",
              "esri/symbols/SimpleFillSymbol",

              "dijit/layout/BorderContainer",
              "dijit/layout/ContentPane"],
        function (dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
            var map, gsvc, tb;
            parser.parse();
            map = new Map("map", {
                basemap: "streets",
                center: [-111.5, 39.541],
                zoom: 7
            });
            map.on("load", initToolbar);

            gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            esriConfig.defaults.io.proxyUrl = "/proxy";
            esriConfig.defaults.io.alwaysUseProxy = false;

            //该方法初始化App类
            function initToolbar(evtObj) {
                app.tb = new Draw(evtObj.map);
                app.tb.on("draw-end", doBuffer);
            }

            function doBuffer(evtObj) {
                var geometry = evtObj.geometry,
                map = app.map,
                gsvc = app.gsvc;
                switch (geometry.type) {
                    case "point":
                        var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
                        break;
                    case "polyline":
                        var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
                        break;
                    case "polygon":
                        var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
                        break;
                }

                var graphic = new Graphic(geometry, symbol);
                map.graphics.add(graphic);

                //setup the buffer parameters
                var params = new BufferParameters();
                params.distances = [dom.byId("distance").value];
                params.bufferSpatialReference = new esri.SpatialReference({ wkid: dom.byId("bufferSpatialReference").value });
                params.outSpatialReference = map.spatialReference;
                params.unit = GeometryService[dom.byId("unit").value];

                if (geometry.type === "polygon") {
                    //if geometry is a polygon then simplify polygon.  This will make the user drawn polygon topologically correct.
                    gsvc.simplify([geometry], function (geometries) {
                        params.geometries = geometries;
                        gsvc.buffer(params, showBuffer);
                    });
                } else {
                    params.geometries = [geometry];
                    gsvc.buffer(params, showBuffer);
                }
            }

            function showBuffer(bufferedGeometries) {
                var symbol = new SimpleFillSymbol(
                  SimpleFillSymbol.STYLE_SOLID,
                  new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([255, 0, 0, 0.65]), 2
                  ),
                  new Color([255, 0, 0, 0.35])
                );

                array.forEach(bufferedGeometries, function (geometry) {
                    var graphic = new Graphic(geometry, symbol);
                    app.map.graphics.add(graphic);
                });
                app.tb.deactivate();
                app.map.showZoomSlider();
            }

            //这相当于C#里面的类的概念，用于存储临时使用的值
            app = {
                map: map,
                tb: tb,
                gsvc: gsvc
            };
        });
  </script>

转载于:https://www.cnblogs.com/rockman/p/3920688.html