[OpenLayers] 마우스로 도형 그리기

티스토리 뷰

Skill/OpenLayers

[OpenLayers] 마우스로 도형 그리기

진열사랑 2020. 9. 20. 23:12

OL3에서 도형을 마우스로 그리기는 코드를 정리해 봅니다. OL3에서 마우스를 이용해 도형을 그리기 위한 목적으로 사용되는 레이어가 있는데요. 바로 ol.source.Vector를 소스(source)로 갖는 ol.layer.Vector 레이어입니다.

Open Street Map을 레이어로 추가하기 위해 raster 변수를 정의합니다.

var raster = new ol.layer.Tile({ source: new ol.source.OSM() });

다음으로 지도 위에 마우스로 도형을 생성하기 위한 레이어를 위해 vector라는 변수를 아래처럼 정의합니다.

var source = new ol.source.Vector({ wrapX: false });

var vector = new ol.layer.Vector({ source: source });

위의 코드 중 1번은 vector 레이어에서 사용할 소스를 위한 변수 정의인데요. wrapX를 false로 줌으로써 화면 상의 동일한 좌표에 대해 중복으로 도형을 표시하지 않도록 합니다.

다음으로 지도를 위한 map 변수를 정의하는 코드인데요. 앞서 만들어 둔 raster와 vector 변수를 layers 속성 지정을 위해 사용하고 있고, 지도를 표시할 div의 id를 target 속성에 지정하고 있으며, view에 화면에 표시할 초기 지도 좌표와 줌 레벨 값을 지정하고 있습니다.

var map = new ol.Map({

layers: [raster, vector],

target: 'map',

view: new ol.View({ center: [-11000000, 4600000], zoom: 4 })

});

화면에 지도가 표시되고 마우스를 이용해 도형을 그릴 수 있는 레이어까지 추가해 두었습니다. 다음으로 select 컨트롤에서 지도에 그릴 도형을 선택하면 마우스를 이용해 도형을 그릴 수 있는 코드를 살펴보겠습니다.

var typeSelect = document.getElementById('type');

var draw;

typeSelect.onchange = function () {

map.removeInteraction(draw);

addInteraction(); };

function addInteraction() {

var value = typeSelect.value;

if (value !== 'None') {

draw = new ol.interaction.Draw({

source: source,

type: (typeSelect.value)

});

map.addInteraction(draw);

}

addInteraction();

}

먼저 그릴 도형을 선택할 수 있는 select 컨트롤을 어디서든 접근할 수 있도록 1번 코드에서 typeSelect 변수에 select 컨트롤을 id로 얻어 받아 둡니다. 그리고 2번에 draw 변수가 있는데요. 이 draw 변수는 우리가 선택한 도형을 그리기(Draw) 위한 사용자와의 상호작용(Interaction)에 대한 객체를 생성해 두고 지도 객체에 addInteraction 함수를 통해 추가하면 그리기 상호작용이 작동되며 필요한 때에 다시 removeInteraction 함수를 통해 제거하면 상호작용을 제거 할 수 있습니다. 4번 코드는 select 컨트롤에 대한 선택 항목이 변경될때 호출되는 이벤트인데요. 5~6번의 실행 코드를 보면 먼저 기존의 상호작용 객체를 제거하고 다시 addInteraction이라는 사용자 정의 함수를 호출하여 상호작용 객체를 추가해 줍니다. 9번에 addInteraction 함수의 정의가 있는데요. 선택 항목의 value 속성이 None이 아닌 경우에 12번 코드를 통해 ol.interaction.Draw 클래스 객체를 생성합니다. ol.interaction.Draw 객체를 생성할때 인자는 어떤 레이어의 소스에 사용자가 그릴 도형이 저장될지(source)와 도형의 타입(type)을 지정합니다. 이렇게 생성된 그리기 상호작용 객체를 17번에서 지도에 추가하면 바로 지도 상에 도형을 그릴 수 있게 됩니다. 마지막으로 21번에서 addInteraction 함수를 직접 호출해서 웹 페이지가 처음 뜰때 바로 도형을 그릴 수 있게 합니다.

전체소스

<!DOCTYPE html>
<html>
<head>
    <title>Draw Features</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>

    <script>
        $(function () {
            var raster = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

            var source = new ol.source.Vector({ wrapX: false });

            var vector = new ol.layer.Vector({
                source: source
            });

            var map = new ol.Map({
                layers: [raster, vector],
                target: 'map',
                view: new ol.View({
                    center: [-11000000, 4600000],
                    zoom: 4
                })
            });

            var typeSelect = document.getElementById('type');
            var draw; // global so we can remove it later

            typeSelect.onchange = function () {
                map.removeInteraction(draw);
                addInteraction();
            };

            addInteraction();

            function addInteraction() {
                var value = typeSelect.value;
                if (value !== 'None') {
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
                    });
                    map.addInteraction(draw);
                }
            }
        });
    </script>
</head>
<body>
    <div id="map"></div>
    <form>
        <label>Geometry type</label>
        <select id="type">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
            <option value="None">None</option>
        </select>
    </form>
</body>
</html>

위 소스가 안되서 다음과 같이 했더니.. 잘된다.

저작자표시 비영리

'Skill > OpenLayers' 카테고리의 다른 글

[OpenLayers] 마우스 click시 url가져오기?? (0)	2020.09.28
[OpenLayers] ol.control (0)	2020.09.22
[OpenLayers] 마우스 오버시 특정 구역 하이라이팅하기(with ol.interaction.select) (0)	2020.09.20
[OpenLayers] OpenLayers3 와 VWORLD (0)	2020.09.20
[OpenLayers] 사용법 기초1 (1)	2020.09.20

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

exhibitlove

티스토리 뷰

[OpenLayers] 마우스로 도형 그리기

'Skill > OpenLayers' 카테고리의 다른 글

티스토리툴바