폴리선 사라짐 현상

지도/로컬 API
#1

폴리선을 2만개 정도 지도에 띄우려하는데, 속도가 느려서 다음의 방법을 이용하였습니다.
https://devtalk.kakao.com/t/js-polyline/42946
위의 방법을 사용하여, 2만개를 이중 배열로 전달하니 속도가 개선되었습니다. (여기서 그려지는 폴리선을 폴리선 그룹이라 칭하겠습니다.)

하지만 개별 클릭 이벤트를 줄 수 없어서 zoom level이 어느정도 작아지면 화면에 보여질 폴리선들만 각각(이중 배열 x) 띄워주는 방법을 선택했습니다. (폴리선 그룹의 경로와 정확히 일치)

그랬더니 기존의 그려져있던 폴리선 그룹이 사라지는 현상이 발생하였습니다.

  • 실수로 폴리선 그룹을 지우는 함수가 불리는 경우는 아니였습니다.
  • 화면에 띄워지는 개별 폴리선들의 수가 적을 때는 폴리선 그룹이 사라지지 않습니다.
  • 화면에서 사라진 폴리선 그룹은 개별 폴리선들을 안보이게 설정한 후 지도를 드래그 하다보면 불규칙하게 다시 등장하였습니다. (폴리선을 안보이게 하는 방법으로는 다음의 3가지를 이용하였습니다. 1.setMap(null) 2.strokeOpacity->0 3.strokeWeight->0)

위의 현상에 대한 해결책이나, 좋은 방법이 없을까요? ;(

#2

보이지 않는 상황에서,

  1. 폴리라인 그룹에 해당하는 SVG 엘리먼트에 하위 엘리먼트들 및 그 속성값들이 제대로 들어간 상태로 존재한다면 그 어떤 무언가가 한계 이상으로 사용되어서 브라우저가 그리지 못한 것일 수 있습니다.

  2. 폴리라인 그룹에 해당하는 SVG가 HTML상에 없거나 그 path의 속성값(좌표값, path string)이 제대로 들어있지 않은 상태라면 APi의 문제일 가능성이 높습니다.

흐음… 아무래도 2만개 이상이라는 라인의 갯수가 문제가 되는 것으로 판단되는데요…
이미 화면에 보여질 폴리라인을 추출하셨다고 하셨으니
이미 공간 분할로 클리핑을 하셨을 거라 예상됩니다.

아무래도 브라우저가 힘들어 하는 것 같으니…
폴리라인 그룹도 그냥 그려넣기 보다는 클리핑을 하셔서 것을 추천 드립니다.