（六）ArcGIS JS QueryTask 按空间查询地图信息

逃离我推掉我的手 2021-09-14 16:46 785阅读 0赞

### 前言 ###

我们在使用ArcGIS JS API时，会遇到点击实现查找元素属性的需求。在ArcGIS JS 中通过IdentifyTask可以实现地图的空间查询

### 准备 ###

*  在本地部署ArcGIS JS API/调用在线的API
    
     *  [本地部署ArcGIS JS API][ArcGIS JS API]
 *  发布好的动态地图服务
    
     *  [http://blog.csdn.net/idomyway/article/details/79232011][http_blog.csdn.net_idomyway_article_details_79232011]

### 思路 ###

*  点击触发地图监听事件
 *  点击事件触发API中的queryTask查询
    
     *  实例化queryTask参数query并设置
     *  实例化QueryTask参数并调用execute函数
 *  将获得的要素定位高亮显示
    
     *  在回调函数中新建图形符号
     *  设置获得QueryTask查询得到geometry
     *  获得中心点坐标并进行定位
 *  在table面板中展示信息
    
     *  利用数组获得查询信息
     *  在table中展示信息

### 代码实现 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>IdentifyTask</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
        <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
        <style>
            *{
                padding: 0px;
                margin:0px;
            }
            table{
                margin-top: 10px;
                border-collapse: collapse;
                overflow-y: scroll;
            }
            th,td{
                padding: 0px;
                border:1px solid #000;
            }
        </style>
    </head>
    <body class="tundra">
        <div id="mapDiv" style="width:calc(100% - 2px); height:800px; border:1px solid #000;"></div>
        <table >
            <thead>
            <tr>
                <th width="100px">名称</th>
                <th width="100px">面积</th>
            </tr>
            </thead>
            <tbody id="infoBody">
            </tbody>
        </table>
        <script>
        require(["esri/map",
                "dojo/query",
                "dojo/on",
                "dojo/dom",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/tasks/QueryTask",
                "esri/tasks/query",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/Color",
                "esri/graphic",
                "dojo/domReady!"],
            function(Map,query,on,dom,ArcGISDynamicMapServiceLayer,QueryTask,Query,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
                var nameArr=[];//用于存储查询地点名称
                var areaArr=[];//用于存储面积
    
                var map = new Map("mapDiv");
                var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer");
                map.addLayer(layer);
                map.on("click",mapClick);
                function mapClick(e){
                    //获得用户点击的地图坐标
                    var point=e.mapPoint;
                    map.graphics.clear();//清空graphics
                    //实例化查询参数
                    query=new Query();
                    query.geometry = point;
                    query.outFields = ["*"];
                    query.outSpatialReference = map.spatialReference;
                    query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                    query.returnGeometry = true;
                    //实例化查询对象
                    var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer/2");
                    //进行查询
                    queryTask.execute(query,showFindResult)
    
                }
                function showFindResult(queryResult) {
                    //初始化信息暂存数组
                    nameArr=[];
                    shapeArr=[];
                    areaArr=[];
    
                    if (queryResult.features === 0) {
                        alert("没有该元素");
                        return;
                    }
                    for (var i = 0; i < queryResult.features.length; i++) {
                        nameArr[i]=queryResult.features[i].attributes.NAME;
                        areaArr[i]=queryResult.features[i].attributes.AREA;
    
                        //获得该图形的形状
                        var feature = queryResult.features[i];
                        var geometry = feature.geometry;
                        //定义面的边界线符号
                        var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
                        //定义面符号
                        var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
                        //创建客户端图形
                        var graphic = new Graphic(geometry, PolygonSymbol);
                        //将客户端图形添加到map中
                        map.graphics.add(graphic);
                    }
                    var html="";
                    for(var i=0;i<nameArr.length;i++){
                        html+="<tr>" +
                            " <td >"+nameArr[i]+"</td>" +
                            "<td >"+areaArr[i]+"</td>"+
                            "</tr>";
                    }
                    dom.byId("infoBody").innerHTML =html;
                }
            })
    </script>
    </body>
    </html>

### 运行结果 ###

*  查询前

![这里写图片描述][SouthEast]

*  点击查询

![这里写图片描述][SouthEast 1]

### 注意问题 ###

*  发布图层服务结构

![这里写图片描述][SouthEast 2]

[ArcGIS JS API]: http://blog.csdn.net/idomyway/article/details/78648907
[http_blog.csdn.net_idomyway_article_details_79232011]: http://blog.csdn.net/idomyway/article/details/79232011
[SouthEast]: /images/20210726/51f2b56b2d704d8f891575cf54b8b843.png
[SouthEast 1]: /images/20210726/0608f2411f054dc6a4e041bb24e5f04d.png
[SouthEast 2]: /images/20210726/85874d765d8f4bc6aee57e5075760549.png