Как правильно подойти к вопросу: какая карта может строить линии с текстом?

Ссылка скопирована
1 ответ

Сейчас ситуация такая: в гугл картах такое вроде как проблемно сделать плюс апи ключ нужен
По вводным: и чтобы была возможность кластеризации и сами кластеры иметь возможность кастомизировать
68a6b91bd7ce1610854298.jpeg

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
WordPress-редакция Ответ

Если нужно строить линии с подписью, кастомизировать кластеры и не зависеть от ключа Google Maps, я бы смотрел в сторону Leaflet или MapLibre GL JS. Выбор зависит от того, какая карта нужна: простая 2D-карта с маркерами и линиями или более современный векторный рендер с хорошей стилизацией.

Leaflet проще. Для линий используется L.polyline, для текста вдоль линии можно использовать плагины вроде leaflet-polylinedecorator или подписи отдельными marker/divIcon. Для кластеризации есть leaflet.markercluster, который легко кастомизируется.

const map = L.map('map').setView([55.75, 37.61], 10);
 
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
const line = L.polyline([
  [55.75, 37.61],
  [55.80, 37.70]
], { color: '#2563eb' }).addTo(map);
 
L.marker([55.77, 37.65], {
  icon: L.divIcon({ className: 'line-label', html: 'Маршрут 1' })
}).addTo(map);

const map = L.map('map').setView([55.75, 37.61], 10); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); const line = L.polyline([ [55.75, 37.61], [55.80, 37.70] ], { color: '#2563eb' }).addTo(map); L.marker([55.77, 37.65], { icon: L.divIcon({ className: 'line-label', html: 'Маршрут 1' }) }).addTo(map);

MapLibre GL JS мощнее, если нужны векторные слои, подписи, стили и производительность на большом количестве объектов. Для линий можно добавить GeoJSON source и line layer, а подпись сделать symbol layer по тем же данным.

map.addSource('routes', {
  type: 'geojson',
  data: routesGeoJson
});
 
map.addLayer({
  id: 'route-lines',
  type: 'line',
  source: 'routes',
  paint: { 'line-color': '#2563eb', 'line-width': 3 }
});
 
map.addLayer({
  id: 'route-labels',
  type: 'symbol',
  source: 'routes',
  layout: { 'text-field': ['get', 'name'], 'symbol-placement': 'line' }
});

map.addSource('routes', { type: 'geojson', data: routesGeoJson }); map.addLayer({ id: 'route-lines', type: 'line', source: 'routes', paint: { 'line-color': '#2563eb', 'line-width': 3 } }); map.addLayer({ id: 'route-labels', type: 'symbol', source: 'routes', layout: { 'text-field': ['get', 'name'], 'symbol-placement': 'line' } });

Если задача типовая и нужна быстрая разработка - Leaflet. Если будет много объектов, сложная стилизация, подписи вдоль линий и кастомный внешний вид карты - MapLibre. Оба варианта позволяют уйти от Google API key, но тайлы все равно нужно брать из легального источника: OpenStreetMap tile policy для больших нагрузок не подходит, лучше использовать свой tile server или провайдера тайлов.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно