logo
Tutorials Examples naver map js api v3 네이버 지도 API Extracting and restoring overlay data

Extracting and restoring overlay data

Extracting and restoring geometry information.

The following code example extracts the geometry information of an overlay created using a drawing tool and restores the extracted GeoJSON data by using the data layer.

Use a drawing tool to create a overlay on a map and click Extract/Restore.

  • 삭제
300m
NAVER
지도 데이터
x
© NAVER Corp. /OpenStreetMap
지도 확대
지도 확대/축소 슬라이더
지도 축소

지도 컨트롤러 범례

부동산
거리
읍,면,동
시,군,구
시,도
국가

300m
NAVER
지도 데이터
x
© NAVER Corp. /OpenStreetMap
지도 확대
지도 확대/축소 슬라이더
지도 축소

지도 컨트롤러 범례

부동산
거리
읍,면,동
시,군,구
시,도
국가
var map = new naver.maps.Map('map', {
    zoomControl: true,
    zoomControlOptions: {
        style: naver.maps.ZoomControlStyle.LARGE,
        position: naver.maps.Position.TOP_RIGHT
    },
    mapTypeControl: true,
    zoom: 15
});

var drawingManager;
naver.maps.Event.once(map, 'init', function () {
    drawingManager = new naver.maps.drawing.DrawingManager({
        map: map,
        rectangleOptions: {
            fillColor: '#ff0000',
            fillOpacity: 0.5,
            strokeWeight: 3,
            strokeColor: '#ff0000'
        },
        ellipseOptions: {
            fillColor: '#ff25dc',
            fillOpacity: 0.5,
            strokeWeight: 3,
            strokeColor: '#ff25dc'
        },
        polylineOptions: {
            strokeColor: '#222',
            strokeWeight: 3,
        },
        arrowlineOptions: {
            endIconSize: 16,
            strokeWeight: 3
        },
        polygonOptions: {
            fillColor: '#ffc300',
            fillOpacity: 0.5,
            strokeWeight: 3,
            strokeColor:'#ffc300'
        }
    });
});

var restoreMap = new naver.maps.Map('restoreMap', {
    zoomControl: true,
    zoomControlOptions: {
        style: naver.maps.ZoomControlStyle.LARGE,
        position: naver.maps.Position.TOP_RIGHT
    },
    mapTypeControl: true,
    zoom: 15
});

var geojson;

$("#restore").on("click", function(e) {
    e.preventDefault();

    if (geojson) {
        restoreMap.data.removeGeoJson(geojson);
        geojson = null;
    }

    geojson = drawingManager.toGeoJson();
    restoreMap.data.addGeoJson(geojson, true);
});