arcgis for js 实现点、线、面、手动线、手动面缓冲区分析功能

最新推荐文章于 2024-10-06 16:25:48 发布

一个修理地球的人

最新推荐文章于 2024-10-06 16:25:48 发布

阅读量5.5k

点赞数 1

分类专栏： arcgis javascript 文章标签： buffer arcgis for js FREEHAND_POLYLINE FREEHAND_POLYGON 缓冲区分析

本文链接：https://blog.csdn.net/wo_buzhidao/article/details/78980490

版权

arcgis 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

javascript

16 篇文章 0 订阅

订阅专栏

1.案例中使用的地图服务都可以在arcgis server manager中创建地图服务器切片地址和buffer服务地址；

实现全部代码如下；

2.可以自定义动态选择缓冲区距离长度，缓冲区投影坐标系，缓冲区距离单位等；

3.先实现过程中在缓冲区坐标系中遇到些问题（Buffer Spatial Reference WKID），在下一篇中重点介绍下；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义缓冲区图形</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8087/arcgis_js_api/library/3.22/3.22/esri/css/esri.css" />
    <script src="http://localhost:8087/arcgis_js_api/library/3.22/3.22/init.js"></script>
    <script src="../js/jquery-1.3.1.js"></script>
    <style>
        html, body, #map {
            width:   100%;
            height:  100%;
            margin:  0;
            padding: 0;
        }
    </style>
    <script>
        var map;var draw;
        var  gsvc,_Draw;
        var _GeometryService;
        require([
            "dojo/dom-construct",
            "esri/Color",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/map",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/toolbars/draw",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/graphic",
            "esri/geometry/Extent",
            "esri/tasks/BufferParameters",
            "esri/tasks/GeometryService","dojo/_base/array",
            "esri/SpatialReference",
            "dojo/domReady!"
        ], function(
            domConstruct, Color,
            ArcGISTiledMapServiceLayer, Map,SimpleFillSymbol,SimpleLineSymbol,
            Draw,SimpleMarkerSymbol,Graphic,Extent,BufferParameters,GeometryService,array,SpatialReference
        ) {
            map;
            _Draw=Draw;
            _GeometryService=GeometryService;
            map = new Map("map", {
                extent: new Extent({
                    "xmin":126.08797131337525,"ymin":41.88483304829672,"xmax":130.05572254059723,"ymax":47.20292839632739,
                    "spatialReference":{"wkid":4326}})
            });
            var oilAndGasLayer = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/itms/MapServer");
            map.addLayer(oilAndGasLayer);
            gsvc=GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
            console.log(GeometryService.UNIT_STATUTE_MILE);
            map.on("load",function(){
            draw=new Draw(map);
            draw.on("draw-complete",doBuffer);
            });
            function doBuffer(result){
                debugger;
                switch (result.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(result.geometry,symbol);
                map.graphics.add(graphic);
                var params = new BufferParameters();
                params.distances = [dojo.byId("distance").value];
                params.bufferSpatialReference =  new SpatialReference({wkid: dojo.byId("bufferSpatialReference").value});
                params.outSpatialReference = map.spatialReference;
                params.unit= eval("_GeometryService."+dojo.byId("unit").value);
                params.geometries= [graphic.geometry ];
                if (result.geometry.type === "polygon") {
                    var symbol = new SimpleFillSymbol(
                        SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_SOLID,
                            new Color([0,0,255,0.65]), 2
                        ),
                        new Color([0,0,255,0.35])
                    );
                        var graphic = new Graphic(result.geometry,symbol);
                        map.graphics.add(graphic);
                        gsvc.buffer(params, function(features) {
                        showBuffer(features);
                    });
                } else {
                    gsvc.buffer(params, function(features) {
                        showBuffer(features);
                    });
                }
            }
            function showBuffer(features) {
                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])
                );
                for (var j = 0, jl = features.length; j < jl; j++) {
                    map.graphics.add(new Graphic(features[j],symbol));
                }
                draw.deactivate();
                map.showZoomSlider();
            }
            });
        function point (){
            draw.activate(_Draw.LINE);map.hideZoomSlider();
        }
    </script>
</head>
<body>
<button οnclick="point()">Line</button>
<button οnclick="draw.activate(_Draw.POLYLINE);map.hideZoomSlider();">Polyline</button>
<button οnclick="draw.activate(_Draw.FREEHAND_POLYLINE);map.hideZoomSlider();">Freehand Polyline</button>
<button οnclick="draw.activate(_Draw.POLYGON);map.hideZoomSlider();">Polygon</button>
<button οnclick="draw.activate(_Draw.FREEHAND_POLYGON);map.hideZoomSlider();">Freehand Polygon</button>
<div id="map" style="height:90%;border:1px solid #000;"></div>
Buffer Spatial Reference WKID: <input type="text" id="bufferSpatialReference" size="5" value="102100" />  
Buffer Distance: <input type="text" id="distance" size="10" value="25" />  
<select id="unit">
    <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>
</select>
<input type="button" value="Clear Graphics" οnclick="map.graphics.clear();" />
</body>
</html>