ArcGIS API For JavaScript - 图层要素缓冲

最新推荐文章于 2023-04-24 10:29:58 发布

风轻轻~

最新推荐文章于 2023-04-24 10:29:58 发布

阅读量324

点赞数

本文链接：https://blog.csdn.net/Jie_1997/article/details/106806565

版权

地图__ArcGIS Api For JS 专栏收录该内容

19 篇文章 5 订阅

订阅专栏

详情请参考 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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    @*引入arcgis所需js及css*@
    <script src="~/util/MapFile/init.js"></script>
    <link href="~/util/MapFile/esri.css" rel="stylesheet" />
    <link href="~/util/MapFile/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/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/MapServer'
        var stationUrl = 'http://xxx:6080/arcgis/rest/services/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/MapServer/0'
        var lineUrl = 'http://xxx:6080/arcgis/rest/services/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/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: [118.375892, 33.966844],
                    zoom: 12,//缩放等级
                    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 = ("FID<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("https://utility.arcgisonline.com/ArcGIS/rest/services/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>

风轻轻~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API For JavaScript - 图层要素缓冲

@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>title</title> @*加载高德地图*@ <script type="text/javascript"> var dojoConfig =
复制链接

扫一扫