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
map.on('singleclick', (e) =>
1
{
2
    // 해당 픽셀에 객체가 있을 경우
3
    if (map.hasFeatureAtPixel(e.pixel))
4
    {
5
        map.forEachFeatureAtPixel(e.pixel, feature =>
6
        {
7
            // 해당 객체의 아이디가 buld_sejong으로 시작할 경우
8
            if (feature.getId()?.toString().startsWith('buld_sejong'))
9
            {
10
                const geom = feature.getGeometry();
11

12
                // 공간정보가 유효할 경우
13
                if (geom)
14
                {
15
                    const [ minX, minY, maxX, maxY ] = geom.getExtent();
16

17
                    setPopupState((
18
                        <ul>
19
                            <li>{feature.getId() || ''}</li>
20
                            <li>{feature.get('buld_nm') || <span>이름 없음</span>}</li>
21
                            <li>{feature.get('bul_man_no')}</li>
22
                        </ul>
23
                    ));
24

25
                    overlay.setPosition([ (maxX + minX) / 2, (maxY + minY) / 2 ]);
26
                }
27
            }
28
        });
29
    }
30

31
    // 없을 경우
32
    else
33
    {
34
        overlay.setPosition(undefined);
35
    }
36
});

0
map.on('pointermove', (e) => map.getViewport().style.cursor = map.hasFeatureAtPixel(e.pixel) ? 'pointer' : '');