mapbox-gl开发教程（三）：在线影像底图加载
--mapbox-gl是一个开源、基于webgl技术的前端地图类库--
应用系统的地图开发中，首先需要一张底图，才能够在上边进行各类应用的开发，在本
身不是专业地图服务提供商时，使用现有的在线影像底图，不失为一种省时、省力的方式。最
常见的是 国家地理信息中心 提供的天地图在线数据，保证数据的准确性和实时性。
天地图的在线切片数据为例，mapbox-gl如何进行加载：
一种是修改的样式（style）配置：
let map = new mapboxgl.Map(
{container: 'map',
style:{ "version": 8,
"sources": {
//天地图底图分成底图和注记两部分，需设置两个数据源
"tiandituimg": {
"type": "raster",
"tiles": ["https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=<天地图token>"],
"tileSize": 256
},
"tiandituano": {
"type": "raster",
"tiles": ["https://t0.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=<天地图token>"],
"tileSize": 256
} },
"layers": [{
//根据数据源，添加两个图层
"id": "tiandituimg",
"type": "raster",
"source": "tiandituimg",
"minzoom": 0,
"maxzoom": 18
}, {
"id": "tiandituano",
"type": "raster",
"source": "tiandituano",
"minzoom": 0,
"maxzoom": 18 } ]}
});
另一种是通过js代码进行加载，需要在地图的load事件中进行加载：
map.on("load", () => {
//添加数据源
map.addSource('tiandituimg',
{
"type": "raster",
"tiles": ["https://t0.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=<天地图token>"],
"tileSize": 256
});
//添加图层，对应source名称
map.addLayer({
"id": "tiandituimg",
"type": "raster",
"source": "tiandituimg",
"minzoom": 0,
"maxzoom": 18
});});
有了基本的在线影像底图做底，我们就能在实际的应用中进行开发了。
附：几种常见影像底图地址//蓝色底图效果
https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/WMTS/tile/1.0.0/ChinaOnlineCommunity/default/default028mm/{z}/{y}/{x}.png
//高德在线底图
http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}
//openstreetmap在线底图
https://tile.openstreetmap.org/{z}/{x}/{y}.png
关注公众号查看更多：
