博客

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',  
});