arcgis api for js入门开发系列四地图查询(含源代码)

sinna

备注：由于实现本篇功能的需求，修改了地图数据的dlsearch.mxd，然后更新了地图服务，需要的在文章最后有提供最新的mxd以及源代码下载的

上一篇实现了demo的地图工具栏，本篇新增地图查询功能，包括属性查询和空间查询两大块，截图如下：

属性查询效果图：

空间查询效果图：

谈核心代码实现之前，我大概的讲一讲arcgis for js的地图查询方式，一般来说，总共有三种查询方式：FindTask、IdentifyTask、QueryTask

（1）FindTask查询模式：基于关键字来模糊查询地图图层，属于文本型的，不能基于地图的设置的空间范围Geometry来查询，但是可以跨越多个图层来查询，比如餐饮图层、医疗服务图层等等；

（2）IdentifyTask查询模式：跟FindTask反过来，基于地图的设置的空间范围Geometry来查询，不能基于文本查询，同样可以跨越多个图层来查询；

（3）QueryTask查询模式：结合FindTask以及IdentifyTask一体，可以基于文本或者空间范围来查询，但是限定了查询图层，不能跨越多个图层来查询；

下面依据属性查询和空间查询不同思路来讲解一下核心实现模块，实现之前在map.js必须引入相关的调用api包：

1. (function () {
   
2.     dojo.require("esri.tasks.FindTask");
   
3.     dojo.require("esri.tasks.FindParameters");
   
4.     dojo.require("esri.tasks.IdentifyTask");
   
5.     dojo.require("esri.tasks.IdentifyParameters");
   
6. })();

复制代码

一、属性查询模块：

1是基于FindTask属性查询的，可以查询的图层覆盖：餐饮、住宿、金融服务、购物、科研教育、医疗服务;

2是基于QueryTask属性查询，分类查询；

FindTask属性查询实现核心代码：

1. var find = new esri.tasks.FindTask(MapConfig.vecMapUrl + "/");//URL
   
2.                 var params = new esri.tasks.FindParameters();
   
3.                 params.layerIds = [0,1,2,3,4,5]; //设置查询图层列表
   
4.                 params.searchFields = ["NAME"]; //设置查询图层的字段,根据NAME字段来模糊查询
   
5.                 params.searchText = keyword;//设置模糊查询的关键词
   
6.                 params.returnGeometry = true;//返回空间查询的geometry，方便把返回值结果以图标形式叠加在地图上
   
7.                 find.execute(params, DCI.Poi.findInfo);

复制代码

1. /**
   
2.      * 所有图层的属性查询结果--FindTask
   
3.     */
   
4.     findInfo: function (results) {
   
5.         DCI.Poi.clearAndhide();
   
6.         var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13);
   
7.         var innerStr = [];
   
8. 
   
9.         var featureCount = results.length;
   
10.         //最大的显示页面
    
11.         var maxpage = Math.ceil(featureCount / DCI.Poi.pageSize);
    
12.         if (results.length > 0) {
    
13.             $("#listpages").css({ display: "block" });
    
14.             for (var i = 0; i < DCI.Poi.pageSize; i++) {
    
15.                 var rExtent = null;
    
16.                 var iId = i + 1;
    
17.                 var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25);
    
18.                 var infactItem = DCI.Poi.pageIndex * DCI.Poi.pageSize + i;
    
19.                 var tempID = "tempID" + i;
    
20.                 var pId = "poi_" + iId;
    
21.                 if (results[infactItem] == undefined) //最后一页没有记录了 跳出循环
    
22.                     break;
    
23. 
    
24.                 var attr = { "title": results[infactItem].feature.attributes.NAME, "content": results[infactItem].feature.attributes.NAME };
    
25.                 var baseGraphic = new esri.Graphic(results[infactItem].feature.geometry, baseGraphicsymbol, attr);
    
26.                 baseGraphic.id = tempID;
    
27.                 DCI.Poi.graphicslayer.add(baseGraphic);
    
28. 
    
29.                 innerStr.push('<div class="left_list_li_box" onmouseover="DCI.Poi.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" onmouseout="DCI.Poi.onPOIMouseOutRecord(' + i + ',\'' + tempID + '\')"  id="' + pId + '">');
    
30.                 innerStr.push('<div class="left_list_li_box_top">');
    
31.                 innerStr.push('<div class="left2_box2">');
    
32.                 innerStr.push('<img class="list_poi_marker" style="" src="' + getRootPath() + 'Content/images/poi/dw' + iId + '.png"></img>');
    
33.                 innerStr.push('<div class="left_list_li1">');
    
34.                 innerStr.push('<p>');
    
35.                 innerStr.push('<a onclick="DCI.Poi.toLocationPOI(' + i + ',\'' + tempID + '\',\'' + results[infactItem].feature.attributes.NAME + '\')">' + results[infactItem].feature.attributes.NAME + '</a><br/>');
    
36.                 innerStr.push('</p>');
    
37.                 innerStr.push('</div>');
    
38.                 innerStr.push('</div>')
    
39.                 innerStr.push('</div>');
    
40.                 innerStr.push('</div>');
    
41.             }
    
