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

Posted 2023-02-16

【中文标题】使用自定义创建的 Mapbox 样式（来自 Mapbox Studio）和 Leaflet

【英文标题】：Use a custom created Mapbox style (from Mapbox Studio) along with Leaflet

【发布时间】：2016-03-08 10:26:57

【问题描述】：

我找不到任何关于如何使用自定义创建的 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

【参考方案1】：

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

https://www.mapbox.com/mapbox-gl-js/api/ https://github.com/mapbox/mapbox-gl-js

例子：

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/

【讨论】：

实际上他们说你可以在他们的网站上使用 mapbox leafletjs.com/examples/quick-start.html 无论如何你的例子是我需要的，所以非常感谢你的帮助！

你错了，mapbox 样式确实适用于传单。

好吧，如果是这样@RichardZilahi，那么如果您包含一个 2015 年的参考链接，这样人们就可以明白您的意思了。

【参考方案2】：

我成功为传单添加了一个mapbox样式

在此 URL https://www.mapbox.com/studio/styles/ 上选择您的风格。本示例将使用默认样式（我认为所有人都可以使用此样式） https://www.mapbox.com/studio/styles/mapbox/streets-v10/share/

然后在此页面上选择传单标签

复制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);

【讨论】：

谢谢！正是我需要的，以及 OP 也需要的。我认为这应该是公认的答案...

我认为这已经改变了。我必须去use 并使用Fulcrum 的URL

您可以使用带有 L.TileLayer 类的端点将 Mapbox Studio 样式添加到 Leaflet 地图：api.mapbox.com/styles/v1/YOUR_USERNAME/YOUR_STYLE_ID/tiles/256z/x/y?access_token=YOUR_ACCESS_TOKEN

【参考方案3】：

真的很简单。

将您的地图用作平铺地图的网址：

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

如果您想将样式复制/导入到您的工作室帐户：

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

【讨论】：

你能扩展一下这个答案吗，看起来真的很重要！如果您有数百个图块，则无法单击为每个图块创建工作室样式。另外，每种风格有 15 个来源限制。您是否使用 API 将它们添加到“新”样式中，然后使用该链接？

【参考方案4】：

使用当前 Mapbox 版本：

创建自己的样式后，点击右上角菜单中的“分享...” 您会看到弹出窗口，选择开发“第三方”，然后在下拉菜单中选择“CARTO” 复制“集成 URL”。这是 Leaflet.js 为“tileLayer”对象设置值所需的链接

【讨论】：

谢谢！只有这样才能成功打印地图。

【参考方案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)