天天看点

深入浅出 Javascript API(五)--Query & Find 查询

    内容目录:

1.Query查询属性数据(无地图)

2.鼠标移动显示Query查询结果

3.Find查询地图,并在页面下方显示相应属性数据

1.仅用Query查询属性,不返回地图信息,此时就不再需要创建esri.layers.ArcGISMapServiceLayer对象来处理地图,但是需要引入"esri.tasks.query",并创建QueryTask对象:

深入浅出 Javascript API(五)--Query & Find 查询

queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");

    webgis查询一般涉决定返回结果的参数,包括是否返回几何图形,查询的属性字段,查询方式(默认"SPATIAL_REL_INTERSECTS"),查询Where语句等,例如:

深入浅出 Javascript API(五)--Query & Find 查询

query = new esri.tasks.Query();

深入浅出 Javascript API(五)--Query & Find 查询

query.returnGeometry = false;

深入浅出 Javascript API(五)--Query & Find 查询

query.outFields = ["SQMI","STATE_NAME","SUB_REGION","POP2000","POP2007","MALES","FEMALES"];

    执行查询,并将结果写入回调函数showResults:

深入浅出 Javascript API(五)--Query & Find 查询

function execute(stateName) {

深入浅出 Javascript API(五)--Query & Find 查询

    query.text = stateName;

深入浅出 Javascript API(五)--Query & Find 查询

    queryTask.execute(query,showResults);

深入浅出 Javascript API(五)--Query & Find 查询

}

    所有的结果都会写入到showResults参数Featureset对象中,遍历该对象得到我们想要的属性结果。

深入浅出 Javascript API(五)--Query & Find 查询

    查询方式:

深入浅出 Javascript API(五)--Query & Find 查询

2.鼠标移动显示Query查询结果是常用的查询方式之一,最重要的就是利用了Ajax异步传输,将少量的信息显示在一个Tip中,访问效率高,体验较好。这里我们可以决定,是默认指定一图层区域要素进行hover查询,还是鼠标点击要查询的要素后,再hover查询,以实现前者为例,其他方式以此类推。

    查询功能主要是这几行代码完成:

深入浅出 Javascript API(五)--Query & Find 查询

var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

深入浅出 Javascript API(五)--Query & Find 查询

var query = new esri.tasks.Query();

深入浅出 Javascript API(五)--Query & Find 查询

query.returnGeometry = true;

深入浅出 Javascript API(五)--Query & Find 查询

query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];

深入浅出 Javascript API(五)--Query & Find 查询

query.where = "STATE_NAME = 'South Carolina'";

    "query.text"和"query.where"区别在于,前者是通过"like"方式执行where查询,后者是直接写SQL语句。

    TIP UI是一个InfoWindow

深入浅出 Javascript API(五)--Query & Find 查询
深入浅出 Javascript API(五)--Query & Find 查询

var infoTemplate = new esri.InfoTemplate();

深入浅出 Javascript API(五)--Query & Find 查询

infoTemplate.title = "${NAME}";

深入浅出 Javascript API(五)--Query & Find 查询

infoTemplate.content = "<b>2000 Population: </b>${POP2000}<br/>"

深入浅出 Javascript API(五)--Query & Find 查询

 + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>"

深入浅出 Javascript API(五)--Query & Find 查询

 + "<b>2007 Population: </b>${POP2007}<br/>"

深入浅出 Javascript API(五)--Query & Find 查询

 + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI}";

深入浅出 Javascript API(五)--Query & Find 查询

map.infoWindow.resize(205,125);

深入浅出 Javascript API(五)--Query & Find 查询

    鼠标移动到指定区域后,通过对鼠标onmousemove和onmouseout事件来显示或隐藏查询TIPs

深入浅出 Javascript API(五)--Query & Find 查询
深入浅出 Javascript API(五)--Query & Find 查询

dojo.connect(map.graphics, "onMouseOver", function(evt) {

深入浅出 Javascript API(五)--Query & Find 查询

    var content = evt.graphic.getContent();

深入浅出 Javascript API(五)--Query & Find 查询

    map.infoWindow.setContent(content);

深入浅出 Javascript API(五)--Query & Find 查询

    var title = evt.graphic.getTitle();

深入浅出 Javascript API(五)--Query & Find 查询

    map.infoWindow.setTitle(title);

深入浅出 Javascript API(五)--Query & Find 查询

    evt.graphic.setSymbol(highlightSymbol);

深入浅出 Javascript API(五)--Query & Find 查询

    map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

深入浅出 Javascript API(五)--Query & Find 查询

});

深入浅出 Javascript API(五)--Query & Find 查询
深入浅出 Javascript API(五)--Query & Find 查询

dojo.connect(map.graphics, "onMouseOut", function(evt) {

深入浅出 Javascript API(五)--Query & Find 查询

    map.infoWindow.hide();

深入浅出 Javascript API(五)--Query & Find 查询

    evt.graphic.setSymbol(symbol);

深入浅出 Javascript API(五)--Query & Find 查询
深入浅出 Javascript API(五)--Query & Find 查询
深入浅出 Javascript API(五)--Query & Find 查询

3.Find 查询,和Query功能类似,但使用的REST服务不同,Query需要指定具体的REST图层服务,如"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services /Demographics/ESRI_Census_USA/MapServer/3",而Find仅需提供当前地图服务"http: //sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty /ESRI_StatesCitiesRivers_USA/MapServer",然后通过属性来控制对哪个图层进行查找。

深入浅出 Javascript API(五)--Query & Find 查询

findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");

深入浅出 Javascript API(五)--Query & Find 查询

findParams = new esri.tasks.FindParameters();

深入浅出 Javascript API(五)--Query & Find 查询

findParams.returnGeometry = true;

深入浅出 Javascript API(五)--Query & Find 查询

findParams.layerIds = [0,1,2];

深入浅出 Javascript API(五)--Query & Find 查询

findParams.searchFields = ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"];

    这样做的好处是,可以方便的对多个图层进行查询,js代码只需要设置layerIds,在此之前添加"dojo.require("esri.tasks.find");"。页面下方显示查询结果,通过Ajax刷新,这里可以利用dojox.grid 完成这个过程,Find搜索只能用like方式,并且不区分大小写,这是和Query另外一个区别。

深入浅出 Javascript API(五)--Query & Find 查询

本文转自Flyingis博客园博客,原文链接:http://www.cnblogs.com/flyingis/archive/2008/07/29/1255373.html,如需转载请自行联系原作者

继续阅读