100 000 objects

need to be displayed




Борис Могила

<EPAM>

vinnytsiajs.org

Презентація

Приклади

20000 VS 180000

Види карт

Растрові карти

Переваги

  • Мінімальне навантаження на процесор користувача
  • Простота розробки софту для відображення

Недоліки

  • Дуже великий обсяг
  • Неможливість динамічної зміни стилів
  • Навантаження на сервер

Векторні карти

Переваги

  • Набагато менший об'єм даних
  • Динамічна зміна відображення елементів

Недоліки

  • Ресурсомісткість і тривалість відтворення

GeoJson

Типи даних

  • Point
  • LineString
  • Polygon
  • MultiPoint
  • MultiLineString
  • MultiPolygon
  • Feature
  • FeatureCollection

{ "type": "Point",
    "coordinates": [30, 10]
}


{ "type": "LineString",
    "coordinates": [
        [30, 10], [10, 30], [40, 40]
    ]
}


{ "type": "Polygon",
    "coordinates": [
        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
    ]
}

						

{ "type": "MultiPoint",
    "coordinates": [
        [10, 40], [40, 30], [20, 20], [30, 10]
    ]
}


{ "type": "MultiLineString",
    "coordinates": [
        [[10, 10], [20, 20], [10, 40]],
        [[40, 40], [30, 30], [40, 20], [30, 10]]
    ]
}

						

{ "type": "MultiPolygon",
    "coordinates": [
        [
            [[40, 40], [20, 45], [45, 30], [40, 40]]
        ],
        [
            [[20, 35], [10, 30], [10, 10], [30, 5]
            [[30, 20], [20, 15], [20, 25]]
        ]
    ]
}

{
	"type": "FeatureCollection",
	"features": [
		{ "type": "Feature",
			"geometry": {...},
			"properties": {"prop0": "value0"}
		},
	]
}

						

Рішення в лоб

Виводимо всі точки
leaflet
mapbox-gl

Недоліки

  • Всі дані тягнуться одночасно
  • Блокування основного потоку (leaflet)
  • Дуже довго

Кластерізація

leaflet
mapbox-gl

Недоліки

  • Всі дані тягнуться одночасно
  • На mapbox все ще довго

за допомогою тайлів

leaflet
mapbox-gl

Недоліки

  • На leaflet незначні затупи
  • Відсутня кластерізація

tippecanoe + tileserver

А як же пошук?

Серверна кластеризація

Створення тайл індекса на льоту

Створення тайла на льоту

Що ми плануємо робити далі?

Цікаві рішення

Створення тайсетів

Кластеризація

Створення власних стилів для карти

Geocoding

Генерація власних векторних тайлів

Робота з геоданими

Контактні дані

site: https://boryamogila.github.io
facebook: BorysMohyla
twitter: BoryaMogila
email: bora.mog@gmail.com

Дякую за увагу