1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.layer.Tile');
|
4 | goog.require('ol.source.TileWMS');
|
5 |
|
6 |
|
7 | var wmsSource = new ol.source.TileWMS({
|
8 | url: 'https://ahocevar.com/geoserver/wms',
|
9 | params: {'LAYERS': 'ne:ne', 'TILED': true},
|
10 | serverType: 'geoserver',
|
11 | crossOrigin: 'anonymous'
|
12 | });
|
13 |
|
14 | var wmsLayer = new ol.layer.Tile({
|
15 | source: wmsSource
|
16 | });
|
17 |
|
18 | var view = new ol.View({
|
19 | center: [0, 0],
|
20 | zoom: 1
|
21 | });
|
22 |
|
23 | var map = new ol.Map({
|
24 | layers: [wmsLayer],
|
25 | target: 'map',
|
26 | view: view
|
27 | });
|
28 |
|
29 | map.on('singleclick', function(evt) {
|
30 | document.getElementById('info').innerHTML = '';
|
31 | var viewResolution = (view.getResolution());
|
32 | var url = wmsSource.getGetFeatureInfoUrl(
|
33 | evt.coordinate, viewResolution, 'EPSG:3857',
|
34 | {'INFO_FORMAT': 'text/html'});
|
35 | if (url) {
|
36 | document.getElementById('info').innerHTML =
|
37 | '<iframe seamless src="' + url + '"></iframe>';
|
38 | }
|
39 | });
|
40 |
|
41 | map.on('pointermove', function(evt) {
|
42 | if (evt.dragging) {
|
43 | return;
|
44 | }
|
45 | var pixel = map.getEventPixel(evt.originalEvent);
|
46 | var hit = map.forEachLayerAtPixel(pixel, function() {
|
47 | return true;
|
48 | });
|
49 | map.getTargetElement().style.cursor = hit ? 'pointer' : '';
|
50 | });
|