42.             $("#showLists").html(innerStr.join(''));
    
43. 
    
44.             //设置地图显示范围
    
45.             if (rExtent == null)
    
46.                 rExtent = baseGraphic._extent;
    
47.             else {
    
48.                 rExtent = rExtent.union(baseGraphic._extent);
    
49.             }
    
50. 
    
51.             DCI.Poi.map.setExtent(rExtent.expand(2));
    
52.             DCI.Poi.map.resize();
    
53.             DCI.Poi.map.reposition();
    
54.             //分页工具条        
    
55.             $("#listpages").PageOperator({
    
56.                 containerID: "listpages",
    
57.                 count: featureCount,
    
58.                 pageIndex: DCI.Poi.pageIndex,
    
59.                 maxPage: maxpage,
    
60.                 callback: function (pageIndex) {
    
61.                     var keyword = $("#skeyword").val();
    
62.                     DCI.Poi.pageIndex = pageIndex;
    
63.                     DCI.Poi.search(keyword, pageIndex, DCI.Poi.pageSize);
    
64.                 }
    
65.             });
    
66.         } else {
    
67.             alert("搜索不到相关数据");
    
68.         }
    
69.     }

复制代码

QueryTask属性查询实现核心代码：

1. var query = new esri.tasks.Query();
   
2. query.returnGeometry = true;
   
3. query.outFields = ["NAME"];
   
4. query.where = "1=1";
   
5. queryTask = new esri.tasks.QueryTask(typeUrl);
   
6. queryTask.execute(query, DCI.Poi.navInfo);

复制代码

1. /**
   
2.      * 指定图层的属性查询--Query
   
3.     */
   
4.     navInfo: function (results) {
   
5.         DCI.Poi.clearAndhide();
   
6.         var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13);
   
7.         var innerStr = [];
   
8. 
   
9.         var featureCount = results.features.length;
   
10.         //最大的显示页面
    
11.         var maxpage = Math.ceil(featureCount / DCI.Poi.pageSize);
    
12.         if (results.features.length > 0) {
    
13.             $("#listpages").css({ display: "block" });
    
14.             for (var i = 0; i < DCI.Poi.pageSize; i++) {
    
15.                 var rExtent = null;
    
16.                 var iId = i + 1;
    
17.                 var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25);
    
18.                 var infactItem = DCI.Poi.pageIndex * DCI.Poi.pageSize + i;
    
19.                 var tempID = "tempID" + i;
    
20.                 var pId = "poi_" + iId;
    
21.                 if (results.features[infactItem] == undefined) //最后一页没有记录了 跳出循环
    
22.                     break;
    
23. 
    
24.                 var attr = { "title": results.features[i].attributes.NAME, "content": results.features[i].attributes.NAME };
    
25.                 var baseGraphic = new esri.Graphic(results.features[infactItem].geometry, baseGraphicsymbol, attr);
    
26.                 baseGraphic.id = tempID;
    
27.                 DCI.Poi.graphicslayer.add(baseGraphic);
    
28. 
    
29.                 innerStr.push('<div class="left_list_li_box" onmouseover="DCI.Poi.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" onmouseout="DCI.Poi.onPOIMouseOutRecord(' + i + ',\'' + tempID + '\')"  id="' + pId + '">');
    
30.                 innerStr.push('<div class="left_list_li_box_top">');
    
31.                 innerStr.push('<div class="left2_box2">');
    
32.                 innerStr.push('<img class="list_poi_marker" style="" src="' + getRootPath() + 'Content/images/poi/dw' + iId + '.png"></img>');
    
33.                 innerStr.push('<div class="left_list_li1">');
    
34.                 innerStr.push('<p>');
    
35.                 innerStr.push('<a onclick="DCI.Poi.toLocationPOI(' + i + ',\'' + tempID + '\',\'' + results.features[infactItem].attributes.NAME + '\')">' + results.features[infactItem].attributes.NAME + '</a><br/>');
    
36.                 innerStr.push('</p>');
    
37.                 innerStr.push('</div>');
    
38.                 innerStr.push('</div>')
    
39.                 innerStr.push('</div>');
    
40.                 innerStr.push('</div>');
    
41.             }
    
