console
mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
const styleObj = {
version: 8,
name: "chaotu",
sprite: "mapbox://sprites/mapbox/streets-v8",
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
sources: {
'raster-tiles': {
type: 'raster',
tiles: [
// 从官网demo上找到的地址,可以正常加载
'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
// 根据服务地址拼接的地址,无法加载
// 'https://2.142.195.227:30867/iserver/services/map-World/rest/maps/World_Image/zxyTileImage.png?z={z}&x={x}&y={y}'
],
tileSize: 256
}
},
layers: [
{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}
]
}
const map = new mapboxgl.Map({
container: 'map',
style: styleObj,
center: [116.39123296750768, 39.907180309385694],
zoom: 10
});
<div id='map'></div>
html,body {
padding: 0;
margin: 0;
height: 100%;
}
#map {
width: 100%;
height: 100%;
}