0
GET https://example.com/geoserver/wfs?service=WFS&version=2.0.0&request=GetFeature&typename=test:building&srsName=EPSG:3857&outputFormat=application/json&bbox=14168809.936013725,4366042.924151548,14170735.193663657,4367768.7289308,EPSG:3857

0
import { Vector as VectorSource } from 'ol/source';
1
import { GeoJSON } from 'ol/format';
2
import { bbox } from 'ol/loadingstrategy';
3

4
const wfs = new VectorSource({
5
    format: new GeoJSON(),
6
    url: (extent) => `https://example.com/geoserver/wfs?service=WFS&version=2.0.0&request=GetFeature&typename=test:building&srsName=EPSG%3A3857&outputFormat=application%2Fjson&exceptions=application%2Fjson&bbox=${extent[0]}%2C${extent[1]}%2C${extent[2]}%2C${extent[3]}%2CEPSG%3A3857`,
7
    strategy: bbox
8
});

0
const url = `https://example.com/geoserver/wfs?service=WFS&version=2.0.0&request=GetFeature&typename=test:building&srsName=EPSG%3A3857&outputFormat=application%2Fjson&exceptions=application%2Fjson&bbox=${extent[0]}%2C${extent[1]}%2C${extent[2]}%2C${extent[3]}%2CEPSG%3A3857`

0
/**
1
 * URL 빌더 메서드
2
 *
3
 * @param {string} host: 호스트
4
 * @param {{ [ key: string ]: string | number | boolean | undefined }} query: 쿼리 파라미터
5
 *
6
 * @returns {string} URL
7
 */
8
export function urlBuilder(host: string, query: { [ key: string ]: string | number | boolean | undefined })
9
{
10
    const param = Object.entries(query).map(([ key, value ]) => value ? `${key}=${encodeURIComponent(value)}` : '').join('&');
11

12
    return `${host}?${param}`;
13
}
14

15
// https://example.com/geoserver/wfs?name=steve&age=18&actived=true
16
urlBuilder('https://example.com/geoserver/wfs', {
17
    name: 'steve',
18
    age: 18,
19
    actived: true
20
});

0
const url = (extent) => `https://example.com/geoserver/wfs?service=WFS&version=2.0.0&request=GetFeature&typename=test:building&srsName=EPSG%3A3857&outputFormat=application%2Fjson&exceptions=application%2Fjson&bbox=${extent[0]}%2C${extent[1]}%2C${extent[2]}%2C${extent[3]}%2CEPSG%3A3857`;
1

2
const advanced = (extent) => urlBuilder('https://example.com/geoserver/wfs', {
3
    service: 'WFS',
4
    version: '2.0.0',
5
    request: 'GetFeature',
6
    typename: 'test:building',
7
    srsName: 'EPSG:3857',
8
    outputFormat: 'application/json',
9
    exceptions: 'application/json',
10
    bbox: `${extent.join(',')},EPSG:3857`
11
});

0
import { Vector as VectorLayer } from 'ol/layer';
1

2
const wfsLayer = new VectorLayer({
3
    source: wfs,
4
    minZoom: 15,
5
    zIndex: 5,
6
    properties: { name: 'wfs' }
7
});

0
import View from 'ol/View';
1
import proj4 from 'proj4';
2

3
const view = new View({
4
    projection: 'EPSG:3857',
5
    center: proj4('EPSG:4326', 'EPSG:3857', [ 127.28923267492068, 36.48024986578043 ]),
6
    zoom: 17
7
});

0
import proj4 from 'proj4';
1

2
// 경위도 좌표를 EPSG:5179로 변환
3
const xy: number[] = proj4('EPSG:4326', 'EPSG:5179', [ 127.28923267492068, 36.48024986578043 ]);

0
// 벡터 레이어 객체
1
const wfsLayer = new VectorLayer({
2
    source: wfs,
3
    // 스타일 지정 가능
4
    style: {},
5
    minZoom: 15,
6
    zIndex: 5,
7
    properties: { name: 'wfs' }
8
});

0
import { Feature } from 'ol';
1
import Geometry from 'ol/geom/Geometry';
2
import RenderFeature from 'ol/render/Feature';
3
import Circle from 'ol/style/Circle';
4
import Fill from 'ol/style/Fill';
5
import Stroke from 'ol/style/Stroke';
6
import Style from 'ol/style/Style';
7
import Text from 'ol/style/Text';
8

9
/**
10
 * 스타일 반환 메서드
11
 *
12
 * @param {RenderFeature | Feature<Geometry>} feature: Feature
13
 *
14
 * @returns {Style} 스타일
15
 */
16
function getStyle(feature: RenderFeature | Feature<Geometry>)
17
{
18
    return new Style({
19
        image: new Circle({
20
            stroke: new Stroke({
21
                color: 'rgba(3, 102, 53, 1)',
22
                width: 2
23
            }),
24
            fill: new Fill({
25
                color: 'rgba(3, 102, 53, 0.6)'
26
            }),
27
            radius: 20
28
        }),
29
        text: new Text({
30
            font: '0.8rem sans-serif',
31
            fill: new Fill({ color: 'white' }),
32
            stroke: new Stroke({
33
                color: 'rgba(0, 0, 0, 1)',
34
                width: 4
35
            }),
36
            text: feature.get('address')
37
        })
38
    });
39
}

