다음지도 클러스터러 샘플을 보고 db에 저장된 고객 주소 기반 좌표를 json으로 넘겨서 지도에 찍어봤는데요
샘플로 100건 정도만 가져오면 괜찮은데 데이터를 1만건 10만건으로 늘리니 역시나 로딩이 엄청 오래 걸리네요…
이렇게 많은 데이터를 좀 더 효율적으로 빠르게 로딩할 수 있는 방법이 있을까요
1개의 좋아요
천개 이상만 넘어가도
일단 마커를 생성하고 위치를 갱신하는 자바스크립트의 연산량 자체가 절대적으로 많기 때문에
느릴 수 밖에 없습니다. 그 연산이 끝나기 전까지 사용자는 아무것도 못하는 먹통 브라우저를 마냥 기다릴 수 밖에 없죠.
사실 이런 연산들을 클라이언트에 위임하는 것은 사실 매우 비효율적입니다.
최근 브라우저 환경이 좋아졌다고는 하지만 자바스크립트 연산은 비교적 느린편이며
브라우저는 자바스크립트 연산 말고도 후에 이어지는 레이아웃 갱신, 페인팅 등등의 렌더링 작업도 같이 해야하므로 처리 비용이 크기 때문입니다.
이런 경우에는 서버에서 연산 후, 클러스터링을 한 데이터를 클라이언트에 내려주는 방법이 가장 효율적입니다.
보통 서버에서의 처리속도가 더 빠르며
혹시라도 서버 연산이 지연되더라도 클라이언트에서는 응답을 받기 전까지 UI로 사용자에게 피드백을 줄 수 있으므로 사용성을 크게 해치지 않는 장점이 있기 때문입니다.
답변 감사합니다
서버에서 어느 부분까지 처리가 가능할까요?
서버에서 연산을 한다는게 지도 구현부분까지 서버에서 처리하고 브라우저에서는 단순 html만 표시하도록 하란 말씀인지요?
아닙니다. 묶은 데이터를 내려준다는 의미이죠.
직방의 경우를 보시면
https://www.zigbang.com/search/map
숫자로 묶인 것들이 이미 서버에서 저 위치에 몇개가 있는지 클러스터링을 하고 내려준 데이터입니다.
지도 JS SDK의 클러스터러처럼 하나하나의 데이터를 모두 클라이언트에서 연산해서 묶은게 아니라는 거죠.
저런 경우에는 클러스터링 된 갯수가 화면을 꽉채운다고 해도 대략 100개 내외로 끝납니다. 클라이언트에서는 약 100개 정도의 마커만 그려주면 되는거죠.
또 하나, 이 방법의 핵심은
지도의 중심이나 레벨이 변할 때마다 보이는 지도 영역에 있는 데이터만 서버에서 받아와 그려주도록 하는거죠. 이것은 지도의 idle 이벤트와 관련 있는데 일단 자세한건 생략.
다음 부동산은 다른식으로 풀었네요.
http://realestate.daum.net/maemul/area/3133060/A1A3A4/*/summary
클러스터링은 하지 않지만 일정 레벨 이하일 경우에만 데이터를 받아와 그립니다.
넓은 지역을 보게 될 경우 (레벨이 높을 경우) 데이터를 아예 호출하지 않습니다.
이건 아주 넓은 영역의 데이터를 볼 필요가 없을 경우에 실용적인 방법이겠네요.
클러스터링이 따로 필요 없으니까 심플하게 구현 가능하니까요.
2개의 좋아요
자세한 답변 감사드립니다^^
덕분에 또 하나 배우게 되고 큰 도움이 될거같네요
즐거운 저녁시간되세요~~
1개의 좋아요
안녕하세요.
답글을 보다가 궁금한게 있어서 문의드립니다.
서버에서 저 위치에 몇개가 있는지 클러스터링을 한다고 말씀하셨는데,
다른말로 하면 클러스터링을 할 좌표를 서버에서 직접 계산을 해서 데이타를 내려준다는 말씀이신가요?
클라이언트에서는 좌표만 넣으면 자동으로 클러스터링을 해서 보여주는데, 서버에서 할려면 직접 구현을 해야된다는 거죠?
네 정확하게 이해하셨습니다.
클라이언트의 부담을 서버에서 대신 하는 것이죠.