mapbox制作自定义地图并发布在线瓦片地址

最新推荐文章于 2025-05-24 08:37:38 发布

qq_28918357

最新推荐文章于 2025-05-24 08:37:38 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue js htmlcss布局

本文链接：https://blog.csdn.net/qq_28918357/article/details/108538294

js 同时被 3 个专栏收录

24 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

htmlcss布局

4 篇文章

订阅专栏

本文详细介绍如何在Mapbox Studio中创建并使用自定义地图样式，包括注册账号、设计地图风格、获取样式ID及访问令牌，以及在OpenLayers中集成自定义地图的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 注册账号进入 studio 页面

在这里插入图片描述

2. 新增 style

在这里插入图片描述

3. 设计自己的自定义地图样式与百度高德类似自己摸索注意点击右上角发布

在这里插入图片描述

4. 回到 studio 页面点击制作好的想要使用的地图样式的分享按钮

在这里插入图片描述

5. 从分享页面获取 stypeId access_token 等拼接成下面的url地址形式

https://api.mapbox.com/styles/v1/YOUR_USERNAME/YOUR_STYLE_ID/tiles/256/{z}/{x}/{y}?access_token=YOUR_ACCESS_TOKEN

其中YOUR_USERNAME为账号名，YOUR_STYLE_ID为publish的style ID，YOUR_ACCESS_TOKE

在这里插入图片描述

6. 将可以正常使用了如在 openlayers中

this.mapboxTiles = new TileLayer({
  source: new XYZ({
    url: url // 第五步拼接成的 url 地址
  })
})
this.map = new Map({
  ...
  layers: [
    this.mapboxTiles
  ],
  ...
})