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

上一篇实现了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" onmouseover="DCI.Poi.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" onmouseout="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 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" onmouseover="DCI.Poi.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" onmouseout="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 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" onmouseover="DCI.SpatialQuery.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" onmouseout="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 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" onmouseover="DCI.SpatialQuery.onPOIMouseOverRecord(' + i + ',\'' + tempID + '\')" onmouseout="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 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("搜索不到相关数据");

        }

    }

原文地址：https://zhuanlan.zhihu.com/p/23758117
声明：仅为学习之用,不为非法获利

arcgis api for js 地图查询的更多相关文章

arcgis api for js入门开发系列四地图查询(含源代码)
备注:由于实现本篇功能的需求,修改了地图数据的dlsearch.mxd,然后更新了地图服务,需要的在文章最后有提供最新的mxd以及源代码下载的上一篇实现了demo的地图工具栏,本篇新增地图查询功能, ...
转：arcgis api for js入门开发系列四地图查询
原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...
arcgis api for js入门开发系列二十打印地图的那些事
前面我写过关于利用arcgis api for js打印地图的,但是打印地图服务都是基于arcgis server发布的,arcgis api加载在线地图,比如天地图.百度地图.高德地图等,底图都是打 ...
arcgis api for js入门开发系列十一地图统计图
上一篇实现了demo的叠加SHP图层,本篇新增地图统计图,截图如下: 地图统计图实现的思路如下:利用拓展arcgis api的js文件(MapChartGraphic.js以及MapChartGrap ...
arcgis api for js入门开发系列一arcgis api离线部署
在我的GIS之家QQ群里,很多都是arcgis api for js开发的新手,他们一般都是GIS专业的学生,或者从计算机专业刚刚转向来的giser,他们难免会遇到各种webgis开发的简单问题,由于 ...
Arcgis API for JS——打印控件乱码
在通过Arcgis API for JS编写打印控件进行地图下载时,总发现地图字体乱码,如下图: 解决方法: 在装有ArcGIS Server,要调用服务的电脑或服务器上找到下图文件夹
arcgis api for js 出现跨域问题
最近几天在开始入手 arcgis api for js .那就先写些Demo练练手. 选择百度地图.这里用的是拼地图 url 的方式来加载百度地图. 加载百度地图参考的是:ArcGIS API for ...
ArcGIS API for js Legend（图例）
1.说明有关怎么把ArcGIS API for js部署到IIS上,请参考我上面的写的博客https://www.cnblogs.com/net064/p/10302660.html 2.运行效果 ...
arcgis api for js 4.X 出现跨域问题
arcgis api for js 4.X 出现跨域问题 XMLHttpRequest cannot load http://localhost/4.3/4.3/esri/workers/mutabl ...

随机推荐

hdu1080
#include<iostream> using namespace std; char s1[105],s2[105]; int val[5][5]={ {5,-1,-2,-1,-3}, ...
win7 失去焦点解决方案
将HKEY_CURRENT_USER\Control Panel\Desktop中的ForegroundLockTimeout的选项,改成十进制的200000毫秒或者十六进制30d40. 参考链接: ...
Software - 创建程序打包项目
通常的步骤准备一个 Visual Studio Installer 的项目模板利用该模板,在解决方案中新建一个 Visual Studio Installer 项目设置项目属性,配置文件系统生 ...
BZOJ 1858【线段树】
题意: 0 a b 把 [a, b] 区间内的所有数全变成0 1 a b 把 [a, b] 区间内的所有数全变成1 2 a b 把 [a,b] 区间内的所有数全部取反 3 a b 询问 [a, ...
kuangbin专题16A(kmp模板)
题目链接: https://vjudge.net/contest/70325#problem/A 题意: 有两个数组 a, b, 输出 b 数组在 a 数组中的第一个匹配位置, 不能匹配则输出 -1. ...
清北刷题冲刺 11-01 a.m
立方体 /* 输入数据中的p的位置是没有用的,而题目本质上是求C(n,k) */ #include<iostream> #include<cstdio> #define mod ...
Mysql-7-mysql函数
1.数学函数用来处理数值数据方面的运算,主要的数学函数有:绝对值函数,三角函数,对数函数,随机函数.使用数学函数过程中,如果有错误产生,该函数会返回null值. 数学函数功能介绍组合键 abs( ...
Unity---MonoBehaviour9大生命周期
1.MonoBehaviour9大生命周期 MonoBehaviour是一个基类,所有Unity脚本都派生自该类. Awake():在脚本实例化时被调用. Start():在Awake之后,Updat ...
Ubuntu14.04升级到Ubuntu16.04
Ubuntu14.04升级到Ubuntu16.04 1.查看目前版本 lsb_release -a 2.执行更新命令 apt-get update && apt-get dist-up ...
什么是obj文件？
百度百科: 程序编译时生成的中间代码文件.目标文件,一般是程序编译后的二进制文件,再通过链接器(LINK.EXE)和资源文件链接就成可执行文件了.OBJ只给出了程序的相对地址,而可执行文件是绝对地址. ...

arcgis api for js 地图查询

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

arcgis api for js 地图查询的更多相关文章

随机推荐

热门专题