MapBox GL JS 성능 차이의 원인

Question

이 질문은 MapBox GL JS의 내부를 이해하는 사람을위한 것입니다.

저는 MapBox GL JS를 사용하여 각 다각형의 "소유자"에 따라 색상이 지정된 40,000 개의 다각형까지의 지리적지도를 렌더링합니다. 일반적으로 소유자 당 많은 다각형이 있고 각 다각형의 "소유자"는 시간이 지나면 바뀔 수 있습니다. 소유자 수는 1 명에서 1,000 명까지 다양합니다. 나는 성능에 문제가있다. (접근 방식에 따라 다르다.) 그래서 나는 몇 가지 다른 전략을 시도했다.

1. "채움 색상"에 데이터 기반 스타일링을 사용합니다. 여기에는 단일 소스와 단일 레이어가 있습니다. 나는 폴리곤 ID와 "소유자"ID를 데이터 중심 스타일의 범주로 시도했다.
2. 필터링 된 레이어를 사용합니다. 여기에는 각 "소유자"에 대해 단일 소스 및 별도 레이어가 있습니다. 다시 말하지만, 폴리곤 ID와 "소유자"ID를 필터링 기준으로 사용하려고 시도했습니다.
3. 각 "소유자"에 대해 별도의 소스 및 레이어 사용.

옵션 3이 가장 좋은 드로잉 속도를 갖습니다. 확대/축소 및 팬하면 레이어가 매우 빠르게 렌더링됩니다. 하지만 레이어의 소유자를 변경하고 setData가 메모리를 누출 할 때마다 setData를 호출해야만 결국 페이지가 충돌하게됩니다. 2607이라는이 이슈는 실행 불가능한 것으로 폐쇄되었으므로 이에 대한 해결책은 기대하지 않습니다.

옵션 첫 번째와 두 번째는 처음 확대/축소해도 괜찮지 만 확대 할 때 타일을 다시 그릴 때 속도가 매우 느립니다. 나는 렌더링이 20-30 초 후에 잡을 때까지 들쭉날쭉하고 낮은 디테일의 타일을 바라 보았다. "polygon"id 대신 "owner"id를 사용하면 "owner"가 변경되면 메모리 누수가 발생할 수 있으므로 setData를 호출해야합니다. 폴리곤 ID를 사용하는 경우 "소유자"가 변경되면 레이어 필터 또는 채움 색상 범주를 업데이트하면됩니다. 그러나 "polygon"ID를 사용하면 성능 차이가 눈에 띄지 않으므로 괜찮습니다.

제 질문은 왜 확대했을 때 렌더링 속도가 훨씬 빨랐는지입니다. 그것은 도면에 지정된 작업자 수와 관련이 있습니까? 옵션 1과 2에는 단일 소스가 있으므로 도면에는 단일 작업자 만 사용된다는 의미입니까? 옵션 3에는 각 "소유자"에 대한 별도의 소스가있는 반면, 여러 명의 직원이 도면을 작성합니까?

Answer 1

본질적으로 세부 수준 (LOD) 문제를 해결하기 위해 다양한 기술이 필요하다고 생각합니다. 국가의 다양한 지역을 나타 내기 위해 국가의 폴리 지역을 그리는 것과 비슷한 작업을 수행했으며보기에 맞게 데이터의 크기를 조정해야합니다.

먼저 권장할만한 점은 지역에 대한 다양한 수준의 세부 정보를 만드는 것입니다. 첫 번째 청소는 인접한 점과 직선의 몇도 내에서 정렬 된 (지리적으로 말하면) Region 정점을 제거하여 자동으로 수행 할 수 있습니다. 이것을 직선 상에있는 것처럼 영역 경계에 세부 사항을 추가하지 않는 많은 작은 점들을 제거하는 것으로 생각하십시오. 자동화 된 (심지어 사전 저장되어있는) 단계가 될 수 있으므로 줌 레벨에 따라 다양한 세부 수준을 만들 수 있습니다.

두 번째 권장 사항은 뷰 공간 컬링입니다. 즉, 영역이 뷰 포트에 없으면 렌더링하지 마십시오! 이 vertex-perfect를 시도하면 이전과 같은 CPU 문제로 끝날 것이므로 Region bounding-box를 생성 할 것을 권장합니다 (축 정렬보기 만 사용하는 경우 가장 쉬운 방법으로 제안 됨) 해결책).

축이 정렬되지 않은 영역이 필요한 경우 경계 원 (영역의 중심으로부터 가장 멀리 떨어져있는 경계 꼭지점을 기준으로 반경을 사용)을 작성하기 만하면됩니다.

다양한 어려움이 장면 복잡성 문제의 파생물이라고 제안합니다. 이를 해결하면 훨씬 효율적인 시스템으로 작업 할 수 있습니다.

행운을 빈다.

Answer 2

나는 범주 별 데이터 기반 스타일을 사용하여 data-join을 수행하는 것이 좋습니다. 이를 통해 지오메트리에서 데이터 속성 업데이트를 분리 할 수 ​​있습니다. 브라우저에서 JSON 데이터를 벡터 타일 지오메트리에 조인하는 방법의 예는 https://www.mapbox.com/mapbox-gl-js/example/data-join/을 확인하십시오. 이것은 100,000 개 이상의 기능으로 확장되어야합니다.