将 tiff 上传到 mapbox gl js 或 mapbox.js

Question

我想在地图上添加一个 geotif 图像层，我可以在 mapbox studio 中轻松地做到这一点，有没有办法使用 mapbox gl js 库来做到这一点。我使用以下代码和 mapbox gl js 库添加了 geojson 文件：

      map.addSource("quakes", {
      "type": "geojson",
      "data": "http://localhost:3000/Srikakulam.geojson"
      });

对于 tiff 图像，我找不到任何类似的解决方案。

我有数百张 tiff 图片可以根据天气和日期动态加载。

Answer 1

您可以使用 image source type. Here is an example.

添加 gif、png 和 jpg 图像到 GL JS

Answer 2

如果您不想将 tiff 转换为 gif/png/jpg 并作为图像源类型加载（如@lucas-wojciechowski 所建议的），您不能在 MapBox Studio Classic 中创建矢量切片源吗并将其作为 vector-source.

加载到您的 MB-gl-js 地图中

请注意，与大多数矢量数据格式一样，矢量切片集也可以嵌入栅格数据，但您会失去矢量功能，例如过度缩放、客户端渲染和客户端数据查询。

Answer 3

将像 GeoTIFF 这样的地理参考图像直接添加到地图中是非常罕见的。 GeoTIFF 是一种相对低效的格式，因此图像会非常大，因此需要更长的下载时间和更慢的性能。

更常见的做法是将 GeoTIFF 处理成图块：您可以通过将它们上传到 Mapbox，或使用 TileMill、gdal2tiles 或 MapTiler 等工具在本地生成图块，然后将这些图块上传到服务器来实现。生成图块后，您可以将它们作为图块层包含在 Mapbox GL JS、Mapbox.js 或任何其他客户端中。

将 tiff 上传到 mapbox gl js 或 mapbox.js

Upload tiff to mapbox gl js or mapbox.js

mapbox

mapbox-gl-js