42.             $("#showLists").html(innerStr.join(''));
    
43. 
    
44.             //设置地图显示范围
    
45.             if (rExtent == null)
    
46.                 rExtent = baseGraphic._extent;
    
47.             else {
    
48.                 rExtent = rExtent.union(baseGraphic._extent);
    
49.             }
    
50. 
    
51.             DCI.Poi.map.setExtent(rExtent.expand(2));
    
52.             DCI.Poi.map.resize();
    
53.             DCI.Poi.map.reposition();
    
54.             //分页工具条        
    
55.             $("#listpages").PageOperator({
    
56.                 containerID: "listpages",
    
57.                 count: featureCount,
    
58.                 pageIndex: DCI.Poi.pageIndex,
    
59.                 maxPage: maxpage,
    
60.                 callback: function (pageIndex) {
    
61.                     var keyword = $("#skeyword").val();
    
62.                     DCI.Poi.pageIndex = pageIndex;
    
63.                     DCI.Poi.search(keyword, pageIndex, DCI.Poi.pageSize);
    
64.                 }
    
65.             });
    
66.         } else {
    
67.             alert("搜索不到相关数据");
    
68.         }
    
69.     }

复制代码

二、空间查询模块：

1是基于QueryTask空间查询，查询指定的餐饮图层;

2是基于IdentifyTask空间查询，可以查询的图层覆盖：餐饮、住宿、金融服务、购物、科研教育、医疗服务；

IdentifyTask空间查询实现核心代码：

1. /**
   
2.      * 所有图层的空间查询--Identify
   
3.     */
   
4.     searchIdentify: function (geometry) {
   
5.         var identifyTask = new esri.tasks.IdentifyTask(DCI.SpatialQuery.spatialQuery.layerName);//URL
   
6.         var identifyParams = new esri.tasks.IdentifyParameters();
   
7.         identifyParams.tolerance = 3;//设置绘制框选图形范围的屏幕像素距离，这个值必须要设置，不然查询不到，我用官网在线例子的默认3
   
8.         identifyParams.returnGeometry = true;//返回空间查询的geometry，方便把返回值结果以图标形式叠加在地图上
   
9.         identifyParams.layerIds = [0, 1, 2, 3, 4, 5];//设置查询图层列表
   
10.         identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;//设置查询的模式，我设置了可以查询所有的图层，不管是否可见，其他的模式具体参照api:https://developers.arcgis.com/javascript/3/jsapi/identifyparameters-amd.html
    
11.         identifyParams.geometry = geometry;//设置绘制框选图形范围
    
12.         identifyParams.mapExtent = DCI.SpatialQuery.map.extent;//设置查询的地图当前范围，也是必须设置的
    
13.         identifyTask.execute(identifyParams, DCI.SpatialQuery.identifyInfo);
    
14.     },

复制代码

1. /**
   
2.      * 所有图层的空间查询获取结果--Identify
   
3.     */
   
4.     identifyInfo: function (results) {
   
5.         //清空graphiclayer
   
6.         DCI.SpatialQuery.graphicslayer.clear();
   
7.         DCI.SpatialQuery.map.infoWindow.hide();
   
8.         var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13);
   
9.         var innerStr = [];
   
10.         var featureCount = results.length;
    
11.         if (results == null || featureCount == 0) {
    
12.             DCI.Poi.addSearchErrorPage("queryshowList");
    
13.             $("#querylistpage").css({ display: "none" });
    
14.             return;
    
15.         }
    
16.         //最大的显示页面
    
17.         var maxpage = Math.ceil(featureCount / DCI.SpatialQuery.pageSize);
    
18.         $("#querylistpage").css({ display: "block" });
    
