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

最新推荐文章于 2024-09-19 21:48:13 发布

qq_28918357

最新推荐文章于 2024-09-19 21:48:13 发布

阅读量2.9k

点赞数

分类专栏： vue js htmlcss布局

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

版权

js 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

htmlcss布局

4 篇文章 0 订阅

订阅专栏

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
  ],
  ...
})