我在Google地图上放置了一些光栅化纸质地图。http://map.tracks4africa.de/?map=nam效果很好。
现在，我尝试在mapbox gl地图上执行相同的操作。第一步，看起来不错。但是当我放大并移动该位置时，会得到一些幻影图块。看起来像这样：
如何告诉mapboxgl停止在坐标外绘制图块？
我为此在https://map.tracks4africa.de/sample.html上制作了示例页面打开页面并放大一点，然后移动位置。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tracks4Africa Papierkarten</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 5,
center: [16, -22]
});
map.on('load', function () {
map.addSource('namibia-nord', {
'type': 'raster',
'tiles': ['https://map.tracks4africa.de/namibia/north/{z}/{x}/{y}.png'],
'tileSize': 256,
'coordinates': [
[-15.13369912, 22.26502144], // Top, Right
[-23.67632569, 10.82780482], // Bootom, Left
]
});
map.addLayer({
'id': 'Namibia Nord',
'type': 'raster',
'source': 'namibia-nord',
'minzoom': 4,
'maxzoom': 10
});
});
</script>
</body>
</html>
感谢您的帮助
Chrigu
我刚刚找到了答案。我必须使用bounds而不是coordinates。
map.addSource('namibia-nord', {
'type': 'raster',
'tiles': [
'https://map.tracks4africa.de/namibia/north/{z}/{x}/{y}.png'
],
'tileSize': 256,
'bounds': [10.82780482, -23.67632569, 22.26502144, -15.13369912]
});