arcgis api for js入門開發系列四地圖查詢

備註：由於實現本篇功能的需求，修改了地圖數據的dlsearch.mxd，然後更新了地圖服務，需要的在文章最後有提供最新的mxd以及源代碼下載的

上一篇實現了demo的地圖工具欄，本篇新增地圖查詢功能，包括屬性查詢和空間查詢兩大塊，截圖如下：

屬性查詢效果圖：

空間查詢效果圖：

談核心代碼實現之前，我大概的講一講arcgis for js的地圖查詢方式，一般來說，總共有三種查詢方式：FindTask、IdentifyTask、QueryTask

（1）FindTask查詢模式：基於關鍵字來模糊查詢地圖圖層，屬於文本型的，不能基於地圖的設置的空間範圍Geometry來查詢，但是可以跨越多個圖層來查詢，比如餐飲圖層、醫療服務圖層等等；

（2）IdentifyTask查詢模式：跟FindTask反過來，基於地圖的設置的空間範圍Geometry來查詢，不能基於文本查詢，同樣可以跨越多個圖層來查詢；

（3）QueryTask查詢模式：結合FindTask以及IdentifyTask一體，可以基於文本或者空間範圍來查詢，但是限定了查詢圖層，不能跨越多個圖層來查詢；

下面依據屬性查詢和空間查詢不同思路來講解一下核心實現模塊，實現之前在map.js必須引入相關的調用api包：

(function () {n dojo.require("esri.tasks.FindTask");n dojo.require("esri.tasks.FindParameters");n dojo.require("esri.tasks.IdentifyTask");n dojo.require("esri.tasks.IdentifyParameters");n})();n

一、屬性查詢模塊：

1是基於FindTask屬性查詢的，可以查詢的圖層覆蓋：餐飲、住宿、金融服務、購物、科研教育、醫療服務;

2是基於QueryTask屬性查詢，分類查詢；

FindTask屬性查詢實現核心代碼：

var find = new esri.tasks.FindTask(MapConfig.vecMapUrl + "/");//URLn var params = new esri.tasks.FindParameters();n params.layerIds = [0,1,2,3,4,5]; //設置查詢圖層列表n params.searchFields = ["NAME"]; //設置查詢圖層的欄位,根據NAME欄位來模糊查詢n params.searchText = keyword;//設置模糊查詢的關鍵詞n params.returnGeometry = true;//返回空間查詢的geometry，方便把返回值結果以圖標形式疊加在地圖上n find.execute(params, DCI.Poi.findInfo);nn/**n * 所有圖層的屬性查詢結果--FindTaskn */n findInfo: function (results) {n DCI.Poi.clearAndhide();n var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13);n var innerStr = [];nn var featureCount = results.length;n //最大的顯示頁面n var maxpage = Math.ceil(featureCount / DCI.Poi.pageSize);n if (results.length > 0) {n $("#listpages").css({ display: "block" });n for (var i = 0; i < DCI.Poi.pageSize; i++) {n var rExtent = null;n var iId = i + 1;n var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25);n var infactItem = DCI.Poi.pageIndex * DCI.Poi.pageSize + i;n var tempID = "tempID" + i;n var pId = "poi_" + iId;n if (results[infactItem] == undefined) //最後一頁沒有記錄了 跳出循環n break;nn var attr = { "title": results[infactItem].feature.attributes.NAME, "content": results[infactItem].feature.attributes.NAME };n var baseGraphic = new esri.Graphic(results[infactItem].feature.geometry, baseGraphicsymbol, attr);n baseGraphic.id = tempID;n DCI.Poi.graphicslayer.add(baseGraphic);nn innerStr.push(<div class="left_list_li_box" onmouseover="DCI.Poi.onPOIMouseOverRecord( + i + , + tempID + )" onmouseout="DCI.Poi.onPOIMouseOutRecord( + i + , + tempID + )" id=" + pId + ">);n innerStr.push(<div class="left_list_li_box_top">);n innerStr.push(<div class="left2_box2">);n innerStr.push(<img class="list_poi_marker" stylex="" src=" + getRootPath() + Content/images/poi/dw + iId + .png"></img>);n innerStr.push(<div class="left_list_li1">);n innerStr.push(<p>);n innerStr.push(<a onclick="DCI.Poi.toLocationPOI( + i + , + tempID + , + results[infactItem].feature.attributes.NAME + )"> + results[infactItem].feature.attributes.NAME + </a><br/>);n innerStr.push(</p>);n innerStr.push(</div>);n innerStr.push(</div>)n innerStr.push(</div>);n innerStr.push(</div>);n }n $("#showLists").html(innerStr.join());nn //設置地圖顯示範圍n if (rExtent == null)n rExtent = baseGraphic._extent;n else {n rExtent = rExtent.union(baseGraphic._extent);n }nn DCI.Poi.map.setExtent(rExtent.expand(2));n DCI.Poi.map.resize();n DCI.Poi.map.reposition();n //分頁工具條 n $("#listpages").PageOperator({n containerID: "listpages",n count: featureCount,n pageIndex: DCI.Poi.pageIndex,n maxPage: maxpage,n callback: function (pageIndex) {n var keyword = $("#skeyword").val();n DCI.Poi.pageIndex = pageIndex;n DCI.Poi.search(keyword, pageIndex, DCI.Poi.pageSize);n }n });n } else {n alert("搜索不到相關數據");n }n }n

