0
GET https://example.com/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=test:building&layers=buld_sejong&exceptions=application%2Fjson&INFO_FORMAT=application%2Fjson&I=221&J=178&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=14169590.555392835%2C4366694.551875548%2C14169896.303505976%2C4367000.299988689

0
<div id="map-popup"></div>

0
import { Overlay } from 'ol';
1

2
const popup = document.getElementById('map-popup') as HTMLElement | null;
3

4
const overlay = new Overlay({
5
    id: 'popup',
6
    element: popup || undefined,
7
    positioning: 'center-center',
8
    autoPan: {
9
        animation: {
10
            duration: 250
11
        }
12
    }
13
});

0
import { Map } from 'ol';
1

2
const map = new Map({
3
    // ...
4
    overlays: [ overlay ]
5
    // ...
6
});

0
// 오버레이 추가
1
map.addOverlay();
2

3
// 아이디별 오버레이 반환
4
map.getOverlayById();
5

6
// 오버레이 리스트 반환
7
map.getOverlays();
8

9
// 오버레이 제거
10
map.removeOverlay();

0
import ImageLayer from 'ol/layer/Image';
1

2
const layer = new TileLayer({
3
    source: source,
4
    minZoom: 15,
5
    properties: { name: 'wms' },
6
    zIndex: 5
7
});

0
map.on('singleclick', (e) =>
1
{
2
    // WMS properties의 name이 wms인 레이어를 추출
3
    const wmsLayer = map.getAllLayers().filter(layer => layer.get('name') === 'wms')[0];
4

5
    // WMS 레이어의 Source 호출
6
    const source: TileWMS | ImageWMS = wmsLayer.getSource();
7

8
    // GetFeatureInfo URL 생성
9
    const url = source.getFeatureInfoUrl(e.coordinate, map.getView().getResolution() || 0, 'EPSG:3857', {
10
        QUERY_LAYERS: 'test:building',
11
        INFO_FORMAT: 'application/json'
12
    });
13

14
    // GetFeatureInfo URL이 유효할 경우
15
    if (url)
16
    {
17
        const request = await fetch(url.toString(), { method: 'GET' }).catch(e => alert(e.message));
18

19
        // 응답이 유효할 경우
20
        if (request)
21
        {
22
            // 응답이 정상일 경우
23
            if (request.ok)
24
            {
25
                const json = await request.json();
26

27
                // 객체가 하나도 없을 경우
28
                if (json.features.length === 0)
29
                {
30
                    overlay.setPosition(undefined);
31
                }
32

33
                // 객체가 있을 경우
34
                else
35
                {
36
                    // GeoJSON에서 Feature를 생성
37
                    const feature = new GeoJSON().readFeature(json.features[0]);
38

39
                    // 생성한 Feature로 VectorSource 생성
40
                    const vector = new VectorSource({ features: [ feature ] });
41

42
                    setPopupState(
43
                        <ul>
44
                            <li>{feature.getId() || ''}</li>
45
                            <li>{feature.get('buld_nm') || <span>이름 없음</span>}</li>
46
                            <li>{feature.get('bul_man_no')}</li>
47
                        </ul>
48
                    );
49

50
                    overlay.setPosition(getCenter(vector.getExtent()));
51
                }
52
            }
53

54
            // 아닐 경우
55
            else
56
            {
57
                alert(request.status);
58
            }
59
        }
60
    }
61
});