mapboxgl加载google地图、高德地图的在线切片地图

mapboxgl加载google地图、高德地图的在线切片地图

1、加载google地图，只需将将style换为如下内容，并根据需要更换地图类型（注释部分）即可。

style: {
  "version": 8,
  "sources": {
    "raster-tiles": {
      "type": "raster",
      'tiles': [
        // mt(0—3) Google地图使用了四个服务地址
        // lyrs=
        // m：路线图
        // t：地形图
        // p：带标签的地形图
        // s：卫星图
        // y：带标签的卫星图
        // h：标签层（路名、地名等）
        "https://mt1.google.cn/maps/vt?lyrs=s%40721&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}"
      ],
      "tileSize": 256
    }
  },
  "layers": [{
    "id": "simple-tiles",
    "type": "raster",
    "source": "raster-tiles",
    "minzoom": 0,
    // "maxzoom": 18
  }]
},

得到效果

 2、加载高德地图，只需将将style换为如下内容，并根据需要更换地图类型（注释部分）即可。

style: {
  "version": 8,
  "sources": {
    "raster-tiles": {
      "type": "raster",
      'tiles': [
        // wprd0{1-4} 
        // scl=1&style=7 为矢量图（含路网和注记）
        // scl=2&style=7 为矢量图（含路网但不含注记）
        // scl=1&style=6 为影像底图（不含路网，不含注记）
        // scl=2&style=6 为影像底图（不含路网、不含注记）
        // scl=1&style=8 为影像路图（含路网，含注记）
        // scl=2&style=8 为影像路网（含路网，不含注记）
        "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6"
      ],
      "tileSize": 256
    }
  },
  "layers": [{
    "id": "simple-tiles",
    "type": "raster",
    "source": "raster-tiles",
    "minzoom": 0,
    // "maxzoom": 18
  }]
},

得到效果：