(六)ArcGIS JS QueryTask 按空间查询地图信息 逃离我推掉我的手 2021-09-14 16:46 748阅读 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
还没有评论,来说两句吧...