Leaflet 클러스터를 빠르고 동적으로 렌더링 - 3가지 방법을 비교해 봅시다.
목차
* Maps in front-end development
* Leaflet clusters in action
* Solution to Leaflet.markercluster performance issues
* Leaflet clusters methods comparison
프런트 엔드 개발의 지도
At some point in the career of every front-end developer, there will come a time when they will face the task of map implementation. There are many uses of maps in applications.
Today I will focus on maps that contain a large number of points with specific coordinates. They can be, for example, delivery points, restaurants, shops, etc.
Leaflet is a standard solution that developers often use due to its open-source nature. Today we will talk about it.
Let’s imagine now that our task is to add specific points to the map, but we do not add it only once after launching the map, but we send a request for points each time you move around the map (moving or changing the zoom level). Sounds familiar?
작동 중인 전단지 클러스터
If so, you’ve probably come across the recommended Leaflet plugin, Leaflet.markercluster. In the documentation, we can find examples where 10,000 or even 50,000 points are implemented! Furthermore, thanks to chunkedLoading, we can display many points on the map in a relatively user-friendly way.Below you will find an example of Leaflet clusters from the official Github page of the project:
https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html
좋습니다. 플러그인은 중요한 문제를 처리할 수 있으므로 포인트를 동적으로 추가합니다. 맞습니까? 그렇게 빠르지 않아! 네, Leaflet.markercluster는 꽤 잘하고 있고 이것도 제가 최근 프로젝트에서 소개한 솔루션인데, 이 경우 성공의 열쇠는 지식입니다.
이제 다음 상황을 상상해 보십시오. 처음에 지도에 350개의 지점을 추가합니다. 그런 다음 사용자가 지도를 이동합니다. 새 지도 영역이 있으므로 새 포인트에 대한 또 다른 요청을 보내고 지도에서 다시 350개의 포인트를 생성합니다. 간단하게 들리지만 그렇지 않습니다. 아시다시피 이 작업은 시간이 오래 걸립니다. 수십 밀리초도 아니고 수백 밀리초도 아니다. 2~3초가 걸리며 때로는 그 이상이 소요됩니다!
느린 인터넷 연결로 달성할 수 있는 수치는 생각하고 싶지도 않습니다. 지도를 이동하거나 확대/축소를 변경할 때마다 발생합니다! 지도와 관련된 논리가 많을수록(예: 검색 엔진, 사용자 지정 마커 아이콘 등 추가) 이러한 결과는 더 우울해질 수 있습니다.
이미 있는 포인트를 기억하고 지금까지 지도에 없는 포인트만 추가할 수 있다면 왜 매번 350포인트를 추가해야 할까요? 또한 지도의 가시 영역에 없는 마커를 삭제할 수 있습니다. 멋지네요 :) 그러나 Leaflet.markercluster의 경우 이러한 유형의 작업은 자살 행위가 될 수 있습니다!
Leaflet.markercluster 성능 문제에 대한 솔루션
Our team searched the entire internet for answers, trying to handle the optimization of our map. We had many custom solutions there (like a search engine and a lot of custom logic), but they were not the source of the problem as it turned out. Finally, one day I came across a fascinating note by danzel, who explained the situation in detail.
The original post you can find here:https://github.com/Leaflet/Leaflet.markercluster/issues/59#issuecomment-9320628
마치 성배를 찾은 것 같았습니다!
아마 알아차리셨겠지만 지도에서 포인트를 동적으로 변경할 때 가장 빠른 해결책은 모든 포인트를 제거하고 다시 적용하는 것입니다! 이미 지도에 있는 사람들도! 선택이 없습니다. 청소하고 삽입하십시오. 왜요?
전단지 클러스터 방법 비교
All thanks to the efficiency of specific Leaflet.markercluster methods. You can find a detailed comparison of them below. I installed 10000 points for the tests and set them to change after moving the map, and I did sandboxes for three different cases. I didn’t add additional logic to remove clusters out of bounds. I keep it simple in these examples and compare only add/remove methods.
You can see the results in ms in the console:
addLayer와 결합된 removeLayer
SANDBOX LINK
결과:
addLayer와 결합된 removeLayers
SANDBOX LINK
결과:
addLayers와 결합된 clearLayers
SANDBOX LINK
결과:
보시다시피 clearLayers와 addLayers를 결합하는 것이 가장 빠른 두 가지 방법이며 프로젝트에서 이 방법을 사용하는 것이 좋습니다!
결과는 매우 흥미롭고 보시다시피 가장 확실한 솔루션이 항상 최선은 아닙니다. 지도에 마커를 추가하고 제거하는 방식을 변경하여 성능을 10배 이상 향상시켰습니다! Leaflet.markercluster로 Leaflet을 구현할 경우 위의 점수를 염두에 두십시오. 솔루션을 찾는 데 많은 시간을 절약할 수 있습니다.
Reference
이 문제에 관하여(Leaflet 클러스터를 빠르고 동적으로 렌더링 - 3가지 방법을 비교해 봅시다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/agakadela/rendering-leaflet-clusters-fast-and-dynamically-let-s-compare-3-methods-291p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
