Leaflet 传单和地图盒交通矢量集成显示黑色地图_Leaflet_Mapbox_Traffic

Leaflet 传单和地图盒交通矢量集成显示黑色地图

leaflet mapbox

Leaflet 传单和地图盒交通矢量集成显示黑色地图,leaflet,mapbox,traffic,Leaflet,Mapbox,Traffic,我想在地图上显示交通信息表单mapbox。代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="Content/leaflet.css" /> </head> <body> <scri

我想在地图上显示交通信息表单mapbox。代码如下：


    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="Content/leaflet.css" />
</head>
<body>
    <script src="Scripts/leaflet.js"></script>
    <script src="Scripts/leaflet-providers.js"></script>
    <h1>Traffic</h1>
    <div id="mapidTraffic" style="height:512px;width:512px">
    </div>
    <script type="text/javascript">
        var streetLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<redacted>', {
            maxZoom: 18,
            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>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        });

        var trafficLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=<redacted>', {
            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>',
            id: 'mapbox.mapbox-traffic-v1',
        });

        var mymapTraffic = L.map('mapidTraffic', { layers: [streetLayer] });

        var baseMaps = {
            "Streets": streetLayer
        };
        var overlayMaps = {
            "Traffic": trafficLayer
        };

        L.control.layers(baseMaps, overlayMaps).addTo(mymapTraffic);

        mymapTraffic.setView([49.4513412, 11.1306931], 13);

    </script>

</body>
</html>


交通
var streetLayer=L.tillelayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问_令牌='{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒/街道-v11”，
tileSize:512，
Zoomofset:-1
});
var trafficLayer=L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？访问_令牌='{
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:'mapbox.mapbox-traffic-v1'，
});
var mymapTraffic=L.map（'mapidTraffic'，{layers:[streetLayer]}）；
变量基本映射={
“街道”：街道层
};
var overlayMaps={
“交通”：交通层
};
L.控制层（底图、覆盖图）。添加到（mymapTraffic）；
mymapTraffic.setView（[49.4513412,11.1306931]，13）；

当我点击控件中的“交通”时，只有黑色背景和一些街道线。我也想看看街道地图

我该怎么办

博茨问候

沃尔克哈德

与您一起加载完整的地图分幅。因此，由于仅由交通数据组成，当添加交通层时，您会看到街道线（交通数据）和黑色背景，因为没有包含基本街道地图

相反，您应该创建一个包含基本街道地图和交通数据的地图。然后，当您希望查看交通数据和街道网格时，可以使用此样式。我已经创建了一个代码笔，它使用了我用Mapbox基本街道地图和Mapbox交通数据创建的Mapbox样式。此外，代码如下：


交通
var streetLayer=L.tillelayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoicgxtyxbib3gilchijoi2tnahl1nm5kmgfuejmxbhyxdxniztdmasj9.NzXqTSavz0iRskwUmt5kPw'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒/街道-v11”，
tileSize:512，
Zoomofset:-1
});
var trafficLayer=L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoicgxtyxbib3gilchijoi2tvdtnpd2s1mdlxmzj4bxe2ajk4dgozcyj9.zmjjblryrflwee2uopg5g'{
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:'plmapbox/ck860jimr0kf91ip8l61a5g00'，
tileSize:512，
Zoomofset:-1
});
var mymapTraffic=L.map（'mapidTraffic'{
图层：[街道图层]
});
变量基本映射={
“街道”：街道层
};
var overlayMaps={
“交通”：交通层
};
L.控制层（底图、覆盖图）。添加到（mymapTraffic）；
setView（[48.85341,2.3488]，13）；


交通
var streetLayer=L.tillelayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoicgxtyxbib3gilchijoi2tnahl1nm5kmgfuejmxbhyxdxniztdmasj9.NzXqTSavz0iRskwUmt5kPw'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒/街道-v11”，
tileSize:512，
Zoomofset:-1
});
var trafficLayer=L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoicgxtyxbib3gilchijoi2tvdtnpd2s1mdlxmzj4bxe2ajk4dgozcyj9.zmjjblryrflwee2uopg5g'{
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:'plmapbox/ck860jimr0kf91ip8l61a5g00'，
tileSize:512，
Zoomofset:-1
});
var mymapTraffic=L.map（'mapidTraffic'{
图层：[街道图层]
});
变量基本映射={
“街道”：街道层
};
var overlayMaps={
“交通”：交通层
};
L.控制层（底图、覆盖图）。添加到（mymapTraffic）；
setView（[48.85341,2.3488]，13）；