ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

โ†˜ Programming/โ”— GIS

[ Openlayers ] ๋งˆ์šฐ์Šค ์˜ค๋ฒ„์‹œ ํŠน์ • ๊ตฌ์—ญ ํ•˜์ด๋ผ์ดํŒ…ํ•˜๊ธฐ(with ol.interaction.select)

Kithub 2020. 4. 9. 12:22

ํด๋ฆฌ๊ณค ํ‘œ์ถœ ์‹œ ํŠน์ •์ง€์—ญ์„ ํ•˜์ด๋ผ์ดํŒ… ํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š”๋ฐ 

์ด๋•Œ  ol.interaction.select ๊ฐ์ฒด๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๊ฐ„๋‹จํ•œ ํ•˜์ด๋ผ์ดํŒ… ํšจ๊ณผ๋ฅผ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

์†Œ์Šค์ฝ”๋“œ

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>kithub example</title>
    <meta name="author" content="Your Name">
    <meta name="description" content="Example description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
    <style>
        .map {
            height: 1000px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            url: 'https://xdworld.vworld.kr/2d/midnight/service/{z}/{x}/{y}.png'
                        })
                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([126.978275264, 37.566642192]),
                    zoom: 7
                })
            });

        // ํ–‰์ •๊ตฌ์—ญ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ
        var vectorSource = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: function(extent) {
                var strUrl = 'http://localhost/geoserver/sqlite/wfs?service=' +
                    'WFS' +
                    '&version=2.0.0' +
                    '&request=GetFeature' +
                    '&typename=sqlite:ZONE_SIDO_Co2Intensity_auto_weekday_2016' +
                    '&outputFormat=application/json' +
                    '&srsname=EPSG:3857' +
                    '&bbox=' + extent.join(',') + ',EPSG:3857';
                return strUrl;
            },
            strategy: ol.loadingstrategy.bbox
        });

        var vectorLayer = new ol.layer.Vector({
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 0)',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255,0,0,0.2)'
                })
            }),
            source: vectorSource,
            name: 'area'
        });

        //ํ–‰์ •๊ตฌ์—ญ ๋ ˆ์ด์–ด ์ถ”๊ฐ€
        map.addLayer(vectorLayer);



        // ๊ฐ ํ–‰์ •๊ตฌ์—ญ ๋งˆ์šฐ์Šค ์˜ค๋ฒ„์‹œ ํ•˜์ด๋ผ์ดํŒ…
        // ๋งˆ์šฐ์Šค ์˜ค๋ฒ„์‹œ ์Šคํƒ€์ผ ์ง€์ •
        var selectPointerMove = new ol.interaction.Select({
            condition: ol.events.condition.pointerMove,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'white',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(0,0,255,0.6)'
                })
            })
        });
        // interaction ์ถ”๊ฐ€
        map.addInteraction(selectPointerMove);
    </script>
</body></html>

 

 

๊ฒฐ๊ณผํ™”๋ฉด

'โ†˜ Programming > โ”— GIS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[ GIS ] postgis data๋ฅผ shp์œผ๋กœ ๋‹ค์šด๋กœ๋“œ ํ•˜๊ธฐ(feat. geotools)  (1) 2021.07.30
[ GIS ] shp ๋ฐ์ดํ„ฐ์˜ ์ง€์˜ค๋ฉ”ํŠธ๋ฆฌ ์ขŒํ‘œ ์ˆœ์„œ ๋ณ€๊ฒฝํ•˜๊ธฐ ( feat. geotools )  (0) 2021.07.20
[ OpenLayers ] ๋ ˆ์ด์–ด feature ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ  (0) 2020.11.04
[ OpenLayers ] ํŠน์ • ๋ ˆ์ด์–ด ์‚ญ์ œํ•˜๊ธฐ  (0) 2020.11.04
[ GIS ] geoserver - ์„œ๋ฒ„ ๊ตฌ์ถ•ํ•˜๊ธฐ  (0) 2020.03.24
๋Œ“๊ธ€
๋ฐ˜์‘ํ˜•