Алгоритм или готовое решение для динамической карты на Canvas JS?

Question

[plac]

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

Answer 1

[Антон Шаманов]

получить координаты отображаемого участка карты - х,y левой верхней и правой нижней точки , выбрать из базы все объекты расположенные в данных координатах. для ускорения процесса можно кешировать результат.

Answer 2

[FeNUMe]

Вы уверены что вам нужна именно карта на канвасе? Вариант стандартной тайловой карты(например на основе Leaflet) с наложением динамических данных не подходит? Все же перерисовка канвы довольно затратна по ресурсам и на старых машинах карта будет не плавной, на мобильных устройствах будет выжирать батарею.
Но если сильно хочется, то по "js canvas map" результаты гуглятся.

Answer 3

[xmoonlight]

Что тут сложного то?
1. Грузим центральную область, и вслед за ней - круговой периметр в 3 экрана видимой зоны (тот, что за "кадром" видимой области).
2. По span-у - динамически догружаем тайлы в направлении вектора смещения с постепенным заполнением зоны из линии тайлов (где были и куда сместились) в круг.
3. Каждый тайл/блок - грузим в асинхронной очереди.
4. Приоритет - первым грузим ближайший к видимой зоне по направлению вектора смещения (при span-скролле) и, далее, по периметру конечной точки, и, затем, круговое заполенение от центра.