폴리곤 수정관련 문의

카카오맵2542 · 4월 6, 2025, 6:16오전

안녕하세요. 카카오 맵에 그려진 폴리곤 수정 관련 문의드립니다.
선택된 폴리곤의 특정 점을 삭제하는 api나 방법이 있는지 궁금해 문의드립니다.

특정 폴리곤의 vertex를 삭제할때 setPath를 활용하면, 삭제된 좌표에 있던 vertex의 네모 박스가 사라지지 않는데요, 이 부분을 해결할 방법이 있을지 여쭤보고 싶습니다. 아예 기존 폴리곤을 삭제하고 새로운 폴리곤을 올리는 방법 밖에 없을까요?

추가로 Polygon 객체를 직접 생성해서 setMap을 한 것과, manager.put(type, path) 를 통해 생성한 폴리곤의 차이가 궁금합니다.
전자의 폴리곤은 drawingmanager.remove로 삭제가 안되고, manger로 put한 폴리곤은 setMap(null)을 해도 지도에 반영이 되지 않습니다. new daum.maps.Polygon({}) 으로 생성한 폴리곤을 drwaingManger의 관리하에 둘 방법이 있을까요?

ExtendsPolygon 사용이 불가능하다면, manager.put 을 했을떄 추가되는 폴리곤은 getOverlays로 받아오는 배열의 맨 끝에 추가된다고 보장이 될까요?

lea.ju · 4월 6, 2025, 11:47오후

polygon에 다른 path를 적용하는 방법은 polygone.setPath(updatePath); 호출 시
변경된 path 정보를 파라미터로 넘겨주면 새 경로로 적용됩니다.
박스가 사라지지 않는 말은 이전에 그린 path가 지워지지 않는다는 말씀이신가요?
다각형 이벤트 예제에서 아래 함수를 실행하면 다각형 경로가 변경되는데 한번 확인 부탁드립니다.
추가 문의하실 경우 현상을 확인할 수 있는 소스 코드도 함께 첨부해 주세요.

function updatePolygon() {
    let updatePath = [
        new kakao.maps.LatLng(33.45133510810506, 126.57159381623066),
        new kakao.maps.LatLng(33.44955812811862, 126.5713551811832),
        new kakao.maps.LatLng(33.449986291544086, 126.57263296172184),
        new kakao.maps.LatLng(33.450682513554554, 126.57321034054742),
        new kakao.maps.LatLng(33.451346760004206, 126.57235740081413) 
    ];

    polygon.setPath(updatePath);   
}

DrawingManager.put으로 폴리곤을 추가한 경우, 해당 폴리곤은 DrawingManager 내부에서 관리되며
DrawingManger에서 제공하는 기능으로 Polygon을 컨트롤 할 수 있습니다.
하지만 Polygon 객체로 생성한 경우는 DrawingManager에 포함되지 않기 때문에
DrawingManager의 remove 기능으로는 삭제되지 않습니다.
그리고 DrawingManager에 poylgon을 추가한 경우에도 polygon.setMap(null)은 동작을 하는걸로 보입니다.
아래 코드 참고해 주세요.

let container = document.getElementById('map'),
    map = new kakao.maps.Map(container, {  
        center: new kakao.maps.LatLng(33.450701, 126.570667) 
    });

let options = {
    map: map, // drawing manager로 그리기 요소를 그릴 map 객체 
    drawingMode: [ // drawing manager로 제공할 그리기 요소 모드
        kakao.maps.drawing.OverlayType.POLYGON
    ],    
    polygonOptions: {
        strokeColor: '#39f',
        fillColor: '#39f',
        fillOpacity: 0.5,
        hintStrokeStyle: 'dash',
        hintStrokeOpacity: 0.5
    }
};

let manager = new kakao.maps.drawing.DrawingManager(options);