QueryTask屬性查詢實現核心代碼：

var query = new esri.tasks.Query();nquery.returnGeometry = true;nquery.outFields = ["NAME"];nquery.where = "1=1";nqueryTask = new esri.tasks.QueryTask(typeUrl);nqueryTask.execute(query, DCI.Poi.navInfo);nn/**n * 指定圖層的屬性查詢--Queryn */n navInfo: function (results) {n DCI.Poi.clearAndhide();n var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13);n var innerStr = [];nn var featureCount = results.features.length;n //最大的顯示頁面n var maxpage = Math.ceil(featureCount / DCI.Poi.pageSize);n if (results.features.length > 0) {n $("#listpages").css({ display: "block" });n for (var i = 0; i < DCI.Poi.pageSize; i++) {n var rExtent = null;n var iId = i + 1;n var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25);n var infactItem = DCI.Poi.pageIndex * DCI.Poi.pageSize + i;n var tempID = "tempID" + i;n var pId = "poi_" + iId;n if (results.features[infactItem] == undefined) //最後一頁沒有記錄了 跳出循環n break;nn var attr = { "title": results.features[i].attributes.NAME, "content": results.features[i].attributes.NAME };n var baseGraphic = new esri.Graphic(results.features[infactItem].geometry, baseGraphicsymbol, attr);n baseGraphic.id = tempID;n DCI.Poi.graphicslayer.add(baseGraphic);nn innerStr.push(<div class="left_list_li_box" onmouseover="DCI.Poi.onPOIMouseOverRecord( + i + , + tempID + )" onmouseout="DCI.Poi.onPOIMouseOutRecord( + i + , + tempID + )" id=" + pId + ">);n innerStr.push(<div class="left_list_li_box_top">);n innerStr.push(<div class="left2_box2">);n innerStr.push(<img class="list_poi_marker" stylex="" src=" + getRootPath() + Content/images/poi/dw + iId + .png"></img>);n innerStr.push(<div class="left_list_li1">);n innerStr.push(<p>);n innerStr.push(<a onclick="DCI.Poi.toLocationPOI( + i + , + tempID + , + results.features[infactItem].attributes.NAME + )"> + results.features[infactItem].attributes.NAME + </a><br/>);n innerStr.push(</p>);n innerStr.push(</div>);n innerStr.push(</div>)n innerStr.push(</div>);n innerStr.push(</div>);n }n $("#showLists").html(innerStr.join());nn //設置地圖顯示範圍n if (rExtent == null)n rExtent = baseGraphic._extent;n else {n rExtent = rExtent.union(baseGraphic._extent);n }nn DCI.Poi.map.setExtent(rExtent.expand(2));n DCI.Poi.map.resize();n DCI.Poi.map.reposition();n //分頁工具條 n $("#listpages").PageOperator({n containerID: "listpages",n count: featureCount,n pageIndex: DCI.Poi.pageIndex,n maxPage: maxpage,n callback: function (pageIndex) {n var keyword = $("#skeyword").val();n DCI.Poi.pageIndex = pageIndex;n DCI.Poi.search(keyword, pageIndex, DCI.Poi.pageSize);n }n });n } else {n alert("搜索不到相關數據");n }n }n

二、空間查詢模塊：

1是基於QueryTask空間查詢，查詢指定的餐飲圖層;

2是基於IdentifyTask空間查詢，可以查詢的圖層覆蓋：餐飲、住宿、金融服務、購物、科研教育、醫療服務；

IdentifyTask空間查詢實現核心代碼：

