Question

这会产生错误

leaflet.js：5未捕获的TypeError：无法读取属性'call'的未定义

    <!-- 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

据我所知，这是不可能的，但是自版本2.3.0起，Mapbox.js（基于Leaflet构建）通过L.mapbox.styleLayer支持样式网址：

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

你的问题是关于使用传单样式的传单1.0，所以我会回答（尽管你接受了使用mapbox.js的答案）。

新的mapbox样式工作室光栅图块为512x512像素。您需要设置tileSize和zoomOffset以使tile在leaflet.js中正常工作，否则tile将看起来太小。

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？

2 个答案: