WebGIS開發(fā)中，點(diǎn)擊查詢是最經(jīng)常使用的一種查詢方式，在ArcGIS api 中。這樣的查詢叫IdentifyTask，主要作用是前臺提交參數(shù)。交ArcServer查詢分析返回。

本文從開源框架的角度。從前臺到服務(wù)端到數(shù)據(jù)庫等多個(gè)角度，多種方式實(shí)現(xiàn)點(diǎn)擊查詢。

干貨例如以下：

---

1.1 Select控制器

對于矢量數(shù)據(jù)，Ol3中的官網(wǎng)demo提供了一個(gè)Select控件，實(shí)現(xiàn)鼠標(biāo)的選擇查詢。代碼例如以下：

//定義select控制器 var select= new ol.interaction.Select(); map.addInteraction(select);//map載入該控件。默認(rèn)是激活可用的 select.on('select', function(e) {console.log(e.selected); //打印已選擇的Feature });

詳細(xì)Example參考：http://openlayers.org/en/v3.14.2/examples/select-features.html?q=Select

1.2 map的click事件

該方法，通過鼠標(biāo)點(diǎn)擊的坐標(biāo)，與當(dāng)前矢量圖層做相交分析查詢。得到查詢的要素及其所屬的Layer對象

//地圖單機(jī)事件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

對于矢量圖層，我們能夠通過第一，另外一種方法實(shí)現(xiàn)點(diǎn)擊查詢。

可是。非常多時(shí)候我們底圖是wms服務(wù)，這時(shí)候我們能夠通過wms協(xié)議的GetFeatureInfo實(shí)現(xiàn)點(diǎn)點(diǎn)選查詢。

//模擬查詢的wms圖層名稱比方是wmsLayer //該wmsLayer的數(shù)據(jù)源是墨卡托的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 //點(diǎn)擊查詢能返回的數(shù)量上限});$.ajax({type: 'GET',url:url,dataType: 'jsonp',jsonp:'format_options',jsonpCallback:"callback:success_jsonpCallback"}); } //回調(diào)函數(shù)接收查詢結(jié)果var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"}); function success_jsonpCallback(res) {var features=geojsonFormat.readFeatures(res);console.log('點(diǎn)擊查詢返回的結(jié)果例如以下：');console.log(features); }

1.4 通過Geoserver的wfs查詢

wfs能夠通過Filter提交條件或者圖形進(jìn)行屬性查詢或者空間查詢，本段用干貨來表達(dá)怎樣使用wfs查詢。

map.on('click',mapClick); //點(diǎn)擊地圖查詢 function mapClick(evt) {var coor=evt.coordinate;coor=coor.join(',');//注意這里直接將點(diǎn)坐標(biāo)提交，與圖層做intersrct分析。對于面圖層是沒關(guān)系的。如果是查詢，點(diǎn)或者線圖形，一定要將coor先設(shè)置一個(gè)容差，經(jīng)行buffer之后的圖形。再去與圖層疊加分析。不設(shè)置容差差點(diǎn)兒就找不到了//圖層的圖形字段是geom。不同圖層的圖形字段都要自己先看下自己的，有的是the_geom。有的是shape等等，詳細(xì)分析就可以。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',//查詢的服務(wù)圖層名稱filter:FILTER,//查詢條件callback:'getIdentifyroadGrid'//查詢的回調(diào)函數(shù)}); }var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"}); function getIdentifyroadGrid(res) {var features=geojsonFormat.readFeatures(res);console.log('點(diǎn)擊查詢返回的結(jié)果例如以下：');console.log(features); }//請求wfs數(shù)據(jù) 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實(shí)現(xiàn)點(diǎn)擊查詢

pg的方法真要用起來應(yīng)該是最簡單的。就是將點(diǎn)擊的地理坐標(biāo)發(fā)送到后臺提交數(shù)據(jù)庫運(yùn)行下。

//其它省略。如果x,y是前臺點(diǎn)擊地圖獲取的坐標(biāo)，坐標(biāo)系如果僅僅3857。 //這里如果后臺獲取了參數(shù)拼接sql提交數(shù)據(jù)庫 運(yùn)行sql例如以下: select * from t where ST_Intersect(t.geom,ST_GeomfromText('Point(x y)',3857));

完成。

總結(jié)

觸類旁通，融會貫通，一個(gè)問題的解決一定有非常多方式，并不是“自古華山一條路”。當(dāng)然，不同的路的目的同樣，風(fēng)景當(dāng)然是各異。

我們已經(jīng)起碼能使用5種方法去獲取點(diǎn)擊查詢的結(jié)果。那么一般人就會疑問，5種方法到底誰好誰壞了？ 事實(shí)上方法沒有好壞，僅僅有是否合適。

1 第一種，另外一種方法：矢量數(shù)據(jù)。一定要加到map的client，才干使用，如果是wms圖層就不能用了。
2 第三種方法：wms圖層，這時(shí)候前兩種矢量方式?jīng)]法處理，第三種方法就能夠解決問題。

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

單單一個(gè)點(diǎn)擊查詢使用有點(diǎn)牛刀殺雞。

關(guān)于Ol3+GeoServer+PostGIS框架交流請進(jìn)入qq群：445307545
關(guān)于Ol3交流請進(jìn)入qq群：274788071
有償GIS技術(shù)指導(dǎo)請聯(lián)系：674834420

轉(zhuǎn)載于:https://www.cnblogs.com/gavanwanggw/p/7151237.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。