我正在尝试在 Mapbox web 地图中显示 mbtile，并且我已使用
ogr2ogr -f MVT -dsco FORMAT=MBTILES -dsco MAXZOOM=10 target.mbtiles data.geojsonCould not load image because of The source image could not be decoded.. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.
at ajax.js:301:18
我将 mbtiles 文件加载到 QGIS 中，它按预期显示。这是我一直在使用的 HTML 和 JavaScript 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MBTiles Map</title>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Create a container for the map -->
<div id="map"></div>
<script>
mapboxgl.accessToken = 'TOKEN';
// Create a new Mapbox map
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 10 // Set the initial zoom level
});
map.on('load', function () {
map.addSource('local-mbtiles', {
type: 'raster',
tiles: ['https://s3-bucket-url/path/to/mbtiles-file.mbtiles'],
tileSize: 256
});
map.addLayer({
id: 'local-mbtiles-layer',
type: 'raster',
source: 'local-mbtiles'
});
});
</script>
</body>
Could someone please guide me on how to correctly display my vector tiles in a Mapbox web map?
那肯定不行。
矢量切片的要点是获取浏览器需要的单个切片，而不是整个 MBTiles 文件。
您可以单独上传每个矢量切片（并配置 S3 存储桶以支持对它们的公共访问），也可以使用不同的东西，例如 PMTiles，它确实支持您想要执行的操作。