Альтернатива Plotly и Google Maps для приложения на Angular

Вопрос или проблема

Ответ или решение

Ваша проблема с медленной отрисовкой трасс в Plotly и ограничениями AGM (Angular Google Maps) вполне понятна, и вы находитесь на правильном пути, ищя альтернативные решения для работы с картами в вашем приложении на Angular.

Я рекомендую обратить внимание на библиотеку LeafletJS. Эта библиотека легкая и быстрая, и прекрасно подходит для картографической визуализации в Angular-приложениях.

Основные преимущества LeafletJS:

1. Легкость и производительность: LeafletJS оптимизирован для работы с большим количеством объектов на карте, что делает его отличным выбором для отображения множества стрелок, как в вашем случае.

2. Богатый набор возможностей: В LeafletJS вы можете использовать пользовательские иконки для маркеров, что позволит вам легко заменить стандартные маркеры на стрелки.

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

Как использовать LeafletJS в вашем Angular приложении:

1. Установка Leaflet:
   Вам необходимо установить Leaflet с помощью npm:

   npm install leaflet

2. Импорт и настройка:
   В вашем компоненте, где вы хотите отобразить карту, импортируйте Leaflet:

   import * as L from 'leaflet';

3. Создание карты:
   В методе ngOnInit() создайте экземпляр карты и добавьте слои:

   ngOnInit(): void {
     const map = L.map('mapId').setView([latitude, longitude], zoomLevel);
   
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19
     }).addTo(map);
   }

4. Добавление стрелок:
   Чтобы добавить стрелки, вы можете использовать пользовательские иконки. Вы можете создать стрелки в формате изображения и использовать их как иконки:

   const arrowIcon = L.icon({
     iconUrl: 'path/to/arrow.png',
     iconSize: [25, 25], // размеры иконки
     iconAnchor: [12, 12] // точка привязки
   });
   
   L.marker([latitude, longitude], { icon: arrowIcon }).addTo(map);

5. Скрытие данных:
   В LeafletJS вы можете управлять отображением объектов, не выводя данные в HTML. Все объекты находятся внутри Canvas, а данные могут быть хранены в переменных или служебных объектах, которые не отображаются на сайте.

Заключение

LeafletJS – мощный инструмент для картографической визуализации, который позволяет минимизировать проблемы производительности и визуализировать данные так, как вам нужно, не раскрывая при этом никаких чувствительных данных. Ознакомьтесь с документацией Leaflet для получения дополнительной информации и примеров. Если у вас возникнут дополнительные вопросы или потребуется помощь, не стесняйтесь обращаться!