mapbox-gl开发教程（三）：在线影像底图加载-CFANZ编程社区

--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",
天地图token>"],
      "tileSize": 256
    }
  }, 
  "layers": [{
      //根据数据源，添加两个图层
tiandituimg",
      "type": "raster",
tiandituimg",
      "minzoom": 0,
      "maxzoom": 18
    },
    {
tiandituano",
      "type": "raster",
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

mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。

mapbox-gl官网地址：https://docs.mapbox.com/mapbox-gl-js/guides/