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

【问题标题】：how to add raster data using mapbox gl js?如何使用 mapbox gl js 添加栅格数据？
【发布时间】：2020-09-21 09:07:11
【问题描述】：

我想在地图上添加云优化 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'
    },
  });

【问题讨论】：

你在做什么看起来是正确的。 ["data url"], 位的形式是什么？如果您不想共享完整的 URL，只需替换其中的一部分，这样我们就可以看到整体结构看起来正确。到底出了什么问题？
谢谢@SteveBennett。 ["data url"] 的一部分是["https://s3-bucket.ap-northeast-2.amazonaws.com/filename.tif"]。这样做是否正确？

标签： html amazon-web-services amazon-s3 mapbox mapbox-gl-js

【解决方案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

【讨论】：

感谢您的回答。但它不起作用。我修改了类型、网址和坐标。文档中的示例运行良好。如果我用 s3 的 url 替换它，则不会覆盖任何内容。 s3 url有这个问题吗？
据我所知，只有 JPG 和 GIF 适用于光栅。史蒂夫通常很赚钱，所以我仍然相信他的回答。
我将文档的样本数据（radar.gif）放入 s3 存储桶中。它也不起作用
"url":"https://test-bucket.s3.ap-northeaset-2.amazonaws.com/radar.gif" 这是正确的网址格式吗？
是的...如果这实际上是一个可公开访问的 URL。但正如大卫建议的那样，我不确定支持哪些图像格式。通常使用 PNG 和 JPEG。似乎没有记录。