使用OPENLAYERS3实现点选的方法


Posted in Javascript onSeptember 24, 2020

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 相关文章推荐
javascript操作cookie_获取与修改代码
May 21 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
vue component组件使用方法详解
Jul 14 #Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 #Javascript
Vue filters过滤器的使用方法
Jul 14 #Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 #Javascript
Vue computed计算属性的使用方法
Jul 14 #Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 #Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 #Javascript
You might like
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
iframe实用操作锦集
2014/04/22 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
python画图把时间作为横坐标的方法
2019/07/07 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
python mock测试的示例
2020/10/19 Python
Pandas之缺失数据的实现
2021/01/06 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
网上书店创业计划书
2014/01/12 职场文书
九年级物理教学反思
2014/01/29 职场文书
中青班党性分析材料
2014/02/16 职场文书
法院信息化建设方案
2014/05/21 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
公司股东合作协议书
2014/09/14 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
小学感恩主题班会
2015/08/12 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
redis 存储对象的方法对比分析
2021/08/02 Redis
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技