/**n * 所有圖層的空間查詢--Identifyn */n searchIdentify: function (geometry) {n var identifyTask = new esri.tasks.IdentifyTask(DCI.SpatialQuery.spatialQuery.layerName);//URLn var identifyParams = new esri.tasks.IdentifyParameters();n identifyParams.tolerance = 3;//設置繪製框選圖形範圍的屏幕像素距離，這個值必須要設置，不然查詢不到，我用官網在線例子的默認3n identifyParams.returnGeometry = true;//返回空間查詢的geometry，方便把返回值結果以圖標形式疊加在地圖上n identifyParams.layerIds = [0, 1, 2, 3, 4, 5];//設置查詢圖層列表n identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;//設置查詢的模式，我設置了可以查詢所有的圖層，不管是否可見，其他的模式具體參照api:https://developers.arcgis.com/javascript/3/jsapi/identifyparameters-amd.htmln identifyParams.geometry = geometry;//設置繪製框選圖形範圍n identifyParams.mapExtent = DCI.SpatialQuery.map.extent;//設置查詢的地圖當前範圍，也是必須設置的n identifyTask.execute(identifyParams, DCI.SpatialQuery.identifyInfo);n },nn/**n * 所有圖層的空間查詢獲取結果--Identifyn */n identifyInfo: function (results) {n //清空graphiclayern DCI.SpatialQuery.graphicslayer.clear();n DCI.SpatialQuery.map.infoWindow.hide();n var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13);n var innerStr = [];n var featureCount = results.length;n if (results == null || featureCount == 0) {n DCI.Poi.addSearchErrorPage("queryshowList");n $("#querylistpage").css({ display: "none" });n return;n }n //最大的顯示頁面n var maxpage = Math.ceil(featureCount / DCI.SpatialQuery.pageSize);n $("#querylistpage").css({ display: "block" });n if (results.length > 0) {n for (var i = 0; i < DCI.SpatialQuery.pageSize; i++) {n var rExtent = null;n var iId = i + 1;n var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25);n var infactItem = DCI.SpatialQuery.pageIndex * DCI.SpatialQuery.pageSize + i;n var tempID = "tempID" + i;n var pId = "poi_" + iId;n if (results[infactItem] == undefined) //最後一頁沒有記錄了 跳出循環n break;n var attr = { "title": results[infactItem].feature.attributes.NAME, "content": results[infactItem].feature.attributes.NAME };n var baseGraphic = new esri.Graphic(results[infactItem].feature.geometry, baseGraphicsymbol, attr);n baseGraphic.id = tempID;n DCI.SpatialQuery.graphicslayer.add(baseGraphic);n innerStr.push(<div class="left_list_li_box" onmouseover="DCI.SpatialQuery.onPOIMouseOverRecord( + i + , + tempID + )" onmouseout="DCI.SpatialQuery.onPOIMouseOutRecord( + i + , + tempID + )" id=" + pId + ">);n innerStr.push(<div class="left_list_li_box_top">);n innerStr.push(<div class="left2_box2">);n innerStr.push(<img class="list_poi_marker" stylex="" src=" + getRootPath() + Content/images/poi/dw + iId + .png"></img>);n innerStr.push(<div class="left_list_li1">);n innerStr.push(<p>);n innerStr.push(<a onclick="DCI.SpatialQuery.toLocation( + i + , + tempID + , + results[infactItem].feature.attributes.NAME + )"> + results[infactItem].feature.attributes.NAME + </a><br/>);n innerStr.push(</p>);n innerStr.push(</div>);n innerStr.push(</div>)n innerStr.push(</div>);n innerStr.push(</div>);n }n $("#queryshowList").html(innerStr.join());nn //設置地圖顯示範圍n if (rExtent == null)n rExtent = baseGraphic._extent;n else {n rExtent = rExtent.union(baseGraphic._extent);n }nn DCI.SpatialQuery.map.setExtent(rExtent.expand(2));n DCI.SpatialQuery.map.resize();n DCI.SpatialQuery.map.reposition();n //分頁工具條 n $("#querylistpage").PageOperator({n containerID: "querylistpage",n count: featureCount,n pageIndex: DCI.SpatialQuery.pageIndex,n maxPage: maxpage,n callback: function (pageIndex) {n DCI.SpatialQuery.pageIndex = pageIndex;n if (DCI.SpatialQuery.type[0] == "0") {//指定圖層的空間查詢n DCI.SpatialQuery.searchSP(DCI.SpatialQuery.sgeometry);n } else if (DCI.SpatialQuery.type[0] == "1") {//所有圖層的空間查詢n DCI.SpatialQuery.searchIdentify(DCI.SpatialQuery.sgeometry);n }n }n });n } else {n alert("搜索不到相關數據");n }n },n

QueryTask空間查詢實現核心代碼：

/**n * 指定圖層的空間查詢--Queryn */n searchSP: function (geometry) {n var queryTask = new esri.tasks.QueryTask(DCI.SpatialQuery.spatialQuery.layerName);//URLn var query = new esri.tasks.Query();n query.returnGeometry = true;//返回空間查詢的geometry，方便把返回值結果以圖標形式疊加在地圖上n query.outFields = [DCI.SpatialQuery.spatialQuery.returnFields];//設置返回值的欄位n query.geometry = geometry;//設置繪製框選圖形範圍n queryTask.execute(query, DCI.SpatialQuery.navInfo);n },n /**n * 所有圖層的空間查詢--Queryn */n navInfo: function (results) {n //清空graphiclayern DCI.SpatialQuery.graphicslayer.clear();n DCI.SpatialQuery.map.infoWindow.hide();n var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13);n var innerStr = [];n var featureCount = results.features.length;n if (results.features == null || featureCount == 0) {n DCI.Poi.addSearchErrorPage("queryshowList");n $("#querylistpage").css({ display: "none" });n return;n }n //最大的顯示頁面n var maxpage = Math.ceil(featureCount / DCI.SpatialQuery.pageSize);n $("#querylistpage").css({ display: "block" });n if (results.features.length > 0) {n for (var i = 0; i < DCI.SpatialQuery.pageSize; i++) {n var rExtent = null;n var iId = i + 1;n var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25);n var infactItem = DCI.SpatialQuery.pageIndex * DCI.SpatialQuery.pageSize + i;n var tempID = "tempID" + i;n var pId = "poi_" + iId;n if (results.features[infactItem] == undefined) //最後一頁沒有記錄了 跳出循環n break;n var attr = { "title": results.features[i].attributes.NAME, "content": results.features[i].attributes.NAME };n var baseGraphic = new esri.Graphic(results.features[infactItem].geometry, baseGraphicsymbol, attr);n baseGraphic.id = tempID;n DCI.SpatialQuery.graphicslayer.add(baseGraphic);n innerStr.push(<div class="left_list_li_box" onmouseover="DCI.SpatialQuery.onPOIMouseOverRecord( + i + , + tempID + )" onmouseout="DCI.SpatialQuery.onPOIMouseOutRecord( + i + , + tempID + )" id=" + pId + ">);n innerStr.push(<div class="left_list_li_box_top">);n innerStr.push(<div class="left2_box2">);n innerStr.push(<img class="list_poi_marker" stylex="" src=" + getRootPath() + Content/images/poi/dw + iId + .png"></img>);n innerStr.push(<div class="left_list_li1">);n innerStr.push(<p>);n innerStr.push(<a onclick="DCI.SpatialQuery.toLocation( + i + , + tempID + , + results.features[infactItem].attributes.NAME + )"> + results.features[infactItem].attributes.NAME + </a><br/>);n innerStr.push(</p>);n innerStr.push(</div>);n innerStr.push(</div>)n innerStr.push(</div>);n innerStr.push(</div>);n }n $("#queryshowList").html(innerStr.join());nn //設置地圖顯示範圍n if (rExtent == null)n rExtent = baseGraphic._extent;n else {n rExtent = rExtent.union(baseGraphic._extent);n }nn DCI.SpatialQuery.map.setExtent(rExtent.expand(2));n DCI.SpatialQuery.map.resize();n DCI.SpatialQuery.map.reposition();n //分頁工具條 n $("#querylistpage").PageOperator({n containerID: "querylistpage",n count: featureCount,n pageIndex: DCI.SpatialQuery.pageIndex,n maxPage: maxpage,n callback: function (pageIndex) {n DCI.SpatialQuery.pageIndex = pageIndex;n if (DCI.SpatialQuery.type[0] == "0") {//指定圖層的空間查詢n DCI.SpatialQuery.searchSP(DCI.SpatialQuery.sgeometry);n } else if (DCI.SpatialQuery.type[0] == "1") {//所有圖層的空間查詢n DCI.SpatialQuery.searchIdentify(DCI.SpatialQuery.sgeometry);n }n }n });n } else {n alert("搜索不到相關數據");n }n }n

GIS之家作品：首頁-GIS之家-淘寶網

GIS之家興趣部落：gis之家部落-興趣部落

GIS項目交流群：238339408

GIS之家交流群一：432512093