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的client，才干使用，如果是wms圖層就不能用了。
2 第三種方法：wms圖層，這時候前兩種矢量方式沒法處理，第三種方法就能夠解決問題。

3 第四種方法：一二三不管矢量還是wms。都是要載入到client才干使用，但有時候因需求不同導致的，Geoserver公布的圖層不載入到client，那么就都不能使用了。但僅僅要被公布了。通過wfs的url請求就一定能查詢到結果。即使這個查詢對象不在client而在服務端。
4 第五種方法：與第四種方法一樣。由于業務需求不同導致，有時數據連公布都沒公布，僅僅停留在數據庫中。而要求能夠查詢，這時候第五個方法就可以。當然數據庫中的方法，一般用在大數據量，復雜事務查詢中使用較好。

單單一個點擊查詢使用有點牛刀殺雞。

關于Ol3+GeoServer+PostGIS框架交流請進入qq群：445307545
關于Ol3交流請進入qq群：274788071
有償GIS技術指導請聯系：674834420

轉載于:https://www.cnblogs.com/gavanwanggw/p/7151237.html

總結

以上是生活随笔為你收集整理的OpenLayers 3+Geoserver+PostGIS实现点击查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。