arcgis api for javascript学习-通过地图中已有的边界实现空间查询

本文链接：https://blog.csdn.net/zzzpiu/article/details/110288317

主要思路,

需要通过条件获取到边界(查询)中的geometry,
通过query中的空间查询功能来实现,query中new出来的是需要查询的图层
query.geometry和riverQuery.spatialRelationship和riverQuery.outSpatialReference用来设置空间查询的空间关系和空间参考.

以此来实现一个地图中已有边界的空间查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.34/"></script>
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        /* 下拉按钮样式 */
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
            position: absolute;
            display: inline-block;
            right: 0;
            top: 0;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        /* 下拉菜单的链接 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content a:hover {background-color: #f1f1f1}

        /* 在鼠标移上去后显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>

    <script>
        require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/ArcGISTiledMapServiceLayer","esri/tasks/QueryTask","esri/tasks/query","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol"],function (Map,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,QueryTask,Query,SimpleFillSymbol,SimpleLineSymbol) {
            var map = new Map("map");
            var XZQUrl = "http://localhost:6080/arcgis/rest/services/JLSY/XZQ/MapServer/0";
            var riverUrl = "http://localhost:6080/arcgis/rest/services/JLSY/JLRiver_webTile/MapServer";
            var riverLayer = new ArcGISTiledMapServiceLayer(riverUrl);
            map.addLayer(riverLayer);

            var riverQueryTask = new QueryTask(riverUrl+"/0");
            var riverQuery = new Query();

            var shpQueryTask = new QueryTask(XZQUrl);
            var shpQuery = new Query();
            dojo.query(".dropdown-content a").on("click",function () {
                map.graphics.clear();//查询之前先清除一下
                // 点击下拉菜单的某个a标签获取到对应的面的边界shp
                shpQuery.returnGeometry = true;
                shpQuery.where = "FID = " + this.innerText;//重要的选择shp
                shpQuery.outFields = ["*"];
                shpQueryTask.execute(shpQuery, resultQueryShp);
            });
            var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
                    new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.25])
            );
            var line = new SimpleLineSymbol("solid",
                new dojo.Color([255,0,0]), 2);
            //获取查询结果shp高亮显示
            function resultQueryShp(queryResult) {

                //因为这里我们知道只获取了一个graphic,就不用循环去遍历了,获取graphic
                var graphic = queryResult.features[0];
                graphic.setSymbol(fill);//高亮显示
                map.graphics.add(graphic);
                // console.log(graphic);
                // 获取geometry
                var geometry = graphic.geometry;
                // console.log(geometry);

                //获取到行政区之后进行空间查询,设置查询河流的查询参数
                riverQuery.geometry = geometry;
                riverQuery.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                riverQuery.outSpatialReference = map.spatialReference;
                riverQuery.returnGeometry = true;
                riverQuery.outFields = ["NAME"];

                riverQueryTask.execute(riverQuery, showQueryResult);
            }

            function showQueryResult(queryResult) {
                for (var i = 0, len = queryResult.features.length; i < len; i++) {
                    var graphic = queryResult.features[i];
                    graphic.setSymbol(line);
                    map.graphics.add(graphic);
                }
            }
        });
    </script>
</head>
<body>
    <div id="map"></div>

    <div class="dropdown">
        <button class="dropbtn">下拉菜单</button>
        <div class="dropdown-content">
            <a href="javascript:void(0)">0</a>
            <a href="javascript:void(0)">1</a>
            <a href="javascript:void(0)">2</a>
        </div>
    </div>
    <input type="button" value="query" />
</body>
</html>