mapboxgl对地图服务坐标系的要求仅仅是EPSG:3857,也就是web墨卡托投影,如果你的地图服务是此之外的坐标系,如cgcs2000(国家2000、4490)的坐标系,则需要自己修改源码进行扩展,github上有大佬基于mapboxv2.3.0版本提供了加载cgcs2000坐标系的源码,但是版本太旧,很多mapbox功能不能使用。因此经过对mapbox源码的深入研究,在mapbox-glv2.15.0版本上修改了一版可以支持cgcs2000坐标系api(栅格瓦片、矢量瓦片、动态地图):
*注:
①此版本已经去除了验证mapbox token
②2000坐标系的projection:'globe'模式比较复杂,还在研究当中...*
加载国家天地图影像:
var h = parseInt(Math.random() * 7)
let vecUrl = 'https://t' + h + '.tianditu.gov.cn/img_c/wmts?'
let cvaUrl = 'https://t' + h + '.tianditu.gov.cn/cia_c/wmts?'
let sources = {
tdtVec: {
type: 'raster',
tiles: [
vecUrl +
'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
'&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' +
token
],
tileSize: 256
},
tdtCva: {
type: 'raster',
tiles: [
cvaUrl +
'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
'&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' +
token
],
tileSize: 256
}
}
let styles = {
version: 8,
//添加来源
sources: sources,
layers: [
{
id: 'tdtVec',
type: 'raster',
source: 'tdtVec',
minzoom: 1,
maxzoom: 18
},
{
id: 'tdtCva',
type: 'raster',
source: 'tdtCva',
minzoom: 1,
maxzoom: 18
}
]
}
var map = window.map = new mapboxgl.Map({
container: 'map',
center: [110.97, 30.48],
style:styles,
zoom: 5,
// projection:'globe',
});