使用自定义创建的 Mapbox 样式（来自 Mapbox Studio）和 Leaflet

Question

我找不到任何有关如何使用自定义创建的 Mapbox 地图样式的示例。

在 Mapbox 页面上，我为地图创建了样式。

如何在 Leaflet 中使用此样式？

例如：

var map = L.map('map', {
    center: [43.64701, -79.39425],
    zoom: 15
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

我应该把 mapbox://styles/ficht/cihqdfw3f004ybnm35e7zefon 放在哪里？

这是地图：

https://api.mapbox.com/styles/v1/ficht/cihqdfw3f004ybnm35e7zefon.html?title=true&access_token=pk.eyJ1IjoiZmljaHQiLCJhIjoiY2locWQ3YTBtMDAxYnY1bHVvcGtsM2Y1MCJ9.C8NlGmZuX6W2YrvXTHULeQ#1.6044619216776894/37.74890243399017/28.62971087861783/0.08751522544480395

Answer 1

这不能与 Leaflet 结合使用，您需要切换到 Mapbox GL：

示例：

mapboxgl.accessToken = YOUR_KEY;
var map = new mapboxgl.Map({
    container: 'map',
    style: YOUR_STYLE_URL
    center: [0, 0],
    zoom: 0
});

https://www.mapbox.com/mapbox-gl-js/example/custom-style-id/

Answer 2

我成功地在传单中添加了 mapbox 样式

关于这个URLhttps://www.mapbox.com/studio/styles/select你的风格。我将在此示例中使用默认样式（我认为所有人都可以使用此样式） https://www.mapbox.com/studio/styles/mapbox/streets-v10/share/

然后在此页面上 select 传单选项卡

复制 Url 并在您的 js 文件中像这样使用

var map = L.map('map');

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFza290YSIsImEiOiJjaXp0bmI3M3EwMDBvMndzMHJudnlsMDllIn0.jV7rTNmfiqjx57usCu54rQ', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
}).addTo(map);

Answer 3

真的很简单

URL将您的地图用作瓦片地图：

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

如果你想copy/import一种风格到你的工作室帐户：

https://www.mapbox.com/studio/styles/add-style/THE_USERNAME/THE_STYLE_ID/

Answer 4

当前 Mapbox 版本：

创建自己的样式后，单击右上角菜单中的"Share..."
您会看到弹出窗口，select 开发 "Third Party" 和下拉菜单 "CARTO"
复制"Integration URL"。这是 link Leaflet.js 为 'tileLayer' 对象

Answer 5

这段代码对我有用：

let map = L.map('map',{
            center: [45.5017, -73.5673],
            zoom: 10
        })

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token={YOUR_ACCESS_TOKEN}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18
        }).addTo(map)

使用自定义创建的 Mapbox 样式（来自 Mapbox Studio）和 Leaflet

Use a custom created Mapbox style (from Mapbox Studio) along with Leaflet

html

javascript

leaflet

mapbox