ArcGIS API For JavaScript - 断面分析（相交线路，定位、缓冲）

最新推荐文章于 2023-04-24 09:41:35 发布

风轻轻~

最新推荐文章于 2023-04-24 09:41:35 发布

阅读量1.1k

点赞数 1

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

版权

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

19 篇文章 5 订阅

订阅专栏

断面相交线路，将相交的线路放入select中，选择线路进行定位、缓冲展示

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <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;
        }

        button, select {
            width: 90%;
            margin: 10px 5%;
            border-radius: 5px;
            height: 26px;
        }
    </style>
    <script>
        var map;
        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",
            "esri/toolbars/draw", "dojo/domReady!"],
            function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer,
                GeometryService, BufferParameters, Draw) {
                /* code goes here */
                map = new Map("map", {
                    center: [118.375892, 33.966844],
                    zoom: 12,//缩放等级
                    logo: false, //logo
                    slider: false, //缩小按钮
                });
                var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                map.addLayer(baselayer);//添加高德地图到map容器
                var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
                map.addLayer(serverLayer);

            });
    </script>
</head>
<body>
    <div id="map"></div>
    <div class="list">
        <button id="road" onclick="duanmian();" style="width:205px">断面分析</button>
        <select id="gongjuSelect" class="form-control" onchange="postionDM()"></select>
    </div>
</body>
</html>
<script>
    var tb;
    function duanmian() {
        //清空上次高亮显示
        map.graphics.clear();
        //创建一个新的Draw对象
        tb = new esri.toolbars.Draw(map);
        //设置样式
        RoaddefaultSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255]));
        RoadhighlightSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([255, 0, 0]));
        //图层查询
        var RoadqueryTask = new esri.tasks.QueryTask(lineUrl);
        var Roadquery = new esri.tasks.Query();
        Roadquery.where = ("FID >= 0");
        Roadquery.returnGeometry = true;
        Roadquery.outFields = ["*"];
        //执行
        RoadqueryTask.execute(Roadquery, addRoadsToMap);
    }

    function addRoadsToMap(featureSet) {
        //清空上一次高亮显示
        map.graphics.clear();
        var features = featureSet.features;
        for (var i = 0; i < features.length; i++) {
            map.graphics.add(features[i]);
        }
        //创建几何服务
        gsvc = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        //绘制方法
        dojo.connect(tb, "onDrawEnd", findRoadsInExtent);
        //开始绘制
        tb.activate(esri.toolbars.Draw.POLYLINE);
    }

    function findRoadsInExtent(extent) {   //extent：范围
        var L1 = [];
        var L2 = [];
        var graphic;
        //已经加载到地图上的所有元素
        var graphics = map.graphics.graphics;
        for (var i = 0, il = graphics.length; i < il; i++) {
            graphic = graphics[i];
            //多边形的范围(geometry ===> extent)
            var polygonExtent = extent.getExtent();

            //map上有公交线网和站点的两种geometry（polyline和point以及手动绘制的图形geometry -->polygon）
            //当加载在地图上的元素（线路）的geometry类型为polyline时； 线路用相交（intersects），与多边形相交
            if (polygonExtent.intersects(graphic.geometry) && graphic.geometry.type == "polyline") {
                //-------断面   线路相交用 SimpleLineSymbol()------
                var LinedefaultSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255]));
                //设置图形的符号
                graphic.setSymbol(LinedefaultSymbol);
                // push 图层要素名
                L1.push(graphic.attributes.linename);
                L2.push(graphic.attributes.FID);
            }
        }
        //-------将断面相交到的线路放在select框中------------
        var innerHtml = "";
        for (var k = 0; k < L1.length; k++) {
            innerHtml += '<option id=' + L2[k] + ' value="javascript:postionDM(' + "'" + L1[k] + "'" + ')">' + L1[k] + '</option><br>';//id为上面L2的值（OBJECTID），不可错
        }
        dojo.byId("gongjuSelect").innerHTML = '<option>---请选择---</option>' + innerHtml;
        //结束绘制图形（不关闭可连续画图）
        tb.deactivate();
    }

    //定位、缓冲线路
    function postionDM() {
        map.graphics.clear();
        var id = $("#gongjuSelect option:selected").attr('id');
        var line = $('#gongjuSelect option:selected').text();
        var queryTask = new esri.tasks.QueryTask(lineUrl);
        var query = new esri.tasks.Query();
        query.where = ("FID = " + id + " and linename = '" + line + "'");
        query.returnGeometry = true;
        query.outFields = ["*"];
        queryTask.execute(query, lineCenter);
    }
    function lineCenter(featureSet) {
        var sGrapphic;
        var features = featureSet.features;
        for (var i = 0; i < features.length; i++) {
            var cGrapphic = features[i];
            //根据类型设置显示样式
            switch (cGrapphic.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([82, 152, 255]), 5);
                    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;
            }
            //设置显示样式
            cGrapphic.setSymbol(symbol);
            //添加到graphics进行高亮显示.
            map.graphics.add(cGrapphic);
            //features的下标
            sGrapphic = cGrapphic;
        }
        var sGeometry = sGrapphic.geometry;
        //缓冲
        //创建几何服务（服务地址ip）
        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 = [300];
        //缓冲的距离单位
        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.graphics.add(graphic)

        });
        //当点击的名称对应的Geometry为点类型时进行地图中心定位显示
        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);
        }
        //当点击的名称对应的Geometry为线或面类型时获取Geometry的Extent进行中心定位显示
        else {
            var sExtent = sGeometry.getExtent();
            map.setExtent(sExtent);
        }
    }
</script>

风轻轻~

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
ArcGIS API For JavaScript - 断面分析（相交线路，定位、缓冲）

断面相交线路，将相交的线路放入select中，选择线路进行定位、缓冲展示@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Draw</title> @*加载高德地图*@ <script type="text/java
复制链接

扫一扫