使用mapbox js，如何改变地图的样式？答案

【问题标题】：Using mapbox js, how do I change the style of a map?使用mapbox js，如何改变地图的样式？
【发布时间】：2016-02-06 13:35:31
【问题描述】：

我已将mapbox 的js 和css 包含在header 中：

<script src='//api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
<link href='//api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />

添加地图html：

<div id='map'></div>
<style>
    body { margin:0; padding:0; }
    #map { width:100%; height:471px; }
</style>

然后在js做了一张地图：

L.mapbox.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 3);

我不知道如何将它的样式更改为我在mapbox工作室中的样式。

我在 mapbox studio 中有两个样式网址：

mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1

https://api.mapbox.com/styles/v1/smickie/cikb3fhvi0063cekqns0pk1f1.html?title=true&access_token=pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA#1.4858291953347187/42.16057367191365/1.6334765316350683/0

如何将这些样式应用到我页面中的地图？

这是 api 但我在任何地方都找不到如何更改样式：https://www.mapbox.com/mapbox.js/api/v2.2.4/

【问题讨论】：

Mapbox 刚刚发布了 Mapbox.js API v2.3.0，查看我更新的答案。

标签： javascript mapbox

【解决方案1】：

编辑：由于 Mapbox.js API v2.3.0 的引入，更新了这个答案。它添加了一个L.mapbox.styleLayer，它可以处理使用 Mapbox studio 创建的样式：

L.mapbox.styleLayer('mapbox://styles/mapbox/emerald-v8').addTo(map);

示例：https://www.mapbox.com/mapbox.js/example/v1.0.0/stylelayer/

Mapbox 2.3.0 之前的答案：

您使用了错误的 API，这些样式用于 Mapbox-GL api：

https://www.mapbox.com/mapbox-gl-js/examples/

如果你想像现在一样使用经典的 Mapbox API，你需要使用 Mapbox Studio Classic 来创建你自己的样式图块集：

https://www.mapbox.com/studio/classic/

【讨论】：