ArcGIS API For JavaScript - 图层要素缓冲

柔光的暖阳◎ 2021-07-25 16:02 403阅读 0赞

> 详情请参考 ArcGIS API For JavaScript 官网：[https://developers.arcgis.com/javascript/3/jssamples/layers\_kmlbuffer.html][https_developers.arcgis.com_javascript_3_jssamples_layers_kmlbuffer.html]

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>title</title>
        @*加载高德地图*@
        <script type="text/javascript">
            var dojoConfig = {
                async: true,
                parseOnLoad: true,
                packages: [{
                    name: "js",
                    location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
                }]
            };
        </script>
        <script src="~/Scripts/jquery-3.3.1.js"></script>
        <script src="~/Scripts/init.js"></script>
        <link href="~/Content/esri.css" rel="stylesheet" />
        <link href="~/Content/tundra.css" rel="stylesheet" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body, #map {
                width: 100%;
                height: 100%;
                position: absolute;
            }
    
            .list {
                width: 12%;
                background-color: rgba(22, 59, 90, 0.8);
                color: #fff;
                position: absolute;
            }
    
            select {
                width: 90%;
                margin: 10px 5%;
                border-radius: 5px;
                height: 26px;
            }
        </style>
        <script>
            var map;
            var findTask, findParams, findParams2;
            var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'
            var stationUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/0'
            var lineUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/1'
            require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/GeometryService", "esri/tasks/BufferParameters", "dojo/domReady!"],
                function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer,
                    GeometryService, BufferParameters) {
    
                    /* code goes here */
                    map = new Map("map", {
                        center: [120.075892, 31.526844],
                        zoom: 7,//缩放等级
                        logo: false, //logo
                        slider: false, //缩小按钮
                    });
                    var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
                    var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                    map.addLayer(baselayer1);//添加高德地图到map容器
                    map.addLayer(serverLayer);
    
                });
    
        </script>
    </head>
    <body>
        <div id="map"></div>
        <div class="list">
            <select id="selected" onchange="changeSelect()"></select>
        </div>
    </body>
    </html>
    <script>
    
        window.onload = function () {
            var queryTask = new esri.tasks.QueryTask(lineUrl);
            var query = new esri.tasks.Query();
            query.where = ("OBJECTID<4000");
            query.returnGeometry = true;
            query.outFields = ["*"];
            queryTask.execute(query, addLine);
        }
        function addLine(featureSet) {
            var feature = featureSet.features;
            var inner = "";
            var temp = [];
            for (var i = 0; i < feature.length; i++) {
                if (temp.indexOf(feature[i].attributes.linename) == -1 && feature[i].attributes.linename != "") {
                    temp.push(feature[i].attributes.linename)
                    inner += "<option>" + feature[i].attributes.linename +"</option>"
                }
            }
            document.getElementById("selected").innerHTML = "<option>---请选择---</option>" + inner;
        }
        function changeSelect() {
            var line = $("#selected option:selected").text();
            var queryTask = new esri.tasks.QueryTask(lineUrl);
            var query = new esri.tasks.Query();
            query.where = ("linename = '" + line +"'");
            query.returnGeometry = true;
            query.outFields = ["*"];
            queryTask.execute(query, centerLine);
        }    
        function centerLine(featureSet) {
            console.log(featureSet)
            var feature = featureSet.features;
            for (var i = 0; i < feature.length; i++) {
                var graphic = feature[i];
                switch (graphic.geometry.type) {
                    case "point":
                        var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                        break;
                    case "polyline":
                        var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1);
                        break;
                    case "polygon":
                        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
                        break;
                }
                graphic.setSymbol(symbol);
                map.graphics.add(graphic);
                //开始缓冲
                var sGeometry = graphic.geometry;
                //创建几何服务
                var gsvc = new esri.tasks.GeometryService("http://xxx:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
                var params = new esri.tasks.BufferParameters();
                //要缓冲的图形
                params.geometries = [sGeometry];
                //缓冲的距离
                params.distances = [500];
                //缓冲的距离单位
                params.unit = esri.tasks.GeometryService.UNIT_METER;
                //params.bufferSpatialReference = new esri.SpatialReference({ wkid: 32662 });
                params.outSpatialReference = map.spatialReference;
                //开始缓冲
                gsvc.buffer(params, function (result) {
                    var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.65]), 2), new dojo.Color([255, 0, 0, 0.35]));
                    //创建Graphic
                    var graphic = new esri.Graphic(result[0], symbol)
                    //将每一个结果都放在map中
                    map.graphics.add(graphic)
                });
            }
            if (sGeometry.type == "point") {
                //var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25]));
                //sGrapphic.setSymbol(hsymbol);
                var cPoint = new esri.geometry.Point();
                cPoint.x = sGeometry.x;
                cPoint.y = sGeometry.y;
                map.centerAt(cPoint);
            }
            else {
                var sExtent = sGeometry.getExtent();
                map.setExtent(sExtent);
            }
        }
    
    </script>

[https_developers.arcgis.com_javascript_3_jssamples_layers_kmlbuffer.html]: https://developers.arcgis.com/javascript/3/jssamples/layers_kmlbuffer.html