Эффективно визуализируйте большое количество маркеров с помощью карт JavaScript

В компоненте карты всегда будет требование, чтобы пользователь мог просматривать больницы, отели, рестораны, продуктовые магазины и другие места. При просмотре их на карте мира или карте конкретной страны может быть много мест и маркеров, разбросанных по карте, что делает карту загроможденной.

Элемент управления JavaScript Maps идеально подходит для рендеринга карт из данных GeoJSON или других поставщиков карт, таких как OpenStreetMap и Bing Maps. Его богатый набор функций включает маркеры, метки, пузыри, линии навигации, легенды, всплывающие подсказки, масштабирование, панорамирование, детализацию и многое другое.

Давайте обсудим некоторые эффективные способы обработки и демонстрации огромного количества маркеров с помощью элемента управления Syncfusion JavaScript Maps, чтобы избежать такой перегрузки.

Примечание. Чтобы заполнить данные на карте, обратитесь к документации.

Приблизьтесь к определенному месту рядом со всей картой

Функция масштабирования в элементе управления JavaScript Maps позволяет увеличивать масштаб карт для отображения подробной информации. Во время первоначального рендеринга карты вы можете увеличить масштаб либо до определенной страны на карте мира, либо до определенного региона на карте страны, чтобы рассмотреть их поближе.

Для этого сначала установите коэффициент масштабирования, который увеличивает масштаб карты. Затем назначьте центральное положение, чтобы выровнять точную широту и долготу карты с представлением пользователя. Короче говоря, мы устанавливаем пользовательскую позицию для карты.

Обратитесь к примеру на StackBlitz по приближению к определенному месту при начальной загрузке карты.

Вы также можете в любой момент приблизиться к определенной позиции или координате, используя встроенные методы zoomByPosition и zoomToCoordinates соответственно. Метод zoomByPosition использует широту и долготу центрального положения, а также коэффициент масштабирования для настройки положения карты. Метод zoomToCoordinates принимает минимальную и максимальную широту и долготу, т. е. верхнюю, левую, нижнюю и правую части карты, которые должны отображаться в окне просмотра.

Увеличить по положению

Обратитесь к примеру на StackBlitz по масштабированию карты по положению во время выполнения.

Приблизить к координатам

Обратитесь к примеру на StackBlitz для масштабирования до координат на карте во время выполнения.

Кластер маркеров

Мы увидели, как быть разборчивым в том, какие местоположения отображаются в окне просмотра. С другой стороны, бывают случаи, когда зрители хотят увидеть всю карту мира или карту всей страны сразу, и здесь пригодится кластер маркеров.

Когда есть много перекрывающихся маркеров, мы можем сгруппировать их, используя функцию кластер маркеров в JavaScript Maps. Число над кластером представляет собой количество перекрывающихся маркеров внутри него.

Когда мы увеличиваем масштаб любого из местоположений кластера, число в кластере уменьшается, и на карте появляются отдельные маркеры. Когда мы уменьшаем масштаб любого из местоположений кластера, количество маркеров в кластере увеличивается, и отдельные маркеры добавляются в кластер.

Вы также можете развернуть кластер маркеров, щелкнув его, что упорядочивает и отображает отдельные маркеры вокруг кластера.

Обратитесь к примеру кластеризации маркеров на StackBlitz.

Примечание. Дополнительные сведения см. в разделе Маркеры в документации по картам JavaScript.

Заключение

Спасибо за прочтение! В этом блоге мы увидели, как эффективно обрабатывать и визуализировать огромное количество маркеров на карте с помощью элемента управления Syncfusion JavaScript Maps. Благодаря этому вы можете элегантно визуализировать места, которые хотите найти, на карте без каких-либо заторов. Карты JavaScript также поддерживают другие функции визуализации данных, такие как слои и легенды. Попробуйте их и оставьте свой отзыв в разделе комментариев ниже!

Вы также можете пользоваться этими функциями в наших Blazor, ASP.NET (Core, MVC, Web Forms), Angular, React, Vue, Flutter, UWP, Элементы управления картами WinForms, Xamarin, .NET MAUI и WPF.

Текущим клиентам новая версия Essential Studio доступна для скачивания на странице Лицензии и загрузки. Если вы еще не являетесь клиентом Syncfusion, вы можете попробовать нашу 30-дневную бесплатную пробную версию, чтобы ознакомиться с нашими новейшими функциями.

По вопросам вы можете обращаться к нам через наш форум поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 1 сентября 2022 г.