首页 > 代码库 > arcgis api for js入门开发系列四地图查询(含源代码)
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 () { dojo.require("esri.tasks.FindTask"); dojo.require("esri.tasks.FindParameters"); dojo.require("esri.tasks.IdentifyTask"); dojo.require("esri.tasks.IdentifyParameters");})();
一、属性查询模块：
1是基于FindTask属性查询的，可以查询的图层覆盖：餐饮、住宿、金融服务、购物、科研教育、医疗服务;
2是基于QueryTask属性查询，分类查询；
FindTask属性查询实现核心代码：
var find = new esri.tasks.FindTask(MapConfig.vecMapUrl + "/");//URL var params = new esri.tasks.FindParameters(); params.layerIds = [0,1,2,3,4,5]; //设置查询图层列表 params.searchFields = ["NAME"]; //设置查询图层的字段,根据NAME字段来模糊查询 params.searchText = keyword;//设置模糊查询的关键词 params.returnGeometry = true;//返回空间查询的geometry，方便把返回值结果以图标形式叠加在地图上 find.execute(params, DCI.Poi.findInfo);
/** * 所有图层的属性查询结果--FindTask */ findInfo: function (results) { DCI.Poi.clearAndhide(); var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13); var innerStr = []; var featureCount = results.length; //最大的显示页面 var maxpage = Math.ceil(featureCount / DCI.Poi.pageSize); if (results.length > 0) { $("#listpages").css({ display: "block" }); for (var i = 0; i < DCI.Poi.pageSize; i++) { var rExtent = null; var iId = i + 1; var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25); var infactItem = DCI.Poi.pageIndex * DCI.Poi.pageSize + i; var tempID = "tempID" + i; var pId = "poi_" + iId; if (results[infactItem] == undefined) //最后一页没有记录了 跳出循环 break; var attr = { "title": results[infactItem].feature.attributes.NAME, "content": results[infactItem].feature.attributes.NAME }; var baseGraphic = new esri.Graphic(results[infactItem].feature.geometry, baseGraphicsymbol, attr); baseGraphic.id = tempID; DCI.Poi.graphicslayer.add(baseGraphic); innerStr.push(‘<div class="left_list_li_box" onm ouseover="DCI.Poi.onPOIMouseOverRecord(‘ + i + ‘,\‘‘ + tempID + ‘\‘)" onm ouseout="DCI.Poi.onPOIMouseOutRecord(‘ + i + ‘,\‘‘ + tempID + ‘\‘)" id="‘ + pId + ‘">‘); innerStr.push(‘<div class="left_list_li_box_top">‘); innerStr.push(‘<div class="left2_box2">‘); innerStr.push(‘<img class="list_poi_marker" style="" src="http://www.mamicode.com/‘ + getRootPath() + ‘Content/images/poi/dw‘ + iId + ‘.png"></img>‘); innerStr.push(‘<div class="left_list_li1">‘); innerStr.push(‘<p>‘); innerStr.push(‘<a onclick="DCI.Poi.toLocationPOI(‘ + i + ‘,\‘‘ + tempID + ‘\‘,\‘‘ + results[infactItem].feature.attributes.NAME + ‘\‘)">‘ + results[infactItem].feature.attributes.NAME + ‘</a><br/>‘); innerStr.push(‘</p>‘); innerStr.push(‘</div>‘); innerStr.push(‘</div>‘) innerStr.push(‘</div>‘); innerStr.push(‘</div>‘); } $("#showLists").html(innerStr.join(‘‘)); //设置地图显示范围 if (rExtent == null) rExtent = baseGraphic._extent; else { rExtent = rExtent.union(baseGraphic._extent); } DCI.Poi.map.setExtent(rExtent.expand(2)); DCI.Poi.map.resize(); DCI.Poi.map.reposition(); //分页工具条 $("#listpages").PageOperator({ containerID: "listpages", count: featureCount, pageIndex: DCI.Poi.pageIndex, maxPage: maxpage, callback: function (pageIndex) { var keyword = $("#skeyword").val(); DCI.Poi.pageIndex = pageIndex; DCI.Poi.search(keyword, pageIndex, DCI.Poi.pageSize); } }); } else { alert("搜索不到相关数据"); } }
QueryTask属性查询实现核心代码：
var query = new esri.tasks.Query();query.returnGeometry = true;query.outFields = ["NAME"];query.where = "1=1";queryTask = new esri.tasks.QueryTask(typeUrl);queryTask.execute(query, DCI.Poi.navInfo);
/** * 指定图层的属性查询--Query */ navInfo: function (results) { DCI.Poi.clearAndhide(); var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13); var innerStr = []; var featureCount = results.features.length; //最大的显示页面 var maxpage = Math.ceil(featureCount / DCI.Poi.pageSize); if (results.features.length > 0) { $("#listpages").css({ display: "block" }); for (var i = 0; i < DCI.Poi.pageSize; i++) { var rExtent = null; var iId = i + 1; var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25); var infactItem = DCI.Poi.pageIndex * DCI.Poi.pageSize + i; var tempID = "tempID" + i; var pId = "poi_" + iId; if (results.features[infactItem] == undefined) //最后一页没有记录了 跳出循环 break; var attr = { "title": results.features[i].attributes.NAME, "content": results.features[i].attributes.NAME }; var baseGraphic = new esri.Graphic(results.features[infactItem].geometry, baseGraphicsymbol, attr); baseGraphic.id = tempID; DCI.Poi.graphicslayer.add(baseGraphic); innerStr.push(‘<div class="left_list_li_box" onm ouseover="DCI.Poi.onPOIMouseOverRecord(‘ + i + ‘,\‘‘ + tempID + ‘\‘)" onm ouseout="DCI.Poi.onPOIMouseOutRecord(‘ + i + ‘,\‘‘ + tempID + ‘\‘)" id="‘ + pId + ‘">‘); innerStr.push(‘<div class="left_list_li_box_top">‘); innerStr.push(‘<div class="left2_box2">‘); innerStr.push(‘<img class="list_poi_marker" style="" src="http://www.mamicode.com/‘ + getRootPath() + ‘Content/images/poi/dw‘ + iId + ‘.png"></img>‘); innerStr.push(‘<div class="left_list_li1">‘); innerStr.push(‘<p>‘); innerStr.push(‘<a onclick="DCI.Poi.toLocationPOI(‘ + i + ‘,\‘‘ + tempID + ‘\‘,\‘‘ + results.features[infactItem].attributes.NAME + ‘\‘)">‘ + results.features[infactItem].attributes.NAME + ‘</a><br/>‘); innerStr.push(‘</p>‘); innerStr.push(‘</div>‘); innerStr.push(‘</div>‘) innerStr.push(‘</div>‘); innerStr.push(‘</div>‘); } $("#showLists").html(innerStr.join(‘‘)); //设置地图显示范围 if (rExtent == null) rExtent = baseGraphic._extent; else { rExtent = rExtent.union(baseGraphic._extent); } DCI.Poi.map.setExtent(rExtent.expand(2)); DCI.Poi.map.resize(); DCI.Poi.map.reposition(); //分页工具条 $("#listpages").PageOperator({ containerID: "listpages", count: featureCount, pageIndex: DCI.Poi.pageIndex, maxPage: maxpage, callback: function (pageIndex) { var keyword = $("#skeyword").val(); DCI.Poi.pageIndex = pageIndex; DCI.Poi.search(keyword, pageIndex, DCI.Poi.pageSize); } }); } else { alert("搜索不到相关数据"); } }
二、空间查询模块：
1是基于QueryTask空间查询，查询指定的餐饮图层;
2是基于IdentifyTask空间查询，可以查询的图层覆盖：餐饮、住宿、金融服务、购物、科研教育、医疗服务；
IdentifyTask空间查询实现核心代码：
/** * 所有图层的空间查询--Identify */ searchIdentify: function (geometry) { var identifyTask = new esri.tasks.IdentifyTask(DCI.SpatialQuery.spatialQuery.layerName);//URL var identifyParams = new esri.tasks.IdentifyParameters(); identifyParams.tolerance = 3;//设置绘制框选图形范围的屏幕像素距离，这个值必须要设置，不然查询不到，我用官网在线例子的默认3 identifyParams.returnGeometry = true;//返回空间查询的geometry，方便把返回值结果以图标形式叠加在地图上 identifyParams.layerIds = [0, 1, 2, 3, 4, 5];//设置查询图层列表 identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;//设置查询的模式，我设置了可以查询所有的图层，不管是否可见，其他的模式具体参照api:https://developers.arcgis.com/javascript/3/jsapi/identifyparameters-amd.html identifyParams.geometry = geometry;//设置绘制框选图形范围 identifyParams.mapExtent = DCI.SpatialQuery.map.extent;//设置查询的地图当前范围，也是必须设置的 identifyTask.execute(identifyParams, DCI.SpatialQuery.identifyInfo); },
/** * 所有图层的空间查询获取结果--Identify */ identifyInfo: function (results) { //清空graphiclayer DCI.SpatialQuery.graphicslayer.clear(); DCI.SpatialQuery.map.infoWindow.hide(); var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13); var innerStr = []; var featureCount = results.length; if (results == null || featureCount == 0) { DCI.Poi.addSearchErrorPage("queryshowList"); $("#querylistpage").css({ display: "none" }); return; } //最大的显示页面 var maxpage = Math.ceil(featureCount / DCI.SpatialQuery.pageSize); $("#querylistpage").css({ display: "block" }); if (results.length > 0) { for (var i = 0; i < DCI.SpatialQuery.pageSize; i++) { var rExtent = null; var iId = i + 1; var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25); var infactItem = DCI.SpatialQuery.pageIndex * DCI.SpatialQuery.pageSize + i; var tempID = "tempID" + i; var pId = "poi_" + iId; if (results[infactItem] == undefined) //最后一页没有记录了 跳出循环 break; var attr = { "title": results[infactItem].feature.attributes.NAME, "content": results[infactItem].feature.attributes.NAME }; var baseGraphic = new esri.Graphic(results[infactItem].feature.geometry, baseGraphicsymbol, attr); baseGraphic.id = tempID; DCI.SpatialQuery.graphicslayer.add(baseGraphic); innerStr.push(‘<div class="left_list_li_box" onm ouseover="DCI.SpatialQuery.onPOIMouseOverRecord(‘ + i + ‘,\‘‘ + tempID + ‘\‘)" onm ouseout="DCI.SpatialQuery.onPOIMouseOutRecord(‘ + i + ‘,\‘‘ + tempID + ‘\‘)" id="‘ + pId + ‘">‘); innerStr.push(‘<div class="left_list_li_box_top">‘); innerStr.push(‘<div class="left2_box2">‘); innerStr.push(‘<img class="list_poi_marker" style="" src="http://www.mamicode.com/‘ + getRootPath() + ‘Content/images/poi/dw‘ + iId + ‘.png"></img>‘); innerStr.push(‘<div class="left_list_li1">‘); innerStr.push(‘<p>‘); innerStr.push(‘<a onclick="DCI.SpatialQuery.toLocation(‘ + i + ‘,\‘‘ + tempID + ‘\‘,\‘‘ + results[infactItem].feature.attributes.NAME + ‘\‘)">‘ + results[infactItem].feature.attributes.NAME + ‘</a><br/>‘); innerStr.push(‘</p>‘); innerStr.push(‘</div>‘); innerStr.push(‘</div>‘) innerStr.push(‘</div>‘); innerStr.push(‘</div>‘); } $("#queryshowList").html(innerStr.join(‘‘)); //设置地图显示范围 if (rExtent == null) rExtent = baseGraphic._extent; else { rExtent = rExtent.union(baseGraphic._extent); } DCI.SpatialQuery.map.setExtent(rExtent.expand(2)); DCI.SpatialQuery.map.resize(); DCI.SpatialQuery.map.reposition(); //分页工具条 $("#querylistpage").PageOperator({ containerID: "querylistpage", count: featureCount, pageIndex: DCI.SpatialQuery.pageIndex, maxPage: maxpage, callback: function (pageIndex) { DCI.SpatialQuery.pageIndex = pageIndex; if (DCI.SpatialQuery.type[0] == "0") {//指定图层的空间查询 DCI.SpatialQuery.searchSP(DCI.SpatialQuery.sgeometry); } else if (DCI.SpatialQuery.type[0] == "1") {//所有图层的空间查询 DCI.SpatialQuery.searchIdentify(DCI.SpatialQuery.sgeometry); } } }); } else { alert("搜索不到相关数据"); } },
QueryTask空间查询实现核心代码：
/** * 指定图层的空间查询--Query */ searchSP: function (geometry) { var queryTask = new esri.tasks.QueryTask(DCI.SpatialQuery.spatialQuery.layerName);//URL var query = new esri.tasks.Query(); query.returnGeometry = true;//返回空间查询的geometry，方便把返回值结果以图标形式叠加在地图上 query.outFields = [DCI.SpatialQuery.spatialQuery.returnFields];//设置返回值的字段 query.geometry = geometry;//设置绘制框选图形范围 queryTask.execute(query, DCI.SpatialQuery.navInfo); }, /** * 所有图层的空间查询--Query */ navInfo: function (results) { //清空graphiclayer DCI.SpatialQuery.graphicslayer.clear(); DCI.SpatialQuery.map.infoWindow.hide(); var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13); var innerStr = []; var featureCount = results.features.length; if (results.features == null || featureCount == 0) { DCI.Poi.addSearchErrorPage("queryshowList"); $("#querylistpage").css({ display: "none" }); return; } //最大的显示页面 var maxpage = Math.ceil(featureCount / DCI.SpatialQuery.pageSize); $("#querylistpage").css({ display: "block" }); if (results.features.length > 0) { for (var i = 0; i < DCI.SpatialQuery.pageSize; i++) { var rExtent = null; var iId = i + 1; var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25); var infactItem = DCI.SpatialQuery.pageIndex * DCI.SpatialQuery.pageSize + i; var tempID = "tempID" + i; var pId = "poi_" + iId; if (results.features[infactItem] == undefined) //最后一页没有记录了 跳出循环 break; var attr = { "title": results.features[i].attributes.NAME, "content": results.features[i].attributes.NAME }; var baseGraphic = new esri.Graphic(results.features[infactItem].geometry, baseGraphicsymbol, attr); baseGraphic.id = tempID; DCI.SpatialQuery.graphicslayer.add(baseGraphic); innerStr.push(‘<div class="left_list_li_box" onm ouseover="DCI.SpatialQuery.onPOIMouseOverRecord(‘ + i + ‘,\‘‘ + tempID + ‘\‘)" onm ouseout="DCI.SpatialQuery.onPOIMouseOutRecord(‘ + i + ‘,\‘‘ + tempID + ‘\‘)" id="‘ + pId + ‘">‘); innerStr.push(‘<div class="left_list_li_box_top">‘); innerStr.push(‘<div class="left2_box2">‘); innerStr.push(‘<img class="list_poi_marker" style="" src="http://www.mamicode.com/‘ + getRootPath() + ‘Content/images/poi/dw‘ + iId + ‘.png"></img>‘); innerStr.push(‘<div class="left_list_li1">‘); innerStr.push(‘<p>‘); innerStr.push(‘<a onclick="DCI.SpatialQuery.toLocation(‘ + i + ‘,\‘‘ + tempID + ‘\‘,\‘‘ + results.features[infactItem].attributes.NAME + ‘\‘)">‘ + results.features[infactItem].attributes.NAME + ‘</a><br/>‘); innerStr.push(‘</p>‘); innerStr.push(‘</div>‘); innerStr.push(‘</div>‘) innerStr.push(‘</div>‘); innerStr.push(‘</div>‘); } $("#queryshowList").html(innerStr.join(‘‘)); //设置地图显示范围 if (rExtent == null) rExtent = baseGraphic._extent; else { rExtent = rExtent.union(baseGraphic._extent); } DCI.SpatialQuery.map.setExtent(rExtent.expand(2)); DCI.SpatialQuery.map.resize(); DCI.SpatialQuery.map.reposition(); //分页工具条 $("#querylistpage").PageOperator({ containerID: "querylistpage", count: featureCount, pageIndex: DCI.SpatialQuery.pageIndex, maxPage: maxpage, callback: function (pageIndex) { DCI.SpatialQuery.pageIndex = pageIndex; if (DCI.SpatialQuery.type[0] == "0") {//指定图层的空间查询 DCI.SpatialQuery.searchSP(DCI.SpatialQuery.sgeometry); } else if (DCI.SpatialQuery.type[0] == "1") {//所有图层的空间查询 DCI.SpatialQuery.searchIdentify(DCI.SpatialQuery.sgeometry); } } }); } else { alert("搜索不到相关数据"); } }
最后，提供源代码下载：http://pan.baidu.com/s/1eRCoH02
dlsearch.mxd下载：http://pan.baidu.com/s/1qYRJGKG
arcgis api for js入门开发系列四地图查询(含源代码)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。