OL_3_WMS_Tile_GetFeatInfo

Base on http://openlayers.org/en/v3.12.1/doc/quickstart.html HTTP only !

by Thibault Coupin

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script src="https://getfirebug.com/firebug-lite.js"></script>
<!--div style="width: 100%; display: table;">
  <div style="display: table-row"-->
<div id="map" class="map">
</div>
<div id="info" class="info"> Right </div>
<!--/div>
</div-->

CSS

.map {
  height: 400px;
  width: 50%;
}

.info {
  position: relative;
  height: 400px;
  width: 49%;
  margin: 0;
  left: 51%;
  top: -400px;
}

iframe {
  width: 100%;
  height: 100%;
}

JavaScript

var sourceWMSAddress = new ol.source.TileWMS({
  url: "http://wxs.ign.fr/wnow33wqimoktpt0unhgwo0m/inspire/v/wms",
  params: {
    LAYERS: "BU.Building,TN.RoadTransportNetwork,TN.RailTransportNetwork,AD.Address"
  }
})

var mLayer = new ol.layer.Tile({
  source: sourceWMSAddress
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({
        layer: 'sat'
      })
    }),
    mLayer
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([2.424, 48.846]),
    zoom: 18
  })
});

// Base on http://openlayers.org/en/v3.12.1/examples/getfeatureinfo-tile.html
map.on('singleclick', function(evt) {
  document.getElementById('info').innerHTML = '';
  var viewResolution = /** @type {number} */ (map.getView().getResolution());
  var url = sourceWMSAddress.getGetFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857', {
      'INFO_FORMAT': 'text/plain',
      'QUERY_LAYERS': 'TN.RoadTransportNetwork,AD.Address'
    });
  if (url) {
    document.getElementById('info').innerHTML =
      '<iframe seamless src="' + url + '"></iframe>';
  }
});

map.on('pointermove', function(evt) {
  if (evt.dragging) {
    return;
  }
  var pixel = map.getEventPixel(evt.originalEvent);
  var hit = map.forEachLayerAtPixel(pixel, function(layer) {
    return true;
  });
  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});