0
import { Feature } from 'ol';
1
import Geometry from 'ol/geom/Geometry';
2
import RenderFeature from 'ol/render/Feature';
3
import { Icon } from 'ol/style';
4
import Fill from 'ol/style/Fill';
5
import Stroke from 'ol/style/Stroke';
6
import Style from 'ol/style/Style';
7
import Text from 'ol/style/Text';
8

9
/**
10
 * 스타일 반환 메서드
11
 *
12
 * @param {RenderFeature | Feature<Geometry>} feature: Feature
13
 *
14
 * @returns {Style} 스타일
15
 */
16
function getStyle(feature: RenderFeature | Feature<Geometry>)
17
{
18
    return new Style({
19
        image: new Icon({
20
            src: 'https://t1.daumcdn.net/cfile/tistory/99857F4F5E738F472F',
21
            scale: 0.05
22
        }),
23
        text: new Text({
24
            font: '0.8rem sans-serif',
25
            fill: new Fill({ color: 'white' }),
26
            stroke: new Stroke({
27
                color: 'rgba(0, 0, 0, 1)',
28
                width: 4
29
            }),
30
            text: feature.get('address')
31
        })
32
    });
33
}

0
import { Feature } from 'ol';
1
import Geometry from 'ol/geom/Geometry';
2
import RenderFeature from 'ol/render/Feature';
3
import Fill from 'ol/style/Fill';
4
import Stroke from 'ol/style/Stroke';
5
import Style from 'ol/style/Style';
6
import Text from 'ol/style/Text';
7

8
/**
9
 * 스타일 반환 메서드
10
 *
11
 * @param {RenderFeature | Feature<Geometry>} feature: Feature
12
 *
13
 * @returns {Style} 스타일
14
 */
15
function getStyle(feature: RenderFeature | Feature<Geometry>)
16
{
17
    return new Style({
18
        stroke: new Stroke({
19
            color: 'rgba(100, 149, 237, 1)',
20
            width: 2
21
        }),
22
        fill: new Fill({
23
            color: 'rgba(100, 149, 237, 0.6)'
24
        }),
25
        text: new Text({
26
            font: '0.8rem sans-serif',
27
            fill: new Fill({ color: 'white' }),
28
            stroke: new Stroke({
29
                color: 'rgba(0, 0, 0, 1)',
30
                width: 4
31
            }),
32
            text: feature.get('address')
33
        })
34
    });
35
}

0
import Map from 'ol/Map';
1
import { Vector as VectorSource } from 'ol/source';
2
import { GeoJSON } from 'ol/format';
3
import { bbox } from 'ol/loadingstrategy';
4
import { Vector as VectorLayer } from 'ol/layer';
5
import View from 'ol/View';
6
import proj4 from 'proj4';
7
import { Feature } from 'ol';
8
import Geometry from 'ol/geom/Geometry';
9
import RenderFeature from 'ol/render/Feature';
10
import Fill from 'ol/style/Fill';
11
import Stroke from 'ol/style/Stroke';
12
import Style from 'ol/style/Style';
13
import Text from 'ol/style/Text';
14

15
// WFS 벡터 소스
16
const wfs = new VectorSource({
17
    format: new GeoJSON(),
18
    url: (extent) => urlBuilder('https://example.com/geoserver/wfs', {
19
        service: 'WFS',
20
        version: '2.0.0',
21
        request: 'GetFeature',
22
        typename: 'TEST:buld_sejong',
23
        srsName: 'EPSG:3857',
24
        outputFormat: 'application/json',
25
        exceptions: 'application/json',
26
        bbox: `${extent.join(',')},EPSG:3857`
27
    }),
28
    strategy: bbox
29
});
30

31
// 벡터 레이어 객체
32
const wfsLayer = new VectorLayer({
33
    source: wfs,
34
    style: feature => new Style({
35
        stroke: new Stroke({
36
            color: 'rgba(100, 149, 237, 1)',
37
            width: 2
38
        }),
39
        fill: new Fill({
40
            color: 'rgba(100, 149, 237, 0.6)'
41
        }),
42
        text: new Text({
43
            font: '0.8rem sans-serif',
44
            fill: new Fill({ color: 'white' }),
45
            stroke: new Stroke({
46
                color: 'rgba(0, 0, 0, 1)',
47
                width: 4
48
            }),
49
            text: feature.get('address')
50
        })
51
    }),
52
    minZoom: 15,
53
    zIndex: 5,
54
    properties: { name: 'wfs' }
55
});
56

57
// 뷰 객체
58
const view = new View({
59
    projection: 'EPSG:3857',
60
    center: proj4('EPSG:4326', 'EPSG:3857', [ 127.28923267492068, 36.48024986578043 ]),
61
    zoom: 17
62
});
63

64
// 맵 객체
65
const map = new Map({
66
    layers: [ vworldBaseLayer, vworldHybridLayer, wfsLayer ],
67
    target: 'map',
68
    view: view
69
});