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 第五種方法：與第四種方法一樣，因為業務需求不同導致，有時數據連發布都沒發布，僅僅停留在數據庫中，而要求能夠查詢，這時候第五個方法即可。當然數據庫中的方法，一般用在大數據量，復雜事務查詢中使用較好。單單一個點擊查詢使用有點牛刀殺雞。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
