欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

使用OPENLAYERS3实现点选的方法

时间:2021-11-07 09:48:25|栏目:JavaScript代码|点击:

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

上一篇:微信小程序授权登录的优雅处理方式

栏    目:JavaScript代码

下一篇:浅谈js常用内置方法和对象

本文标题:使用OPENLAYERS3实现点选的方法

本文地址:http://www.codeinn.net/misctech/182724.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有