preface
Refer to ArcGIS api 3.0 on esri's official website for the api used in the function implementation of this article and the classes involved that cannot be understood x for js: esri official website api , which introduces ArcGIS API in detail X introduction to various classes and online examples: esri official website online example , this is also learning ArcGIS API 3 Good material for X.
Content overview
- Map attribute query
- Map space query
- Source code demo download
This chapter realizes the map query function, including attribute query and spatial query. The effect diagram is as follows:
-
Attribute query rendering
-
Effect drawing of spatial query
Before talking about the implementation of the core code, I will talk about the map query method of arcgis api for js. Generally speaking, there are three query methods: FindTask, IdentifyTask and QueryTask
- FindTask query mode: fuzzy query of map layers based on keywords is text-based. It cannot be queried based on the spatial range Geometry set by the map, but it can be queried across multiple layers, such as catering layer, medical service layer, etc;
- IdentifyTask query mode: in contrast to FindTask, query based on the spatial range Geometry set in the map, not based on text, but also across multiple layers;
- QueryTask query mode: combined with FindTask and identitytask, it can query based on text or spatial range, but it limits the query layer and cannot query across multiple layers;
The following explains the core implementation module according to different ideas of attribute query and spatial query. Before implementation, it is in map JS must introduce the relevant call api package:
(function () {
dojo.require("esri.tasks.FindTask");
dojo.require("esri.tasks.FindParameters");
dojo.require("esri.tasks.IdentifyTask");
dojo.require("esri.tasks.IdentifyParameters");
})();
Attribute query module
- Based on the FindTask attribute query, the layer coverage that can be queried: catering, accommodation, financial services, shopping, scientific research and education, and medical services;
- Query by category based on QueryTask attribute;
FindTask attribute query implementation core code:
var find = new esri.tasks.FindTask(MapConfig.vecMapUrl + "/");//URL
var params = new esri.tasks.FindParameters();
params.layerIds = [0,1,2,3,4,5]; //Set query layer list
params.searchFields = ["NAME"]; //Set the field of the query layer and blur the query according to the NAME field
params.searchText = keyword;//Set keywords for fuzzy query
params.returnGeometry = true;//Return the geometry of spatial query, which is convenient to overlay the returned value results on the map in the form of icons
find.execute(params, DCI.Poi.findInfo);
/**
* Attribute query results of all layers -- 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;
//Maximum display page
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) //The last page does not record the jump out cycle
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(''));
//Set map display range
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();
//Tabbed Toolbar
$("#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("Relevant data cannot be searched");
}
}
QueryTask attribute query implementation core code:
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);
/**
* Specify the attribute query of the layer -- 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;
//Maximum display page
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) //The last page does not record the jump out cycle
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(''));
//Set map display range
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();
//Tabbed Toolbar
$("#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("Relevant data cannot be searched");
}
}
Spatial query module
- Query the specified catering layer based on QueryTask spatial query;
- Based on the IdentifyTask spatial query, the layers that can be queried cover: catering, accommodation, financial services, shopping, scientific research and education, and medical services;
Core code of IdentifyTask spatial query implementation:
/**
* Spatial query of all layers -- Identify
*/
searchIdentify: function (geometry) {
var identifyTask = new esri.tasks.IdentifyTask(DCI.SpatialQuery.spatialQuery.layerName);//URL
var identifyParams = new esri.tasks.IdentifyParameters();
identifyParams.tolerance = 3;//Set the screen pixel distance of the drawing frame selected graphics range. This value must be set, otherwise it cannot be queried. I use the default 3 of the online example on the official website
identifyParams.returnGeometry = true;//Return the geometry of spatial query, which is convenient to overlay the returned value results on the map in the form of icons
identifyParams.layerIds = [0, 1, 2, 3, 4, 5];//Set query layer list
identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;//Set the query mode. I set that all layers can be queried, whether visible or not. For other modes, please refer to api:https://developers.arcgis.com/javascript/3/jsapi/identifyparameters-amd.html
identifyParams.geometry = geometry;//Sets the drawing range of the selected drawing frame
identifyParams.mapExtent = DCI.SpatialQuery.map.extent;//It is also necessary to set the current range of the queried map
identifyTask.execute(identifyParams, DCI.SpatialQuery.identifyInfo);
},
/**
* Spatial query results of all layers -- Identify
*/
identifyInfo: function (results) {
//Empty 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;
}
//Maximum display page
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) //The last page does not record the jump out cycle
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(''));
//Set map display range
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();
//Tabbed Toolbar
$("#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") {//Specifies the spatial query for the layer
DCI.SpatialQuery.searchSP(DCI.SpatialQuery.sgeometry);
} else if (DCI.SpatialQuery.type[0] == "1") {//Spatial query for all layers
DCI.SpatialQuery.searchIdentify(DCI.SpatialQuery.sgeometry);
}
}
});
} else {
alert("Relevant data cannot be searched");
}
}
QueryTask spatial query implementation core code:
/**
* Specify the spatial query of the layer -- Query
*/
searchSP: function (geometry) {
var queryTask = new esri.tasks.QueryTask(DCI.SpatialQuery.spatialQuery.layerName);//URL
var query = new esri.tasks.Query();
query.returnGeometry = true;//Return the geometry of spatial query, which is convenient to overlay the returned value results on the map in the form of icons
query.outFields = [DCI.SpatialQuery.spatialQuery.returnFields];//Sets the field of the return value
query.geometry = geometry;//Sets the drawing range of the selected drawing frame
queryTask.execute(query, DCI.SpatialQuery.navInfo);
},
/**
* Spatial query of all layers -- Query
*/
navInfo: function (results) {
//Empty 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;
}
//Maximum display page
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) //The last page does not record the jump out cycle
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(''));
//Set map display range
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();
//Tabbed Toolbar
$("#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") {//Specifies the spatial query for the layer
DCI.SpatialQuery.searchSP(DCI.SpatialQuery.sgeometry);
} else if (DCI.SpatialQuery.type[0] == "1") {//Spatial query for all layers
DCI.SpatialQuery.searchIdentify(DCI.SpatialQuery.sgeometry);
}
}
});
} else {
alert("Relevant data cannot be searched");
}
}