arcgis api for js 地图查询
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 ...
随机推荐
- 51nod 1405【DFS】
思路: 对于结点 u 的子节点 v, 如果已经一直到结点 u 的答案ans[u],那么转移到对于结点 v,num[v] 为 v为根的树的结点个数,那么对于结点v的答案相对于结点u的答案来说, ans[ ...
- Tomcat热部署的实现原理
Tomcat热部署机制 对于Java应用程序来说,热部署就是在运行时更新Java类文件.在基于Java的应用服务器实现热部署的过程中,类装入器扮演着重要的角色.大多数基于Java的应用服务器,包括EJ ...
- 开发外包注意事项——iOS APP的开发
1. APP外包的流程是怎样的? 一般外包的项目都需要经常这几个流程: 1)需求沟通:双方沟通项目的需求,对项目的可行性进行分析 2)工作量评估:在确认了项目的需求后,外包团队对项目的价钱和进度进行评 ...
- jquery 中$.fn是什么意思
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...
- JS键盘事件之键控Div
自上次做的鼠标拖动Div之后,看到fgm.cc的例子,发现用键盘操控Div貌似也是十分有趣,这些DOM操作随着jquery的没落,虽然渐渐少用了,不过有些DOM操作还是必不可少的.现在是虽然数据为王( ...
- Trie UVALive 7192 Chip Factory (15长春J)
题目传送门 题意:从n个数中选出不同的三个数a b c,使得(a+b)^c 最大 分析:先将所有数字按位插入到字典树上,然后删除两个数字,贪心询问与剩下的数字最大异或值. /************* ...
- 高并发web系统优化总结
1.背景 因为业务需要,搭建了一个系统,系统主要由两部分组成,web页面和数据库. mysql大概2万条数据,其中有一个字段是click_num点击次数,php页面会取点击次数最小的一条记录去进行操作 ...
- 一个简单的类似Vue的双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 配置HEXO
软件介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 使用版本和操作系统 官网最新版 Windo ...
- python多继承（新式类）一
最近在学习python的多重继承. 先来了解下多重继承的概念,所谓多重继承,是指python的类可以有两个以上父类,也即有类A,类B,类C,C同时继承类A与类B,此时C中可以使用A与B中的属性与方法. ...