使用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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
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
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python