ArcGIS API For JavaScript - 图层要素缓冲-蒲公英云

详情请参考 ArcGIS API For JavaScript 官网：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>