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

最新推荐文章于 2024-04-20 19:08:54 发布

idomyway

最新推荐文章于 2024-04-20 19:08:54 发布

阅读量970

点赞数

分类专栏： ArcGIS JS 学习笔记文章标签： api arcgis 空间查询 identifyTa javascript

本文链接：https://blog.csdn.net/idomyway/article/details/79263435

版权

ArcGIS JS 学习笔记专栏收录该内容

26 篇文章 16 订阅

订阅专栏

前言

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

准备

在本地部署ArcGIS JS API/调用在线的API
- 本地部署ArcGIS JS API
发布好的动态地图服务
- 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>