2025Mapbox零基础入门教程（3）加载第三方底图

WebGIS开发

已于 2025-04-27 09:21:14 修改

阅读量242

点赞数 2

CC 4.0 BY-SA版权

分类专栏： GIS开发文章标签： webgis mapbox

于 2025-04-27 09:20:16 首次发布

本文链接：https://blog.csdn.net/2301_78220461/article/details/147547696

GIS开发专栏收录该内容

101 篇文章

订阅专栏

本章主要介绍，在mapbox中加载第三方底图如高德地图，需自定义style，包括数据源与图层配置。

主要流程未创建地图实例后，通过定义source加载第三方瓦片服务，如高德地图。将source添加到图层并配置属性，如type、size及resource名称。

最后设置projection为globe及缩放级别、中心点。

第三方底图加载

1.可以在Mapbox中加载第三方底图，如高德地图。

const map = new mapboxgl.Map({
    container: "map",
    style: {
        version: 8,
        sources: {
            "raster-tiles": {
                type: "raster",
                tiles: [
                    "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
                ],
                tileSize: 256,
            },
        },
        layers: [
            {
                id: "my-tiles",
                type: "raster",
                source: "raster-tiles",
            },
        ],
    },
    projection: "globe",
    zoom: 6,
    center: [114.27, 30.59],
});