ArcGIS JavaScriptAPI----- 緩衝區操作

描述使用ArcGIS Server 幾何服務（geometry service）來對繪製在地圖上的圖形生成緩衝區。幾何服務能夠在基於瀏覽器的應用程式中執行緩衝操作（buffering），投影要素（project feature），計算可測量值。利用幾何服務創建緩衝區之前，需創建一個（緩衝參數） ...

描述

使用ArcGIS Server 幾何服務（geometry service）來對繪製在地圖上的圖形生成緩衝區。幾何服務能夠在基於瀏覽器的應用程式中執行緩衝操作（buffering），投影要素（project feature），計算可測量值。
利用幾何服務創建緩衝區之前，需創建一個BufferParameters（緩衝參數）的實例，並且明確緩衝距離（distance），單位（unit）以及坐標系統（spatial reference）。通過傳入這個參數（parameters）和一個當緩衝執行完成時調用的回調函數（callback）來調用緩衝（buffer）功能。

geometryService.buffer(params,function(features){showBuffer(features)});

註意：

在下麵的例子中使用了ArcGIS JavaScript API 自帶的繪製工具條，通過工具條產生的幾何（geometry）作為緩衝操作的輸入幾何。如果幾何的類型是多邊形，則程式會在其作為參數進行緩衝處理之前進行簡化（simplify）操作。這是用來找出那些邊界線相交的非法拓撲多邊形。簡化操作能強行將這些多邊形轉變為合法的多部分的要素（multipart features）。
這個示例醫用了一個代理頁面，以防幾何的GET請求超過了某些Web瀏覽器強加的2000字元的限制。有關如何建立自己的代理頁面，請參閱代理頁面的說明。

<!DOCTYPE html>
<!--<html lang="en"> 加入lang會導致dojo的樣式錯誤--> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Buffer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
   html, body {
    height: 100%;
    width: 100%;
    margin: 0; 
    padding: 0;
    overflow:hidden;
  }
  #leftPane{
    color:#000;
    width:250px;
    padding-bottom:15px;
  }n
  #map{
    padding:0;
  }
  .details{
    font-size:14px;
    font-weight:600;
    padding-bottom:20px;
  }

  button{
    margin:2px;
    cursor:pointer;
  }
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script type="text/javascript">
    var map,tb;

    // AMD模塊
    require(["dojo/dom",

        "dojo/_base/array",
        "dojo/parser",
        "dojo/query",
        "dojo/on",

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

        "esri/geometry/normalizeUtils",
        "esri/tasks/GeometryService",
        "esri/tasks/BufferParameters",

        "esri/toolbars/draw",

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

        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/form/Button",

        "dojo/domReady!"
        ],
        function(dom, array, parser, query, on, Color, esriConfig, Map, Graphic, normalizeUtils, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol){
        
            // dojo根據dom標簽的屬性實例化控制項
            parser.parse();

            // esriconfig : The default values for all JS API configuration options. 
            esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            // proxy 用於跨域
            esriConfig.defaults.io.proxyUrl = "/proxy/";
            esriConfig.defaults.io.alwaysUseProxy = false;

            //dojo用於事件綁定
            on(dom.byId("clearGraphics"),"click",function(){
                if(map){
                    map.graphics.clear();
                }
            });

            // dojo 的選擇器
            query(".tool").on("click",function(evt){
                if(tb){
                    tb.activate(evt.target.id);
                }
            });

            map = new Map("map",{
                basemap:"streets",
                center:[-111.5,39.541],
                zoom:7
            });
            
            // map載入成功後然後初始化工具條
            map.on("load",initToolbar);

            // evtObj 屬於 事件參數
            function initToolbar(evtObj){
                tb = new Draw(evtObj.map);
                tb.on("draw-complete",doBuffer);// 已經不建議使用draw-end事件了，改為draw-complete
            }

            function doBuffer(evtObj){
                tb.deactivate();
                var geometry = evtObj.geometry,
                    symbol;
                switch(geometry.type){
                    case "point":
                        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":
                        symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH,new Color([255,0,0]),1);
                        break;
                    case "polygon":
                        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);

                // 設立緩衝參數
                var params = new BufferParameters();
                params.distances = [dom.byId("distance").value];  // 參數為數組
                params.outSpatialReference = map.spatialReference;
                params.unit = GeometryService[dom.byId("unit").value];

                // Normalizes geometries that intersect the central meridian or fall outside the world extent so they stay within the current coordinate system. Only supported for Web Mercator and geographic coordinates.（子午線規範化工具）
                normalizeUtils.normalizeCentralMeridian([geometry]).then(function(normalizedGeometries){
                    var normalizedGeometry = normalizedGeometries[0];
                    if(normalizedGeometry.type === "polygon"){
                       
// 規範化多邊形幾何操作
esriConfig.defaults.geometryService.simplify([normalizedGeometry],function(geometries){
                            params.geometries = geometries;

                            // 進行緩衝操作
                            esriConfig.defaults.geometryService.buffer(params,showBuffer);// ShowBuffer is callback function
                        });
                    }else{
                        params.geometries = [normalizedGeometry];
                        esriConfig.defaults.geometryService.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])
                    );

                // dojo 數組遍歷
                array.forEach(bufferedGeometries,function(geometry){

                    // 顯示地圖繪製樣式
                    var graphic = new Graphic(geometry,symbol);
                    map.graphics.add(graphic);
                });
            }
        });
</script>

</head>

<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 type="button" class="tool" id="line">Line</button>
    <button type="button" class="tool" id="polyline">Polyline</button>
    <button type="button" class="tool" id="freehandpolyline">Freehand Polyline</button>
    <br/>
    <button type="button" class="tool" id="polygon">Polygon</button>
    <button type="button" class="tool" id="freehandpolygon">Freehand Polygon</button>
    <br/><hr />
    <div><b>Buffer Parameters</b></div>
    Distance:&nbsp;<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 type="button" id="clearGraphics">Clear Graphics</button>
  </div>
</div>
</body>
</html>