WebGIS开发中,点击查询是最常用的一种查询方式,在ArcGIS api中,这种查询叫IdentifyTask,主要作用是前台提交参数,交ArcServer查询分析返回。本文从开源框架的角度,从前台到服务端到数据库等多个角度,多种方式实现点击查询。干货如下:
<强> 1.1选择控制器
对于矢量数据,Ol3中的官网演示提供了一个选择控件,实现鼠标的选择查询,代码如下:
//定义选择控制器
var选择=new ol.interaction.Select ();
map.addInteraction(选择);//地图加载该控件,默认是激活可用的
选择。(“选择”功能(e) {
console.log (e.selected);//打印已选择的特性
});
之前
具体例子参考:http://openlayers.org/en/v3.14.2/examples/select-features.html& # 63; q=选择
<强> 1.2地图的点击事件
该方法,通过鼠标点击的坐标,与当前矢量图层做相交分析查询,得到查询的要素及其所属的层对象
//地图单机事件
map.on (singleclick, mapClick);
函数mapClick (e) {
var像素=map.getEventPixel (e.originalEvent);
var featureInfo=map.forEachFeatureAtPixel(像素,
函数(功能层){
返回{特点:功能层:一层};
});
如果(featureInfo !==undefined&, featureInfo !==null
,,featureInfo.layer !==null)
{
console.log(“打印选择要素”);
控制台。日志(featureInfo feature);
console.log(“打印选择要素所属层”);
控制台。日志(featureInfo .layer);
}
}
之前
<强> 1.3 WMS图层的GetFeatureInfo
对于矢量图层,我们可以通过第一,第二种方法实现点击查询。但是,很多时候我们底图是wms服务,这时候我们可以通过wms协议的GetFeatureInfo实现点点选查询。
//模拟查询的wms图层名称比如是wmsLayer//该wmsLayer的数据源是墨卡托3857举的例
map.on(“点击”,mapClick);
函数mapClick (evt) {
.getResolution var viewResolution=map.getView () ();
var url=wmsLayer.getSource () .getGetFeatureInfoUrl (
evt。协调、viewResolution EPSG: 3857,
{
“INFO_FORMAT”: ' text/javascript ',//geoserver支持jsonp才能输出为jsonp的格式
“FEATURE_COUNT”://50点击查询能返回的数量上限
});
. ajax({美元
类型:“得到”,
url: url、
数据类型:“jsonp”,
jsonp:“format_options”,
jsonpCallback:“回调:success_jsonpCallback”
});
}//回调函数接收查询结果
var geojsonFormat=new ol.format.GeoJSON ({defaultDataProjection: " EPSG: 3857 "});
函数success_jsonpCallback (res)
{
var=geojsonFormat.readFeatures特性(res);
console.log(“点击查询返回的结果如下:”);
console.log(特性);
}
之前
<强> 1.4通过Geoserver的wfs查询
wfs可以通过滤波器提交条件或者图形进行属性查询或者空间查询,本段用干货来表达如何使用wfs查询。
map.on(“点击”,mapClick);//点击地图查询
函数mapClick (evt)
{
var作=evt.coordinate;
作=coor.join (" ");//注意这里直接将点坐标提交,与图层做intersrct分析,对于面图层是没关系的。如果是查询,点或者线图形,一定要将作先设置一个容差,经缓冲之行后的图形,再去与图层叠加分析。不设置容差几乎就找不到了//图层的图形字段是几何学,不同图层的图形字段都要自己先看下自己的,有的是the_geom,有的是形状等等,具体分析即可。
var过滤器=' & lt;过滤xmlns=" http://www.opengis.net/ogc " xmlns: gml=" http://www.opengis.net/gml "祝辞& lt; Intersects> & lt; PropertyName> geom & lt; gml: Point> & lt; gml: coordinates>“+作+ ' & lt;/gml: coordinates> & lt;/gml: Point>& lt;/Intersects> & lt;/Filter>;
getFeature ({
typename:“路:road_grid ',//查询的服务图层名称
过滤器:过滤器,//查询条件
调:“getIdentifyroadGrid”//查询的回调函数
});
}
var geojsonFormat=new ol.format.GeoJSON ({defaultDataProjection: " EPSG: 3857 "});
函数getIdentifyroadGrid (res)
{
var=geojsonFormat.readFeatures特性(res);
console.log(“点击查询返回的结果如下:”);
console.log(特性);
}//请求wfs数据
函数getFeature(选项)
{
$ . ajax (gisserverhost + geoserver/wfs, {
类型:“得到”,
数据:{
服务:“WFS”,
版本:“1.1.0”,
要求:“GetFeature”,
typename: options.typename,
srsname: options.srid,
outputFormat: ' text/javascript ',
viewparams: options.viewparams,
bbox:(options.extent===定义)& # 63;未定义:options.extent.join (" ") +”、“+ options.srid,
过滤器:options.filter
},
数据类型:“jsonp”,
jsonpCallback:“回调:”+ options.callback,
jsonp:“format_options”
});
}
