缓冲区.html

<!DOCTYPE html>
<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>缓冲区</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
    <script type="text/javascript" src="https://js.arcgis.com/3.21/"></script>
    <style>
        html,body,#map{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        require([
            "esri/map",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/geometry/Polygon",

            "esri/graphic",
            "esri/Color",

            "esri/tasks/BufferParameters",
            "esri/tasks/GeometryService",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/SpatialReference",

            "dojo/domReady!"],
            function(
                Map,Point,Polyline,Polygon,Graphic,Color,BufferParameters,GeometryService,SimpleMarkerSymbol,
                SimpleFillSymbol,SimpleLineSymbol,SpatialReference
            ){

            var map=new Map("map",{
                basemap: "osm",
                center: [115.95,28.6826],
                zoom:"12"
            });


            var points=[new Point(116.026,28.6826),new Point(116.05,28.66),new Point(116.11,28.70),new Point(115.95,28.65)];
            var polylines=[new Polyline([[115.88,28.70],[115.88,28.67]]),new Polyline([[115.82,28.64],[115.89,28.59]])];
            var polygons=[new Polygon([[115.798499,28.783553],[115.75998,28.895433],[115.900834,28.821535],[115.785276,28.759237],[115.713987,28.733902]])];

            var geometryService=new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            map.on("load",function(){

                var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), 4);

                var markerSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([100,100,100,0.1]), 1),
                    new Color([255,0,0]));

                var fillSymbol=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                    new SimpleLineSymbol("solid", new Color([255,0,0]), 1),
                    new Color([255,0,0]));

                for(var i=0;i<points.length;i++){
                    map.graphics.add(new Graphic(points[i],markerSymbol))
                }
                for(var i=0;i<polylines.length;i++){
                    map.graphics.add(new Graphic(polylines[i],lineSymbol))
                }
                for(var i=0;i<polygons.length;i++){
                    map.graphics.add(new Graphic(polygons[i],fillSymbol))
                }


                // 点缓冲区
                var pointParams = new BufferParameters();
                pointParams.geometries  = points;
                pointParams.distances = [ 1];
                pointParams.unit = GeometryService.UNIT_KILOMETER;
                // 缓冲几何图形的空间参考。
                pointParams.bufferSpatialReference = new SpatialReference({wkid: 32662});
                // 返回的几何图形的空间引用。
                pointParams.outSpatialReference = new SpatialReference({wkid: 4326});

                geometryService.buffer(pointParams,function(features) {
                    var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol("solid", new Color([197,97,20]), 1),
                        new Color([197,97,20,1]));

                    for(var i=0;i<features.length;i++){
                        console.log(features[i]);
                        map.graphics.add(new Graphic(features[i],symbol))
                    }
                });

                // 线缓冲区
                var polyineParams=new BufferParameters();
                polyineParams.geometries=polylines;
                polyineParams.distances = [ 1];
                polyineParams.unit = GeometryService.UNIT_KILOMETER;
                polyineParams.bufferSpatialReference = new SpatialReference({wkid: 32662});
                polyineParams.outSpatialReference = new SpatialReference({wkid: 4326});

                geometryService.buffer(polyineParams,function(features) {
                    var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol("solid", new Color([197,97,20]), 1),
                        new Color([197,97,20,1]));

                    for(var i=0;i<features.length;i++){
                        console.log(features[i]);
                        map.graphics.add(new Graphic(features[i],symbol))
                    }
                });
                // 面缓冲区
                var polygonParams=new BufferParameters();
                polygonParams.geometries=polygons;
                polygonParams.geodesic=true;
                polygonParams.distances = [ 1];
                polygonParams.unit = GeometryService.UNIT_KILOMETER;
                polygonParams.bufferSpatialReference = new SpatialReference({wkid: 32662});
                polygonParams.outSpatialReference = new SpatialReference({wkid: 4326});

                geometryService.buffer(polygonParams,function(features) {
                    var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol("solid", new Color([197,97,20]), 1),
                        new Color([197,97,20,0.5]));

                    for(var i=0;i<features.length;i++){
                        console.log(features[i]);
                        map.graphics.add(new Graphic(features[i],symbol))
                    }
                });
            })
        });
    </script>
</head>

<body>
    <div id="map"></div>
</body>
</html>
猜你喜欢
