как добавить растровые данные с помощью mapbox gl js?

#html #amazon-web-services #amazon-s3 #mapbox #mapbox-gl-js

#HTML #amazon-веб-сервисы #amazon-s3 #mapbox #mapbox-gl-js

Вопрос:

Я хочу добавить на карту оптимизированный для облака растровый слой Geotiff, данные находятся в корзине AWS s3. Как наложить мои растровые данные на mapbox gl js? Правильно ли извлекать URL-адрес объекта s3? если вы знаете, как это сделать, пожалуйста, ответьте мне..

 map.on('load', function(){
  map.addSource('cog-data', {
    "type": "raster",
    "tiles": ["data url"],
    "tileSize": 256
  });

  map.addLayer({
    "id": "cog-data",
    "type": "raster",
    "source": "cog-data",
    "minzoom": 0,
    "maxzoom": 22,
    'layout': {
      'visibility': 'visible'
    },
  });

1. То, что вы делаете, выглядит правильно. Какова форма ["data url"], бита? Если вы не хотите делиться полным URL-адресом, просто замените его часть, чтобы мы могли видеть, что общая структура выглядит правильно. Что на самом деле происходит не так?

2. Спасибо @SteveBennett. Часть ["data url"] есть ["https://s3-bucket.ap-northeast-2.amazonaws.com/filename.tif"] . Правильно ли это делать таким образом?

Ответ №1:

Чтобы использовать raster источник, исходные данные должны быть выложены плиткой. В этом случае URL-адрес будет выглядеть примерно так .../{z}/{x}/{y}.png .

Поскольку у вас, по-видимому, есть один TIF, который охватывает всю область, вместо этого следует использовать image источник:

   map.addSource('cog-data', {
    "type": "image",
    "url": "...tif",
    "coordinates": [...]

  });

Я не уверен, что это работает, но, надеюсь, это так.

Документация: https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image

1. Спасибо за ваш ответ. Но это не работает. Я изменил тип, URL и координаты. Пример в документации работает хорошо. Если я заменю его URL-адресом s3, ничего не наложится. Это проблема с URL-адресом s3?

2. Насколько я знаю, для растра работают только JPG и GIF. Стив обычно при деньгах, поэтому я все равно доверяю его ответу.

3. Я поместил образец данных (radar.gif ) документа в корзину s3. Это тоже не работает

4. "url":"https://test-bucket.s3.ap-northeaset-2.amazonaws.com/radar.gif" Это правильный формат URL?

5. Да … если это действительно общедоступный URL. Но, как предположил Дэвид, я не уверен, какие форматы изображений поддерживаются. Обычно используются PNG и JPEG. Похоже, это не задокументировано.