19.         if (results.length > 0) {
    
20.             for (var i = 0; i < DCI.SpatialQuery.pageSize; i++) {
    
21.                 var rExtent = null;
    
22.                 var iId = i + 1;
    
23.                 var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25);
    
24.                 var infactItem = DCI.SpatialQuery.pageIndex * DCI.SpatialQuery.pageSize + i;
    
25.                 var tempID = "tempID" + i;
    
26.                 var pId = "poi_" + iId;
    
27.                 if (results[infactItem] == undefined) //最后一页没有记录了 跳出循环
    
28.                     break;
    
29.                 var attr = { "title": results[infactItem].feature.attributes.NAME, "content": results[infactItem].feature.attributes.NAME };
    
30.                 var baseGraphic = new esri.Graphic(results[infactItem].feature.geometry, baseGraphicsymbol, attr);
    
31.                 baseGraphic.id = tempID;
    
32.                 DCI.SpatialQuery.graphicslayer.add(baseGraphic);
    
33.                 innerStr.push('<div class="left_list_li_box" onmouseover="DCI.SpatialQuery.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" onmouseout="DCI.SpatialQuery.onPOIMouseOutRecord(' + i + ',\'' + tempID + '\')"  id="' + pId + '">');
    
34.                 innerStr.push('<div class="left_list_li_box_top">');
    
35.                 innerStr.push('<div class="left2_box2">');
    
36.                 innerStr.push('<img class="list_poi_marker" style="" src="' + getRootPath() + 'Content/images/poi/dw' + iId + '.png"></img>');
    
37.                 innerStr.push('<div class="left_list_li1">');
    
38.                 innerStr.push('<p>');
    
39.                 innerStr.push('<a onclick="DCI.SpatialQuery.toLocation(' + i + ',\'' + tempID + '\',\'' + results[infactItem].feature.attributes.NAME + '\')">' + results[infactItem].feature.attributes.NAME + '</a><br/>');
    
40.                 innerStr.push('</p>');
    
41.                 innerStr.push('</div>');
    
42.                 innerStr.push('</div>')
    
43.                 innerStr.push('</div>');
    
44.                 innerStr.push('</div>');
    
45.             }
    
46.             $("#queryshowList").html(innerStr.join(''));
    
47. 
    
48.             //设置地图显示范围
    
49.             if (rExtent == null)
    
50.                 rExtent = baseGraphic._extent;
    
51.             else {
    
52.                 rExtent = rExtent.union(baseGraphic._extent);
    
53.             }
    
54. 
    
55.             DCI.SpatialQuery.map.setExtent(rExtent.expand(2));
    
56.             DCI.SpatialQuery.map.resize();
    
57.             DCI.SpatialQuery.map.reposition();
    
58.             //分页工具条        
    
59.             $("#querylistpage").PageOperator({
    
60.                 containerID: "querylistpage",
    
61.                 count: featureCount,
    
62.                 pageIndex: DCI.SpatialQuery.pageIndex,
    
63.                 maxPage: maxpage,
    
64.                 callback: function (pageIndex) {
    
65.                     DCI.SpatialQuery.pageIndex = pageIndex;
    
66.                     if (DCI.SpatialQuery.type[0] == "0") {//指定图层的空间查询
    
67.                         DCI.SpatialQuery.searchSP(DCI.SpatialQuery.sgeometry);
    
68.                     } else if (DCI.SpatialQuery.type[0] == "1") {//所有图层的空间查询
    
69.                         DCI.SpatialQuery.searchIdentify(DCI.SpatialQuery.sgeometry);
    
70.                     }
    
71.                 }
    
72.             });
    
73.         } else {
    
74.             alert("搜索不到相关数据");
    
75.         }
    
76.     },

复制代码

QueryTask空间查询实现核心代码：

1. /**
   
2.      * 指定图层的空间查询--Query
   
3.     */
   
4.     searchSP: function (geometry) {
   
5.         var queryTask = new esri.tasks.QueryTask(DCI.SpatialQuery.spatialQuery.layerName);//URL
   
6.         var query = new esri.tasks.Query();
   
7.         query.returnGeometry = true;//返回空间查询的geometry，方便把返回值结果以图标形式叠加在地图上
   
8.         query.outFields = [DCI.SpatialQuery.spatialQuery.returnFields];//设置返回值的字段
   
9.         query.geometry = geometry;//设置绘制框选图形范围
   
10.         queryTask.execute(query, DCI.SpatialQuery.navInfo);
    
11.     },
    
12.     /**
    
13.      * 所有图层的空间查询--Query
    
14.     */
    
