使用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的数据源是墨卡托的3857举例 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='<filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><intersects><propertyname>geom</propertyname><gml:point><gml:coordinates>'+coor+'</gml:coordinates></gml:point> </intersects></filter>'; 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));
完毕!
总结
触类旁通,融会贯通,一个问题的解决一定有很多方式,并非“自古华山一条路”,当然,不同的路的目的相同,风景当然是各异。我们已经起码能使用5种方法去获取点击查询的结果。那么一般人就会疑问,5种方法究竟谁好谁坏了? 其实方法没有好坏,只有是否合适。
1 第一种,第二种方法:矢量数据,一定要加到map的客户端,才能使用,如果是wms图层就不能用了。
2 第三种方法:wms图层,这时候前两种矢量方式没法处理,第三种方法就可以解决这个问题。
3 第四种方法:一二三无论矢量还是wms,都是要加载到客户端才能使用,但有时候因需求不同导致的,geoserver发布的图层不加载到客户端,那么就都不能使用了。但只要被发布了,通过wfs的url请求就一定能查询到结果,即使这个查询对象不在客户端而在服务端。
4 第五种方法:与第四种方法一样,因为业务需求不同导致,有时数据连发布都没发布,仅仅停留在数据库中,而要求能够查询,这时候第五个方法即可。当然数据库中的方法,一般用在大数据量,复杂事务查询中使用较好。单单一个点击查询使用有点牛刀杀鸡。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: vue.js学习之UI组件开发教程
下一篇: Vue中的数据监听和数据交互案例解析