ArcGIS JavaScriptAPI----- 缓冲区操作

描述

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

巴特西

ArcGIS JavaScriptAPI----- 缓冲区操作

描述

最新文章

热门文章