Leaflet.js 中未显示自定义 Mapbox 瓦片集

Posted

技术标签:

【中文标题】Leaflet.js 中未显示自定义 Mapbox 瓦片集【英文标题】:Custom Mapbox tileset not showing in Leaflet.js 【发布时间】:2016-09-17 00:04:39 【问题描述】:

我正在为圣经营地制作游戏,并且想使用 Leaflet.js 制作地图。我正在使用 Mapbox 创建样式。我通过 csv 上传将罗马和耶路撒冷的坐标导入 Mapbox,它们在 preview 中渲染得很好。但是,它们在通过 Leaflet 加载时不会显示。见以下代码:

<head>
  <title>Race to Rome</title>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
</head>

<body>
 <div id="mapid" style="height:500px;"></div>
   <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<h1>Race to Rome</h1>


</body>

<script>

        var mymap = L.map('mapid').setView(L.latLng(34,30), 5);
        L.tileLayer('https://api.mapbox.com/styles/v1/wheelerj/cioerd0vf001yacm7rff4tj5h/tiles/z/x/y?access_token=pk.eyJ1Ijoid2hlZWxlcmoiLCJhIjoiY2lvZXJheTZrMDByNXVsbTNpZXp0c2VnbCJ9.T_jRdbo0CKUgZ2aiuA3kKA', 
            maxZoom: 18,
            attribution: 
                'Imagery &copy;<a href="http://mapbox.com">Mapbox</a>',
            id: 'mapbox.streets'
        ).addTo(mymap);

</script>

我需要做什么才能在 Leaflet 中包含这些标签?

【问题讨论】:

【参考方案1】:

您可能希望考虑使用Mapbox.js(这是为其用户增强的 Leaflet 分支),并使用他们的预构建功能来处理这样的特征层。 请参阅下面的示例。

https://www.mapbox.com/mapbox.js/example/v1.0.0/show-marker-as-label/

L.mapbox.featureLayer('MY_FEATURE_LABEL_SET')
    .on('ready', function(e) 
        gj.addData(this.getGeoJSON());
    );

【讨论】:

赶上了其他事情,但计划有一天会回到它。

以上是关于Leaflet.js 中未显示自定义 Mapbox 瓦片集的主要内容,如果未能解决你的问题,请参考以下文章

空白地图图块 - 错误 410 消失(Mapbox 和 Leaflet JS)

创建自定义地图叠加层(折线)[Mapbox]

用mapbox插件在flutter地图上添加自定义标记。

Silverlight 中未显示某些自定义字体

在leaflet.js中定义了诸如“position:topleft”之类的控制选项在哪里?我可以创建position:bottomcenter吗?

自定义按钮在界面生成器中未正确显示