如何使用 mapbox gl js 添加栅格数据？

Question

我想在地图上添加一个云优化的 Geotiff 栅格图层，数据在 AWS s3 存储桶中。如何在 mapbox gl js 上叠加我的栅格数据？获取s3的对象url是否正确？如果你知道怎么做请回答我..

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'
    },
  });

Answer 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

如何使用 mapbox gl js 添加栅格数据？

how to add raster data using mapbox gl js?

html

amazon-s3

amazon-web-services

mapbox

mapbox-gl-js