0
/**
1
 * 위치 마커 추가 버튼 Element 반환 메서드
2
 *
3
 * @param {SubProps} props: 프로퍼티
4
 *
5
 * @returns {JSX.Element} Element
6
 */
7
export function LocationWithMarker({ map }: SubProps)
8
{
9
    // 맵 객체가 유효할 경우
10
    if (map)
11
    {
12
        // 드래그 할 경우, 레이어의 Feature를 전부 초기화
13
        map.on('pointerdrag', () =>
14
        {
15
            map.getAllLayers().filter(layer => layer.get('name') === 'location')[0].getSource().clear();
16
        });
17

18
        // location 벡터 레이어가 없을 경우
19
        if (map.getAllLayers().filter(layer => layer.get('name') === 'location').length === 0)
20
        {
21
            // 전용 레이어를 하나 추가함
22
            map.addLayer(new VectorLayer({
23
                source: new VectorSource(),
24
                properties: {
25
                    name: 'location'
26
                },
27
                style: new Style({
28
                    image: new Icon({
29
                        src: 'https://tsauerwein.github.io/ol3/animation-flights/examples/data/icon.png'
30
                    })
31
                }),
32
                minZoom: 15,
33
                zIndex: 10
34
            }));
35
        }
36

37
        const onClick = () =>
38
        {
39
            // 지오로케이션 사용이 가능할 경우
40
            if ('geolocation' in navigator)
41
            {
42
                const tag = document.querySelector('button.location') as HTMLButtonElement;
43

44
                navigator.geolocation.getCurrentPosition(position =>
45
                {
46
                    const { latitude, longitude } = position.coords;
47

48
                    // 지도 이동
49
                    map.getView().setCenter([ longitude, latitude ]);
50

51
                    // location 레이어의 Source에 Feature를 추가
52
                    map.getAllLayers().filter(layer => layer.get('name') === 'location')[0].getSource().addFeature(new Feature({
53
                        geometry: new Point([ longitude, latitude ])
54
                    }));
55
                }, () => alert('실패'), { enableHighAccuracy: true });
56
            }
57

58
            // 아닐 경우
59
            else
60
            {
61
                alert('사용자 위치를 확인할 수 없습니다.');
62
            }
63
        };
64

65
        return (
66
            <button className='location' title='현재 위치 이동' onClick={onClick}><BiCurrentLocation size={25} color="white" /></button>
67
        );
68
    }
69

70
    // 아닐 경우
71
    else
72
    {
73
        return null;
74
    }
75
}

0
// 드래그 할 경우, 레이어의 Feature를 전부 초기화
1
map.on('pointerdrag', () =>
2
{
3
    map.getAllLayers().filter(layer => layer.get('name') === 'location')[0].getSource().clear();
4
});

0
// location 벡터 레이어가 없을 경우
1
if (map.getAllLayers().filter(layer => layer.get('name') === 'location').length === 0)
2
{
3
    // 전용 레이어를 하나 추가함
4
    map.addLayer(new VectorLayer({
5
        source: new VectorSource(),
6
        properties: {
7
            name: 'location'
8
        },
9
        style: new Style({
10
            image: new Icon({
11
                src: 'https://tsauerwein.github.io/ol3/animation-flights/examples/data/icon.png'
12
            })
13
        }),
14
        minZoom: 15,
15
        zIndex: 10
16
    }));
17
}

0
// location 레이어의 Source에 Feature를 추가
1
map.getAllLayers().filter(layer => layer.get('name') === 'location')[0].getSource().addFeature(new Feature({
2
    geometry: new Point([ longitude, latitude ])
3
}));

0
<LocationWithMarker map={mapState} />