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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# OPENLAYERS3  # 点选  # 使用OpenLayers3 添加地图鼠标右键菜单  # 基于openlayers4实现点的扩散效果  # 图层  # 种方法  # 客户端  # 我们可以  # 这时候  # 加载  # 数据库中  # 回调  # 有的是  # 自己的  # 都是  # 华山  # 就会  # 触类旁通  # 鼠标  # 都要  # 多个  # 有很多  # 都没  # 两种 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 三星网站视频制作教程下载,三星w23网页如何全屏？  如何自定义建站之星网站的导航菜单样式？  利用python获取某年中每个月的第一天和最后一天  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  北京网站制作的公司有哪些,北京白云观官方网站？  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  Laravel集合Collection怎么用_Laravel集合常用函数详解  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  PythonWeb开发入门教程_Flask快速构建Web应用  如何在Windows 2008云服务器安全搭建网站？  js实现获取鼠标当前的位置  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  北京的网站制作公司有哪些,哪个视频网站最好？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  香港网站服务器数量如何影响SEO优化效果？  简单实现Android文件上传  如何在Windows服务器上快速搭建网站？  实现点击下箭头变上箭头来回切换的两种方法【推荐】  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  EditPlus中的正则表达式实战(5)  装修招标网站设计制作流程,装修招标流程？  智能起名网站制作软件有哪些,制作logo的软件？  JavaScript模板引擎Template.js使用详解  油猴 教程,油猴搜脚本为什么会网页无法显示？  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  微信小程序 input输入框控件详解及实例（多种示例）  详解vue.js组件化开发实践  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  如何选择可靠的免备案建站服务器？  在Oracle关闭情况下如何修改spfile的参数  如何在香港免费服务器上快速搭建网站？  Linux后台任务运行方法_nohup与&使用技巧【技巧】  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  Android使用GridView实现日历的简单功能  *服务器网站为何频现安全漏洞？  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  谷歌浏览器下载文件时中断怎么办 Google Chrome下载管理修复  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  如何用好域名打造高点击率的自主建站？  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  Laravel怎么判断请求类型_Laravel Request isMethod用法  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】