OPENLAYERS3가 클릭 선택을 구현하는 방법은 무엇입니까?

WebGIS 개발에서 클릭 쿼리는 가장 일반적으로 사용되는 쿼리 방법입니다. ArcGIS API에서 이 쿼리의 주요 기능은 프런트 데스크에 매개 변수를 제출하고 쿼리 분석을 위해 ArcServer에 반환하는 것입니다. 본 글에서는 프론트 데스크부터 서버, 데이터베이스까지 오픈소스 프레임워크 관점에서 다양한 방식으로 클릭 쿼리를 구현합니다. 건조 정보는 다음과 같습니다.

1.1 SelectController

벡터 데이터의 경우 Ol3의 공식 웹사이트 데모에서는 마우스 선택 쿼리를 구현하는 Select 컨트롤을 제공합니다.

//定义select控制器
var select= new ol.interaction.Select();
map.addInteraction(select);//map加载该控件，默认是激活可用的
select.on('select', function(e) {
   console.log(e.selected); //打印已选择的Feature
});

1.2 지도 클릭 이벤트

이 방법은 마우스 클릭 좌표를 사용하여 현재 벡터 이미지레이어와의 교차 분석 쿼리를 수행하여 쿼리된 요소와 해당 요소가 속한 레이어 객체를 얻습니다

//地图单机事件
  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는 필터를 통해 조건이나 그래픽을 제출하여 attribute 쿼리 또는 공간 쿼리를 수행할 수 있습니다. 이 단락에서는 wfs 쿼리 사용 방법을 표현하기 위해 건조 정보를 사용합니다.

map.on('click',mapClick);
//点击地图查询
function mapClick(evt)
{
  var coor=evt.coordinate;
  coor=coor.join(',');
  //注意这里直接将点坐标提交，与图层做intersrct分析，对于面图层是没关系的。如果是查询，点或者线图形，一定要将coor先设置一个容差，经行buffer之后的图形，再去与图层叠加分析。不设置容差几乎就找不到了
  //图层的图形字段是geom，不同图层的图形字段都要自己先看下自己的，有的是the_geom，有的是shape等等，具体分析即可。
    var FILTER=&#39;<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>geom</PropertyName><gml:Point><gml:coordinates>&#39;+coor+&#39;</gml:coordinates></gml:Point>   </Intersects></Filter>&#39;;

  getFeature({
    typename:&#39;road:road_grid&#39;,//查询的服务图层名称
    filter:FILTER,//查询条件
    callback:&#39;getIdentifyroadGrid&#39;//查询的回调函数
  });
}
 var geojsonFormat=new ol.format.GeoJSON({defaultDataProjection:"EPSG:3857"});
function getIdentifyroadGrid(res)
{
   var features=geojsonFormat.readFeatures(res);
   console.log(&#39;点击查询返回的结果如下：&#39;);
   console.log(features);
}

//请求wfs数据
function getFeature(options)
{
  $.ajax(gisserverhost+&#39;geoserver/wfs&#39;,{
    type: &#39;GET&#39;,
    data: {
      service: &#39;WFS&#39;,
      version: &#39;1.1.0&#39;,
      request: &#39;GetFeature&#39;,
      typename: options.typename,
      srsname: options.srid,
      outputFormat: &#39;text/javascript&#39;,
      viewparams:options.viewparams,
      bbox:(options.extent===undefined)?undefined:options.extent.join(&#39;,&#39;) + &#39;,&#39;+options.srid,
      filter:options.filter
    },
    dataType: &#39;jsonp&#39;,
    jsonpCallback:&#39;callback:&#39;+options.callback,
    jsonp:&#39;format_options&#39;
  });

}

1.5 PostGIS를 통해 클릭 쿼리

pg를 구현하는 방법이 가장 사용하기 간단해야 합니다. 실행을 위해 데이터베이스에 제출하기 위해 클릭한 지리적 좌표를 배경으로 보내는 것입니다.

//其他省略，假设x,y是前台点击地图获取的坐标，坐标系假设只3857。
//这里假设后台获取了参数拼接sql提交数据库

다음과 같이 sql을 실행합니다. select * from t where ST_Intersect(t.geom,ST_GeomfromText('Point(x y)',3857));

완료!

요약

문제를 해결하는 방법은 여러 가지가 있을 것입니다. "고대부터 화산에는 하나의 길"이 아닙니다. 물론 서로 다른 길은 같은 목적을 가지고 있으며 풍경도 다릅니다. 물론 다릅니다. 우리는 클릭 쿼리 결과를 얻기 위해 최소한 5가지 방법을 사용할 수 있었습니다. 그러면 대부분의 사람들은 다섯 가지 방법 중 어떤 것이 더 좋고 어떤 것이 더 나쁜지 궁금해할 것입니다. 사실 좋은 방법이나 나쁜 방법은 없으며 단지 그것이 적절한가만이 있을 뿐입니다.

1 첫 번째와 두 번째 방법: 벡터 데이터를 지도 클라이언트에 추가해야 WMS 레이어인 경우 사용할 수 없습니다.
2 세 번째 방법: wms 레이어 현재로서는 처음 두 가지 벡터 방법을 처리할 수 없습니다.
3 네 번째 방법: 123 벡터와 wms는 모두 사용하기 전에 클라이언트에 로드되어야 합니다. 그러나 때로는 서로 다른 요구로 인해 Geoserver에서 게시한 레이어가 클라이언트에 로드되지 않아 사용할 수 없습니다. 그러나 게시된 경우에는 쿼리 개체가 클라이언트가 아닌 서버에 있더라도 wfs의 url 요청을 통해 결과를 쿼리할 수 있습니다.
4 다섯 번째 방법: 네 번째 방법과 동일합니다. 비즈니스 요구 사항이 다르기 때문에 때로는 데이터가 공개되지 않고 데이터베이스에만 유지되며, 이 경우에는 다섯 번째 방법으로 충분합니다. . 물론 데이터베이스의 방법은 일반적으로 대량의 데이터와 복잡한 트랜잭션 쿼리에 더 잘 사용됩니다. 한 번의 클릭으로 쿼리하는 것은 약간 과잉입니다.

위 내용은 OPENLAYERS3가 클릭 선택을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!