let polygonPath = [
        new kakao.maps.LatLng(33.450965145649576, 126.57020280169624),
        new kakao.maps.LatLng(33.450958085478554, 126.57011679275952),
        new kakao.maps.LatLng(33.45098043867851, 126.57006290510864),
        new kakao.maps.LatLng(33.45097328515681, 126.56995000794919),
        new kakao.maps.LatLng(33.450990859851004, 126.56981816664641),
        new kakao.maps.LatLng(33.45101296099739, 126.5696916806749),
        new kakao.maps.LatLng(33.45098334215462, 126.56960040542974),
        new kakao.maps.LatLng(33.450985176064975, 126.56947939729541),
        new kakao.maps.LatLng(33.450917277011726, 126.56939906680272),
        new kakao.maps.LatLng(33.45086322853736, 126.56941277823229),
        new kakao.maps.LatLng(33.45081577388131, 126.56937805752437),
        new kakao.maps.LatLng(33.450779813154405, 126.56940781273165),
        new kakao.maps.LatLng(33.45081633405741, 126.56953938654304),
        new kakao.maps.LatLng(33.45080569884398, 126.56972228175628),
        new kakao.maps.LatLng(33.450752219367345, 126.56990001069012),
        new kakao.maps.LatLng(33.45065801908533, 126.57003491859678),
        new kakao.maps.LatLng(33.45063139100987, 126.57015604858434),
        new kakao.maps.LatLng(33.45064506393239, 126.5701990028593)
];



manager.put(kakao.maps.drawing.OverlayType.POLYGON, polygonPath);


const polygonPath2 = [
    new kakao.maps.LatLng(33.45133510810506, 126.57159381623066),
    new kakao.maps.LatLng(33.44955812811862, 126.5713551811832),
    new kakao.maps.LatLng(33.449986291544086, 126.57263296172184),
    new kakao.maps.LatLng(33.450682513554554, 126.57321034054742),
    new kakao.maps.LatLng(33.451346760004206, 126.57235740081413) 
];

manager.put(kakao.maps.drawing.OverlayType.POLYGON, polygonPath2);


const overlays = manager.getOverlays([kakao.maps.drawing.OverlayType.POLYGON]);
// DrawingManager.remove로 0번째 삭제
// manager.remove(overlays.polygon[0]);


//0번째 polygon 지도에서 삭제
//drawing option으로 draggable, removable, editable등을 사용할 경우 동작이 어색해질 수 있으므로
//manager.remove를 사용해서 지우는것을 추천합니다.
overlays.polygon[0].setMap(null);

카카오맵2542 · 4월 7, 2025, 1:08오전

SetPath 로 폴리곤을 수정하면 보시다시피 path 자체는 수정되지만 삭제된 부분에 그리기 툴 박스는 사라지지 않습니다. 그래서 점 하나 삭제하기 위해서 기존 폴리곤을 삭제하고, 새 폴리곤을 생성하는 불필요한 과정을 거쳐야 됩니다…!
setMap(null)은 동작하는데, path로 폴리곤을 직접 생성하는게 아니라 put 방식으로 만들게되면, 해당 폴리곤에 접근하기 위해 모든 overlay를 가져와서 그 중 하나를 선택해가는게 비효율적으로 보여 여쭤본겁니다. 폴리곤에 이벤트 등록과 같은 추가 작업이 필요할때, 폴리곤 하나를 직접 생성해서 작업 한 뒤에 manager에 넘겨주는 방식이 가능하다면 좋을 것 같습니다.

+) 가능하다면 이벤트의 state_changed 시에 변경된 폴리곤의 정보가 넘어왔으면 좋겠습니다.
drawingManager.addListener(‘state_changed’, function() { } <— 여기 function에 e로 target을 받을 수 있으면 많이 편할것같습니다…!

lea.ju · 4월 7, 2025, 4:12오전

DrawingManager에 추가된 Polygon객체를 말씀하신 것이었군요.
DrawingManager는 사용자의 인터렉션으로 지도 위에 도형을 그리고 형상 편집 및 삭제를 제공하는 라이브러리입니다.
따라서 DrawingManager에 등록된 도형을 직접 접근해서 경로 변경을 하거나 삭제하는 경우,
라이브러리에서 제공하는 기능(removable, editable 등)과 어긋날 수 있기 때문에
DrawingManager의 기능을 통해 제어하는 것을 권장합니다.
(예를 들어 도형 편집은 vertex UI를 이용해서 편집, 삭제는 manager.remove API 또는 removable 버튼 사용)

현재 제공하는 기능에서는, 기존 등록된 도형의 path를 변경하려면 vertex UI를 이용한 편집 또는
말씀하신 것처럼 새로운 path정보로 Polygon을 추가하고, 기존 path로 생성된 polygon은 overlay 정보에서 찾아 삭제해야합니다.
Polygon을 직접 제어 해야할 경우 DrawingManager보다 Polygon객체로 생성해서 관리하는 방법이 적절할 수 있습니다.

마지막으로 말씀주신 내용은 검토해보겠습니다.
감사합니다.