대량의 마커 저장후 불러오기

카카오맵 API (지도/로컬)
1

제가 python flask를 사용해서 다음지도 api로 지도에 마커를 찍고 있습니다.
.py에서 .html로 좌표와 infobox내용을 넘겨주고, .html의 에서 마커를 생성해줍니다.
그런데 이게 마커가 20000개가 넘다보니 마커생성에만 20초가 넘게 걸립니다.
제가 생각했던 방법이 만들어놓은 마커를 .json으로 저장해서 지도를 볼때마다 마커를 만들지 않고 불러오는거였는데 저장하고 불러오니 이걸 마커로 인식을 못해서…
다른 방법이 있을까요??

질문을 정리하자면…대량의 마커를 빠르게 만들거나 불러올 수 있는지 알고 싶습니다.

1개의 좋아요
2

서버 연산이 오래걸리는 것과는 별개로 2만개면 브라우저에서도 표현하는데 시간이 꽤나 걸릴 듯 합니다.

실제로 제가 작업하는 컴퓨터가 느린편은 아닌데
가장 단순한 아래 코드만해도 화면에 표출하는데만 10초가 넘어가네요.

for (var i = 0; i < 20000; i++) {
    var marker = new daum.maps.Marker({
        position: markerPosition
    });
    marker.setMap(map);
}

렌더링 시간은 마커의 절대적인 량에 비례하므로
빠른 렌더링을 원하신다면 마커를 많이 찍지 않는 방법 밖에는 없습니다.

비단 지도의 마커뿐만이 아니라
기본적인 DOM 노드만 해도 2만개를 한 번에 추가하는 것은
브라우저 입장에서는 overhead가 큰 작업이기 때문입니다.
하물며 마커 하나에 포함되는 DOM Elelement는 최소 4개 이상이고 각각은 CSS 스타일도 가지고 있기 때문에 추가/삭제/갱신 시, 느려지는건 당연한 현상입니다.

서버단에서 클러스터링을 하여 내려받은 데이터로
화면에 그려지는 마커를 묶음으로 표현하는 방식으로 마커 수를 줄이거나
공간정보 쿼리를 날려서 화면 좌표 영역상에 포함된 마커들만 그리는 방식으로 처리를 해야 어느정도 완화가 가능하리라 봅니다.

1개의 좋아요