Basic Functions - Geometric Services Buffers

1. effect picture

2. Enabling Geometry Services


Like published maps, invoked through REST URL

3. steps
  1. Creating Geometric Service Objects

    //Here is the REST URL for the geometry service
    var geometryServices = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
    
  2. Creating Cache Parameter Objects

    var params = new BufferParameters();
    
  3. Use drawing tools on toolbar

    var toolBar = new Draw(map);
    
  4. Create points, lines, and surfaces

    var pointSymbol = new SimpleMarkerSymbol();
    lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 2);
    polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 255, 0, 0.25]));
    
  5. Binding events to dot buttons

    on(dom.byId("point"), "click", function () {
    	//Activate the Dot Tool
    	toolBar.activate(Draw.POINT, {
        showTooltips: true
        })
    })
    
  6. Drawing End Binding Event

    				on(toolBar, "draw-end", function (result) {
                        //Get point shape
                        var geometry = result.geometry;
                        //Create Graphic
                        var graphicpoint = new Graphic(geometry, pointSymbol);
                        map.graphics.add(graphicpoint);
                        //Close Drawing Tool
                        toolBar.deactivate();
                        
                        // *** Construct shape attributes for buffer analysis
                        //Note that you can put an array here, where for convenience, we only analyze the buffer of one shape.
                        params.geometries = [geometry];
                    })
    
  7. Buffer Analysis Button Binding Events

    				on(dom.byId("Btn"), "click", function () {
                        var mi = $("#te").val();
                        //Buffer distance
                        params.distances = [mi];
                        //Spatial Reference, Buffer Style, Transparency, etc.
                        params.bufferSpatialReference = map.spatialReference;
                        params.outSpatialReference = map.spatialReference;
                        //Execution of analytical processing results
                        geometryServices.buffer(params, function (result) {
                            //Processing the results of buffer analysis
                            for (var idx in result) {
                                //Create Graphic
                                var graphic = new Graphic(result[idx], polygonSymbol)
                                //The results are placed in map
                                map.graphics.add(graphic)
                            }
                        });
                    })
    
4. paste code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Buffer analysis</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css" />
    <script src="https://js.arcgis.com/3.28/"></script>
    <script  src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <style type="text/css">
        .MapClass {
            width: 100%;
            height: 900px;
        }
    </style>
    <script type="text/javascript">


        require(["esri/map",
            "dojo/dom", "dojo/on",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/toolbars/draw",
            "esri/graphic",
            "esri/tasks/GeometryService",
            "esri/tasks/BufferParameters",
            "dojo/colors",
            "dojo/domReady!"],
            function (Map, dom, on,
                ArcGISDynamicMapServiceLayer,
                SimpleMarkerSymbol,
                SimpleLineSymbol,
                SimpleFillSymbol,
                Draw,
                Graphic,
                GeometryService,
                BufferParameters, Color) {
                var map = new esri.Map("mapDiv");
                var layer = new esri.layers.ArcGISDynamicMapServiceLayer
                    ("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
                map.addLayer(layer);

                
                //Creating Geometric Service Objects
                var geometryServices = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
                //Creating Cache Parameter Objects
                var params = new BufferParameters();

                //Use drawing tools on toolbar
                var toolBar = new Draw(map);
                //Create dot symbols
                var pointSymbol = new SimpleMarkerSymbol();
                pointSymbol.style = SimpleMarkerSymbol.STYLE_CIRCLE;
                pointSymbol.setSize(10);
                pointSymbol.setColor(new Color("#FFFFCC"));
                //Line symbol
                lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 2);
                //Face symbol
                polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 255, 0, 0.25]));
                //Binding events to dot buttons
                on(dom.byId("point"), "click", function () {
                    //Activate the Dot Tool
                    toolBar.activate(Draw.POINT, {
                        showTooltips: true
                    })

                })
                //Drawing End Binding Event
                on(toolBar, "draw-end", function (result) {
                    //Get point shape
                    var geometry = result.geometry;
                    //Create Graphic
                    var graphicpoint = new Graphic(geometry, pointSymbol);
                    map.graphics.add(graphicpoint);
                    //Close Drawing Tool
                    toolBar.deactivate();
                    //Very important!!! Here we construct shape attributes for buffer analysis
                    //Note that you can put an array here, where for convenience, we only analyze the buffer of one shape.
                    params.geometries = [geometry];


                })
                //Buffer Analysis Button Binding Events
                on(dom.byId("Btn"), "click", function () {
                    // var mi = document.getElementById("te").value;
                    var mi = $("#te").val();
                    //Buffer distance
                    params.distances = [mi];
                    //Spatial reference
                    params.bufferSpatialReference = map.spatialReference;
                    params.outSpatialReference = map.spatialReference;
                    //Execution of analytical processing results
                    geometryServices.buffer(params, function (result) {
                        //Processing the results of buffer analysis
                        for (var idx in result) {
                            //Create Graphic
                            var graphic = new Graphic(result[idx], polygonSymbol)
                            //Put every result in map
                            map.graphics.add(graphic)
                        }
                    });


                })

            });
    </script>
</head>

<body>
    <div id="mapDiv" class="MapClass"></div>
    <input id="point" type="button" value="spot" />
    <input id="te" type="text" value="Buffer distance">
    <input id="Btn" type="button" value="Buffer analysis" />
</body>

</html>
5. expansion

How to eliminate the buffer of the previous operation when the buffer operation is performed on the continuous point?
How to select points continuously and build buffer in batches?

Tags: REST JQuery Javascript

Posted on Tue, 08 Oct 2019 09:18:52 -0700 by mj_23