是否可以将传单版本 1 与自定义 mapbox 样式一起使用？

Question

这会产生错误

leaflet.js:5 Uncaught TypeError: Cannot read property 'call' of undefined

    <!-- Leaflet -->
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
            <!-- Mapbox GL -->
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.css" rel='stylesheet' />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.js"></script>


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

Answer 1

据我所知这是不可能的，但是 Mapbox.js（建立在 Leaflet 上）从 2.3.0 版开始通过 L.mapbox.styleLayer 支持样式 url：

L.mapbox.accessToken = YOUR_ACCESS_TOKEN;

var map = L.mapbox.map('map').setView([38.97416, -95.23252], 15);

// Use styleLayer to add a Mapbox style created in Mapbox Studio
L.mapbox.styleLayer('mapbox://styles/mapbox/emerald-v8').addTo(map);

参见：https://www.mapbox.com/mapbox.js/example/v1.0.0/stylelayer/

Answer 2

您的问题是关于将 leaflet 1.0 与 mapbox 样式一起使用，所以我会回答这个问题（尽管您接受了使用 mapbox.js 的答案）。

新的 mapbox 风格工作室栅格图块为 512x512 像素。您需要同时设置 tileSize 和 zoomOffset 才能使图块在 leaflet.js 中正常工作，否则图块会显得太小。

var myCenter = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: myCenter, zoom: 15});

var positron = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v8/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidHJpbGxpdW10cmFuc2l0IiwiYSI6ImVUQ2x0blUifQ.2-Z9TGHmyjRzy5GC1J9BTw', {
    tileSize: 512,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    zoomOffset: -1
}).addTo(map);

这里可以测试一下：http://playground-leaflet.rhcloud.com/moy/edit?html,output

是否可以将传单版本 1 与自定义 mapbox 样式一起使用？

is it possible to use leaflet version 1 with custom mapbox style?

javascript

leaflet

mapbox