使用mapbox js,如何更改地图的样式?

时间:2016-02-06 13:35:32

标签: javascript mapbox

我已将jscss加入mapbox中的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/

1 个答案:

答案 0 :(得分:2)

编辑:由于推出了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/