时间戳

首页 > 解决方案 > 为 Mapbox 创建第 3 方光栅图块

mapbox - 为 Mapbox 创建第 3 方光栅图块

问题描述

我正在尝试使用 Mapbox 将高分辨率无人机图像集成到我们的网站上。当我在 Mapbox Studio 中创建图块时效果很好，但它有大小限制并且只接受 8 位图像。我尝试使用 gdal2tiles 创建自己的图块，但它们不会加载到地图上。我不确定这是兼容性问题、我的 gdal 平铺设置还是代码本身的问题。任何帮助将不胜感激！

我曾尝试修改 Mapbox 为 3rd 方光栅图块提供的代码，但没有奏效。

gdal2tiles

gdal2tiles.generate_tiles(infile, outdir, np_processes=4, zoom='0-22', srs='EPSG:3857')

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibHVrYXNmcmFzZXIiLCJhIjoiY2p5ZnN3Nm12MWZrdDNscW85aHAwbW52eiJ9.fbdPTtQHTUWaLTex9dCO0g';
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["./{z}/{x}/{y}.png"],
"tileSize": 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},

我尝试在与磁贴相同的文件夹中本地运行此 html，并将两者都上传到我们的 AWS 服务器，但都不起作用。在这两种情况下，背景地图都会加载，但瓦片不会。

标签： mapboxgdalmapbox-gl-js

解决方案

gdal2tiles 输出tms图块而不是xyz图块，因此请尝试在源上设置一个方案，如下所示：

new mapboxgl.Map({
  container: 'map', // container id
  style: {
    "version": 8,
    "sources": {
      "raster-tiles": {
        "type": "raster",
        "tiles": ["./{z}/{x}/{y}.png"],
         "tileSize": 256,
         "scheme": "tms"
       }
     },
     "layers": [{
        "id": "simple-tiles",
        "type": "raster",
        "source": "raster-tiles",
        "minzoom": 0,
        "maxzoom": 22
     }]
   }
});

推荐阅读