Как загрузить часть изображения по требованию, как это делает GMap?

Question

У меня большое большое изображение, скажем, 1000 Мп (700 МБ). Как и карта определенной области, я хочу загрузить только определенную часть, если увеличить изображение. Это важно, чтобы сделать приложение эффективным для работы в сети.

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

Срезы сделаны в соответствии с уровнем масштабирования.

Но я не хочу этого делать. Есть ли эффективный и правильный способ сделать это, как это делает любая карта?

Answer 1

Попробуйте layload-image :

Расширение HTMLImageElement для отложенной загрузки. Изображения будут загружены при отображении.

Установить lazyload-образ через npm или bower.

# via npm 
$ npm install lazyload-image

# via bower 
$ bower install lazyload-image

Использование

Load lazyload-image.html in your HTML.

<link rel="import" href="lazyload-image.html">
Modify your <img> elements such as following.

<img is="lazyload-image" src="path/to/your/image.jpg" offset="200" width="100" height="100"

Answer 2

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

Подход:

1. Возьмите свое большое изображение и разбейте на более мелкие [Как вы уже делаете]
2. Упакуйте их в массив так, чтобы сначала использовались изображения по умолчанию для увеличения, а затем для каждого уровня увеличения +/-. Допустим, кадр из 10 изображений составляет вид. Затем вы упаковываете изображения таким образом:
   • Рамка из 10 при увеличении 0
   • Рамка из 10 при увеличении + 10
   • Рамка из 10 при увеличении -10
   • Рамка из 10 при увеличении + 20
   • Рамка из 10 при увеличении -20
3. Используйте библиотеку потоковой передачи объектов, такую ​​как Stream-JSON , чтобы начать отправку изображений с сервера на клиент.
4. На клиенте получите кадры и сохраните их в памяти, чтобы показать, когда пользователь выполняет панорамирование / масштабирование.

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

Всего наилучшего. Надеюсь это поможет. Дайте мне знать, если требуется более детальная реализация.

Answer 3

Некоторые услуги, статьи и рамки:

• https://www.maptiler.com/
• http://blog.davidelner.com/create-map-with-tilemill-and-leaflet/
• http://polymaps.org/docs/

Если вы воспользуетесь Google "slippy map nodejs", вы найдете множество готовых к использованию серверов плиток