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 + "/");//URLvar 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" οnmοuseοver="DCI.Poi.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" οnmοuseοut="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="' + getRootPath() + 'Content/images/poi/dw' + iId + '.png"></img>');innerStr.push('<div class="left_list_li1">');innerStr.push('<p>');innerStr.push('<a οnclick="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" οnmοuseοver="DCI.Poi.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" οnmοuseοut="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="' + getRootPath() + 'Content/images/poi/dw' + iId + '.png"></img>');innerStr.push('<div class="left_list_li1">');innerStr.push('<p>');innerStr.push('<a οnclick="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);//URLvar identifyParams = new esri.tasks.IdentifyParameters();identifyParams.tolerance = 3;//设置绘制框选图形范围的屏幕像素距离，这个值必须要设置，不然查询不到，我用官网在线例子的默认3identifyParams.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.htmlidentifyParams.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" οnmοuseοver="DCI.SpatialQuery.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" οnmοuseοut="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="' + getRootPath() + 'Content/images/poi/dw' + iId + '.png"></img>');innerStr.push('<div class="left_list_li1">');innerStr.push('<p>');innerStr.push('<a οnclick="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);//URLvar 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" οnmοuseοver="DCI.SpatialQuery.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" οnmοuseοut="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="' + getRootPath() + 'Content/images/poi/dw' + iId + '.png"></img>');innerStr.push('<div class="left_list_li1">');innerStr.push('<p>');innerStr.push('<a οnclick="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("搜索不到相关数据");}}

arcgis api for js入门开发系列四地图查询相关推荐

arcgis api for js入门开发系列三地图工具栏(含源代码)
上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...
arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
arcgis api for js入门开发系列十八风向流动图
本篇主要讲述的是利用arcgis api实现风向流动图,效果图如下: 实现思路: 在esri提供的开源githunb基础上进行修改的:https://github.com/gishome/wind-j ...
arcgis api for js入门开发系列十七在线地图（天地图、百度地图、高德地图）
本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...
arcgis api for js入门开发系列十二地图打印（GP服务）
上一篇实现了demo的地图统计图,本篇新增地图打印,截图如下: (1)地图打印实现的思路如下:首先在创建好地图打印GP模型,设置好模型的参数:其次是验证模型运行模型:然后是发布地图打印的GP服务:最后 ...
arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
arcgis api 3.x for js 入门开发系列五地图态势标绘（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
android 原生开发 3d地图下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
openlayers4 入门开发系列之地图工具栏篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
openlayers入门开发系列之地图属性查询篇
本篇的重点内容是利用openlayers实现地图属性查询功能,效果图如下: 实现思路: 模糊查询点击事件 //模糊查询 $("#swatchQuery").bind("c ...

arcgis api for js入门开发系列四地图查询

arcgis api for js入门开发系列四地图查询相关推荐

最新文章

热门文章