快捷導(dǎo)航

使用OPENLAYERS3實(shí)現(xiàn)點(diǎn)選的方法

更新時(shí)間：2020年09月24日 11:58:57 作者：⒑指緊筘

這篇文章主要為大家詳細(xì)介紹了使用OPENLAYERS3實(shí)現(xiàn)點(diǎn)選的幾種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

WebGIS開發(fā)中，點(diǎn)擊查詢是最常用的一種查詢方式，在ArcGIS api 中，這種查詢叫IdentifyTask，主要作用是前臺(tái)提交參數(shù)，交ArcServer查詢分析返回。本文從開源框架的角度，從前臺(tái)到服務(wù)端到數(shù)據(jù)庫等多個(gè)角度，多種方式實(shí)現(xiàn)點(diǎn)擊查詢。干貨如下：

1.1 Select控制器

對(duì)于矢量數(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
});

具體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對(duì)象

//地圖單機(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

對(duì)于矢量圖層，我們可以通過第一，第二種方法實(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分析，對(duì)于面圖層是沒關(guān)系的。如果是查詢，點(diǎn)或者線圖形，一定要將coor先設(shè)置一個(gè)容差，經(jīng)行buffer之后的圖形，再去與圖層疊加分析。不設(shè)置容差幾乎就找不到了
 //圖層的圖形字段是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',//查詢的服務(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);
}

//請(qǐng)求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)該是最簡(jiǎn)單的。就是將點(diǎn)擊的地理坐標(biāo)發(fā)送到后臺(tái)提交數(shù)據(jù)庫執(zhí)行下。

//其他省略，假設(shè)x,y是前臺(tái)點(diǎn)擊地圖獲取的坐標(biāo)，坐標(biāo)系假設(shè)只3857。
//這里假設(shè)后臺(tái)獲取了參數(shù)拼接sql提交數(shù)據(jù)庫

執(zhí)行sql如下: select * from t where ST_Intersect(t.geom,ST_GeomfromText('Point(x y)',3857));

完畢！

總結(jié)

觸類旁通，融會(huì)貫通，一個(gè)問題的解決一定有很多方式，并非“自古華山一條路”，當(dāng)然，不同的路的目的相同，風(fēng)景當(dāng)然是各異。我們已經(jīng)起碼能使用5種方法去獲取點(diǎn)擊查詢的結(jié)果。那么一般人就會(huì)疑問，5種方法究竟誰好誰壞了？其實(shí)方法沒有好壞，只有是否合適。

1 第一種，第二種方法：矢量數(shù)據(jù)，一定要加到map的客戶端，才能使用，如果是wms圖層就不能用了。
2 第三種方法：wms圖層，這時(shí)候前兩種矢量方式?jīng)]法處理，第三種方法就可以解決這個(gè)問題。
3 第四種方法：一二三無論矢量還是wms，都是要加載到客戶端才能使用，但有時(shí)候因需求不同導(dǎo)致的，Geoserver發(fā)布的圖層不加載到客戶端，那么就都不能使用了。但只要被發(fā)布了，通過wfs的url請(qǐng)求就一定能查詢到結(jié)果，即使這個(gè)查詢對(duì)象不在客戶端而在服務(wù)端。
4 第五種方法：與第四種方法一樣，因?yàn)闃I(yè)務(wù)需求不同導(dǎo)致，有時(shí)數(shù)據(jù)連發(fā)布都沒發(fā)布，僅僅停留在數(shù)據(jù)庫中，而要求能夠查詢，這時(shí)候第五個(gè)方法即可。當(dāng)然數(shù)據(jù)庫中的方法，一般用在大數(shù)據(jù)量，復(fù)雜事務(wù)查詢中使用較好。單單一個(gè)點(diǎn)擊查詢使用有點(diǎn)牛刀殺雞。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: