ArcGIS API For JavaScript - 区域分析（多边形，圆、矩形、椭圆）及要素定位缓冲（相交线路、包含站点）

今天药忘吃喽~ 2021-07-25 17:48 819阅读 0赞

## 区域分析 ##

**区域相交线路与包含站点，将相交的线路和站点放入select中，选择线路或者站点进行定位、缓冲展示**

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Draw</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;
            }
    
            button,select {
                width: 90%;
                margin: 10px 5%;
                border-radius: 5px;
                height: 26px;
            }
        </style>
        <script>
            var map;
            var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'
            var stationUrl = 'http://xxxx: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",
                "esri/toolbars/draw","dojo/domReady!"],
                function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer,
                    GeometryService, BufferParameters, Draw) {
                    /* code goes here */
                    map = new Map("map", {
                        center: [120.075892, 31.526844],
                        zoom: 8,//缩放等级
                        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">
            <button id="road" onclick="duanmian();" style="width:205px">断面分析</button>
            <select id="lineSelect" class="form-control" onchange="centerLine()"></select>
            <select id="stationSelect" class="form-control" onchange="centerStation()"></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);//urlline图层
            var Roadquery = new esri.tasks.Query();
            //查询
            Roadquery.where = ("OBJECTID < 40000");
            Roadquery.returnGeometry = true;
            Roadquery.outFields = ["*"];
            RoadqueryTask.execute(Roadquery, addRoadsToMap);
        }
    
        function addRoadsToMap(featureSet) {  //featureSet：查找到的结果（线路）
            //清空上一次高亮显示
            map.graphics.clear();
            var features = featureSet.features;
            for (var i = 0, il = features.length; i < il; i++) {
                //将结果中的每一个结果（线路）添加到图层上
                map.graphics.add(features[i]);
            }
    
            //-------query查询公交站点-------
            var StationqueryTask = new esri.tasks.QueryTask(stationUrl);
            var Stationquery = new esri.tasks.Query();
            //查询条件
            Stationquery.where = ("OBJECTID < 40000");
            Stationquery.returnGeometry = true;
            Stationquery.outFields = ["*"];
            StationqueryTask.execute(Stationquery, addRoadsToStation);//GJStation的方法在下方
        }
        function addRoadsToStation(featureSet) {
            var features = featureSet.features;
            for (var i = 0, il = features.length; i < il; i++) {
                map.graphics.add(features[i]);
            }
            SFeatures = features;
    
            ///第一步：创建一个新的Draw对象
            tb = new esri.toolbars.Draw(map);
            //创建几何服务
            gsvc = new esri.tasks.GeometryService("http://120.27.227.253:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
            //绘制
            dojo.connect(tb, "onDrawEnd", findRoadsInExtent);   //findRoadsInExtent1  多种绘制方法时，方法名称不可重复
            //开始绘制
            tb.activate(esri.toolbars.Draw.ELLIPSE);//POLYGON：多边形,CIRCLE:圆,RECTANGLE:矩形,ELLIPSE:椭圆
        }
    
        //执行findRoadsInExtent方法
        var areas; //面积
        function findRoadsInExtent(extent) {   //extent：范围
            //投影坐标系（3857）转地理坐标系（4326）
            var geometry = esri.geometry.webMercatorToGeographic(extent);
            //var geometry = extent;
            //绘制图形时 线的样式 颜色 宽度
            var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 99, 0]), 3);
            //绘制图形时 面的样式 轮廓 颜色
            var polygonSymbol2 = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, lineSymbol, new dojo.Color([0, 67, 0, 0.25]));
            //绘制完成的新图形（参数：geometry图形，polygonSymbol2几何图形的样式）
            var graphicpoint = new esri.Graphic(geometry, polygonSymbol2);
            //展现新图形
            map.graphics.add(graphicpoint);
    
            //计算面积(平方公里)
            areas = esri.geometry.geodesicAreas([geometry], esri.Units.SQUARE_KILOMETERS);
    
    
            var L1 = [];//linename(线路名称)
            var L2 = [];//OBJECRID(线路OBJECTID)
            //定义站点空数组
            var S1 = [];//站点名称
            var S2 = [];//OBJECTID(站点id)
            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);
    
                    L1.push(graphic.attributes.linename);//向L1空数组中添加线路名称，返回最新 线路名称的数组
                    //ZXL为线路的非直线系数
                    L2.push(graphic.attributes.OBJECTID);//向L2空数组中添加线路id，返回最新 线路id的数组
                }
                //当加载在地图上的元素（站点）的geometry类型为point时；   站点用包含（contains），多边形包含站点
                if (geometry.contains(graphic.geometry) && graphic.geometry.type == "point") { //contains：站点用包含
    
                    //绘制完成图形内的所有站点
                    //console.log(graphic.geometry)
                    //stageometries.push(graphic.geometry);
    
                    //-------------区域分析    站点包含用 SimpleMarkerSymbol()------------------
                    var LinedefaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 0, 255]));
                    //设置图形符号
                    graphic.setSymbol(LinedefaultSymbol);
    
                    S1.push(graphic.attributes.stationnam);//向S1空数组中添加站点的名称，返回新 站点名称的数组
                    S2.push(graphic.attributes.OBJECTID);//向S2空数组中添加站点的id，返回新 站点id的数组
                }
            }
    
            //-------将多边形相交到的线路放入select框中------------
            var innerHtml = "";
            //循环L1（线路名称）数组的长度
            for (var k = 0; k < L1.length; k++) {
                innerHtml += '<option id=' + L2[k] + ' value="javascript:postionDB(' + "'" + L1[k] + "'" + ')">' + L1[k] + '</option><br>';//id为上面L2的值（OBJECTID），不可错
            }
            dojo.byId("lineSelect").innerHTML = '<option>---请选择---</option>' + innerHtml;
    
            //-------将多边形包含的站点放入select框中------------
            var innerHtml = "";
            //循环S1（站点名称）数组的长度
            for (var k = 0; k < S1.length; k++) {
                innerHtml += '<option id=' + S2[k] + ' value="javascript:postionDB1(' + "'" + S1[k] + "'" + ')">' + S1[k] + '</option><br>';//id为上面S2的值（OBJECTID），不可错
            }
            dojo.byId("stationSelect").innerHTML = '<option>---请选择---</option>' + innerHtml;
    
            //结束绘制图形（不关闭可连续画图）
            tb.deactivate();
        }
    
        //定位、缓冲线路
        function centerLine() {
            map.graphics.clear();
            var id = $("#lineSelect option:selected").attr('id');
            var sta = $('#lineSelect option:selected').text();
    
            var StationqueryTask = new esri.tasks.QueryTask(lineUrl);//注意：查询图层不可错误
            var Stationquery = new esri.tasks.Query();
            Stationquery.where = ("OBJECTID ='" + id + "' and linename = '" + sta + "'");
            Stationquery.returnGeometry = true;
            Stationquery.outFields = ["*"];
            StationqueryTask.execute(Stationquery, lineCenter);
    
            function lineCenter(featureSet) {
                var sGrapphic;
                var features = featureSet.features;
                for (var i = 0; i < features.length; i++) {
                    var cGrapphic = features[i];//.feature;
                    if ((cGrapphic.attributes) && cGrapphic.attributes.OBJECTID == id) {
                        //根据类型设置显示样式
                        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;
                        break;
                    }
                }
                var sGeometry = sGrapphic.geometry;
                //缓冲
                //创建几何服务(服务IP地址)
                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 = [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中
                    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);
                }
            }
        }
        //定位、缓冲站点
        function centerStation() {
            //清空上次高亮显示
            map.graphics.clear();
    
            var id = $('#stationSelect option:selected').attr('id');
            var sta = $('#stationSelect option:selected').text();
    
            //QueryTask查询urlstation
            var StationQueryTask = new esri.tasks.QueryTask(stationUrl);
            var StationQuery = new esri.tasks.Query();
            //查询条件
            StationQuery.where = ("OBJECTID = '" + id + "' and stationnam = '" + sta + "'");
            StationQuery.returnGeometry = true;
            StationQuery.outFields = ["*"];
            StationQueryTask.execute(StationQuery, ShowStation);
    
            function ShowStation(featureSet) {  //featureSet: select框中所点击的线路
                //select框中所点击的线路信息
                var features = featureSet.features;
                //循环feature的长度
                for (var i = 0; i < features.length; i++) {
                    //所选站点的下标
                    var cGrapphic = features[i];//.feature;
                    if ((cGrapphic.attributes) && cGrapphic.attributes.OBJECTID == id) {
                        //根据类型设置显示样式
                        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;
                        break;
                    }
                }
                //features的下标的几何
                var sGeometry = sGrapphic.geometry;
                //----缓冲----
                //创建几何服务(服务IP地址)
                var jhfw = new esri.tasks.GeometryService("http://xxx:6080/arcgis/rest/services/Utilities/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 });
                //设置outSpatialReference会将返回的Geometry的坐标自动投影过去，返回想要的坐标系。
                params.outSpatialReference = map.spatialReference;
                //开始缓冲
                jhfw.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)
    
                });
    
                //当点击的名称对应的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>