使用OPENLAYERS3实现点选的方法

使用OPENLAYERS3实现点选的方法

WebGIS开发中，点击查询是最常用的一种查询方式，在ArcGIS api 中，这种查询叫IdentifyTask，主要作用是前台提交参数，交ArcServer查询分析返回。本文从开源框架的角度，从前台到服务端到数据库等多个角度，多种方式实现点击查询。干货如下：

1.1 Select控制器

对于矢量数据，Ol3中的官网demo提供了一个Select控件，实现鼠标的选择查询，代码如下：

//定义select控制器

var select= new ol.interaction.Select();

map.addInteraction(select);//map加载该控件，默认是激活可用的

select.on('select', function(e) {

console.log(e.selected); //打印已选择的Feature

});

具体Example参考：http://openlayers.org/en/v3.14.2/examples/select-features.html?q=Select

1.2 map的click事件

该方法，通过鼠标点击的坐标，与当前矢量图层做相交分析查询，得到查询的要素及其所属的Layer对象

//地图单机事件

map.on('singleclick',mapClick);

function mapClick(e){

var pixel = map.getEventPixel(e.originalEvent);

var featureInfo = map.forEachFeatureAtPixel(pixel,

function (feature, layer) {

return {feature:feature,layer:layer};

});

if (featureInfo!==undefined&&featureInfo!==null

&&featureInfo.layer!==null)

{

console.log('打印选择要素');

console.log(featureInfo .feature);

console.log('打印选择要素所属Layer');

console.log(featureInfo .layer);

}

}

1.3 WMS图层的GetFeatureInfo

对于矢量图层，我们可以通过第一，第二种方法实现点击查询。但是，很多时候我们底图是wms服务，这时候我们可以通过wms协议的GetFeatureInfo实现点点选查询。

//模拟查询的wms图层名称比如是wmsLayer

//该wmsLayer的数据源是墨卡托的3http://857举例

map.on('click',mapClick);

function mapClick(evt){

var viewResolution = map.getView().getResolution();

var url = wmsLayer.getSource().getGetFeatureInfoUrl(

evt.coordinate, viewResolution, 'EPSG:3857',

{

'INFO_FORMAT': 'text/javascript',//geoserver支持jsonp才能输出为jsonp的格式

'FEATURE_COUNT': 50 //点击查询能返回的数量上限

});

$.ajax({

type: 'GET',

url:url,

dataType: 'jsonp',

jsonp:'format_options',

jsonpCallback:"callback:success_jsonpCallback"

});

}

//回调函数接收查询结果

var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});

function success_jsonpCallback(res)

{

var features=geojsonFormat.readFeatures(res);

console.log('点击查询返回的结果如下：');

console.log(features);

}

1.4 通过Geoserver的wfs查询

wfs可以通过Filter提交条件或者图形进行属性查询或者空间查询，本段用干货来表达如何使用wfs查询。

map.on('click',mapClick);

//点击地图查询

function mapClick(evt)

{

var coor=evt.coordinate;

coor=coor.join(',');

//注意这里直接将点坐标提交，与图层做intersrct分析，对于面图层是没关系的。如果是查询，点或者线图形，一定要将coor先设置一个容差，经行buffer之后的图形，再去与图层叠加分析。不设置容差几乎就找不到了

//图层的图形字段是geom，不同图层的图形字段都要自己先看下自己的，有的是the_geom，有的是shape等等，具体分析即可。

var FILTER='geom'+coor+' ';

getFeature({

typename:'road:road_grid',//查询的服务图层名称

filter:FILTER,//查询条件

callback:'getIdentifyroadGrid'//查询的回调函数

});

}

var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});

function getIdentifyroadGrid(res)

{

var features=geojsonFormat.readFeatures(res);

console.log('点击查询返回的结果如下：');

console.log(features);

}

//请求wfs数据

function getFeature(options)

{

$.ajax(gisserverhost+'geoserver/wfs',{

type: 'GET',

data: {

service: 'WFS',

version: '1.1.0',

request: 'GetFeature',

typename: options.typename,

srsname: options.srid,

outputFormat: 'text/javascript',

viewparams:options.viewparams,

bbox:(options.extent===undefined)?undefined:options.extent.join(',') + ','+options.srid,

filter:options.filter

},

dataType: 'jsonp',

jsonpCallback:'callback:'+options.callback,

jsonp:'format_options'

});

}

1.5 通过PostGIS实现点击查询

pg的方法真要用起来应该是最简单的。就是将点击的地理坐标发送到后台提交数据库执行下。

//其他省略，假设x,y是前台点击地图获取的坐标，坐标系假设只3857。

//这里假设后台获取了参数拼接sql提交数据库

执行sql如下: select * from t where ST_Intersect(t.geom,ST_GeomfromText('Point(x y)',3857));

完毕！

总结

触类旁通，融bdvUaab会贯通，一个问题的解决一定有很多方式，并非“自古华山一条路”，当然，不同的路的目的相同，风景当然是各异。我们已经起码能使用5种方法去获取点击查询的结果。那么一般人就会疑问，5种方法究竟谁好谁坏了？ 其实方法没有好坏，只有是否合适。

1 第一种，第二种方法：矢量数据，一定要加到map的客户端，才能使用，如果是wms图层就不能用了。

2 第三种方法：wms图层，这时候前两种矢量方式没法处理，第三种方法就可以解决这个问题。

3 第四种方法：一二三无论矢量还是wms，都是要加载到客户端才能使用，但有时候因需求不同导致的，Geoserver发布的图层不加载到客户端，那么就都不能使用了。但只要被发布了，通过wfs的url请求就一定能查询到结果，即使这个查询对象不在客户端而在服务端。

4 第五种方法：与第四种方法一样，因为业务需求不同导致，有时数据连发布都没发布，仅仅停留在数据库中，而要求能够查询，这时候第五个方法即可。当然数据库中的方法，一般用在大数据量，复杂事务查询中使用较好。单单一个点击查询使用有点牛刀杀鸡。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。