（五）ArcGIS JS FindTask 按屬性查詢地圖資訊
阿新 • • 發佈：2019-02-01
前言
我們在使用ArcGIS JS API時，會遇到在文字框中輸入名稱，查詢該要素，實現要素的查詢功能。
準備
思路
- HTML頁文字框接收查詢名稱
- 點選事件觸發API中的findTask查詢
- 例項化findTask引數FindParameters並設定
- 例項化FindTask引數並呼叫execute函式
- 將獲得的要素定位高亮顯示
- 在回撥函式中新建圖形符號
- 設定獲得findTask查詢得到geometry
- 獲得中心點座標並進行定位
- 在table面板中展示資訊
- 利用陣列獲得查詢資訊
- 在table中展示資訊
程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</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> Name:<input id="searchInput" type="text"> <input id="btn" type="button" value="查詢"> <table > <thead> <tr> <th width="100px">名稱</th> <th width="100px">型別</th> <th width="100px">面積</th> </tr> </thead> <tbody id="infoBody"> </tbody> </table> <script> require(["esri/map", "dojo/query", "dojo/dom", "dojo/on", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/FindTask", "esri/tasks/FindParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Point", "esri/Color", "esri/graphic", "dojo/domReady!"], function(Map,query,dom,on,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleMarkerSymbol, SimpleLineSymbol,SimpleFillSymbol,Point,Color,Graphic){ var nameArr=[];//用於儲存查詢地點名稱 var shapeArr=[];//用於儲存查詢shape var areaArr=[];//用於儲存面積 var map = new Map("mapDiv"); var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer"); map.addLayer(layer); query("#btn").on("click",function(){ var name=dom.byId("searchInput").value;//獲得輸入框的值 map.graphics.clear();//清空graphics //例項化查詢引數 var findParams = new FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [0,2];//對地級城市和省記性查詢 findParams.searchFields = ["name"];//匹配圖層中的name屬性 findParams.searchText = name; //例項化查詢物件 var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer"); //進行查詢 findTask.execute(findParams,showFindResult) }); function showFindResult(queryResult) { //初始化資訊暫存陣列 nameArr=[]; shapeArr=[]; areaArr=[]; if (queryResult.length === 0) { alert("查詢無結果"); return; } for (var i = 0; i < queryResult.length; i++) { nameArr[i]=queryResult[i].feature.attributes.NAME; shapeArr[i]=queryResult[i].feature.attributes.Shape; areaArr[i]=queryResult[i].feature.attributes.AREA; //定義高亮圖形的符號 var pointSymbol = new SimpleMarkerSymbol(//定義點符號 SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 1), new Color([255,0,0])); 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 ={}; //建立graphic var locationPoint ={};//建立定位點 var geometry = queryResult[i].feature.geometry;//獲得該圖形的形狀 if(geometry.type ==="polygon"){ graphic = new Graphic(geometry, PolygonSymbol); locationPoint=geometry.getCentroid(); } else if(geometry.type ==="point"){ graphic = new Graphic(geometry, pointSymbol); locationPoint=geometry; } //將圖形新增到map中 map.graphics.add(graphic); map.centerAndZoom(locationPoint,1); } var html=""; for(var i=0;i<nameArr.length;i++){ html+="<tr>" + " <td >"+nameArr[i]+"</td>" + "<td >"+shapeArr[i]+"</td>" + "<td >"+areaArr[i]+"</td>"+ "</tr>"; } dom.byId("infoBody").innerHTML =html; } }) </script> </body> </html>
執行結果
- 查詢前
- 城市查詢
- 省查詢
注意問題
- 釋出圖層服務結構