15.     navInfo: function (results) {
    
16.         //清空graphiclayer
    
17.         DCI.SpatialQuery.graphicslayer.clear();
    
18.         DCI.SpatialQuery.map.infoWindow.hide();
    
19.         var sms = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/plot/point1.png", 11, 13);
    
20.         var innerStr = [];
    
21.         var featureCount = results.features.length;
    
22.         if (results.features == null || featureCount == 0) {
    
23.             DCI.Poi.addSearchErrorPage("queryshowList");
    
24.             $("#querylistpage").css({ display: "none" });
    
25.             return;
    
26.         }
    
27.         //最大的显示页面
    
28.         var maxpage = Math.ceil(featureCount / DCI.SpatialQuery.pageSize);
    
29.         $("#querylistpage").css({ display: "block" });
    
30.         if (results.features.length > 0) {
    
31.             for (var i = 0; i < DCI.SpatialQuery.pageSize; i++) {
    
32.                 var rExtent = null;
    
33.                 var iId = i + 1;
    
34.                 var baseGraphicsymbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw" + iId + ".png", 25, 25);
    
35.                 var infactItem = DCI.SpatialQuery.pageIndex * DCI.SpatialQuery.pageSize + i;
    
36.                 var tempID = "tempID" + i;
    
37.                 var pId = "poi_" + iId;
    
38.                 if (results.features[infactItem] == undefined) //最后一页没有记录了 跳出循环
    
39.                     break;
    
40.                 var attr = { "title": results.features[i].attributes.NAME, "content": results.features[i].attributes.NAME };
    
41.                 var baseGraphic = new esri.Graphic(results.features[infactItem].geometry, baseGraphicsymbol, attr);
    
42.                 baseGraphic.id = tempID;
    
43.                 DCI.SpatialQuery.graphicslayer.add(baseGraphic);
    
44.                 innerStr.push('<div class="left_list_li_box" onmouseover="DCI.SpatialQuery.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" onmouseout="DCI.SpatialQuery.onPOIMouseOutRecord(' + i + ',\'' + tempID + '\')"  id="' + pId + '">');
    
45.                 innerStr.push('<div class="left_list_li_box_top">');
    
46.                 innerStr.push('<div class="left2_box2">');
    
47.                 innerStr.push('<img class="list_poi_marker" style="" src="' + getRootPath() + 'Content/images/poi/dw' + iId + '.png"></img>');
    
48.                 innerStr.push('<div class="left_list_li1">');
    
49.                 innerStr.push('<p>');
    
50.                 innerStr.push('<a onclick="DCI.SpatialQuery.toLocation(' + i + ',\'' + tempID + '\',\'' + results.features[infactItem].attributes.NAME + '\')">' + results.features[infactItem].attributes.NAME + '</a><br/>');
    
51.                 innerStr.push('</p>');
    
52.                 innerStr.push('</div>');
    
53.                 innerStr.push('</div>')
    
54.                 innerStr.push('</div>');
    
55.                 innerStr.push('</div>');
    
56.             }
    
57.             $("#queryshowList").html(innerStr.join(''));
    
58. 
    
59.             //设置地图显示范围
    
60.             if (rExtent == null)
    
61.                 rExtent = baseGraphic._extent;
    
62.             else {
    
63.                 rExtent = rExtent.union(baseGraphic._extent);
    
64.             }
    
65. 
    
66.             DCI.SpatialQuery.map.setExtent(rExtent.expand(2));
    
67.             DCI.SpatialQuery.map.resize();
    
68.             DCI.SpatialQuery.map.reposition();
    
69.             //分页工具条        
    
70.             $("#querylistpage").PageOperator({
    
71.                 containerID: "querylistpage",
    
72.                 count: featureCount,
    
73.                 pageIndex: DCI.SpatialQuery.pageIndex,
    
74.                 maxPage: maxpage,
    
75.                 callback: function (pageIndex) {
    
76.                     DCI.SpatialQuery.pageIndex = pageIndex;
    
77.                     if (DCI.SpatialQuery.type[0] == "0") {//指定图层的空间查询
    
78.                         DCI.SpatialQuery.searchSP(DCI.SpatialQuery.sgeometry);
    
79.                     } else if (DCI.SpatialQuery.type[0] == "1") {//所有图层的空间查询
    
80.                         DCI.SpatialQuery.searchIdentify(DCI.SpatialQuery.sgeometry);
    
81.                     }
    
82.                 }
    
83.             });
    
84.         } else {
    
85.             alert("搜索不到相关数据");
    
86.         }
    
87.     }

复制代码

最后，提供源代码下载：http://pan.baidu.com/s/1eRCoH02

dlsearch.mxd下载：http://pan.baidu.com/s/1qYRJGKG

GIS作品：百度搜索：GIS之家(https://shop116521643.taobao.com/shop/view_shop.htm)
QQ兴趣部落GIS技术交流：gis之家(http://buluo.qq.com/p/barindex.html?bid=327395)
GIS毕业设计&项目承接群：238339408
GIS技术交流群：432512093

376394482

我来看看，我来学学

sinna

376394482 发表于 2016-11-19 14:14
我来看看，我来学学

，大家一起学习

376394482

谢谢分享，学习一下！！！！

1056443152

谢谢分享