无法渲染 Leaflet tilelayer

Question

我正在尝试使用 Leaflet 生成交互式地图。但是我在渲染 tilelayer 时遇到了一些问题。我正在使用 dustjs 渲染 HTML，它只给我一张空白地图，如下所示：

我最初尝试按照 Quick Start 指南使用 MapBox 完成此操作。我相信我有正确的访问令牌，

    var mymap = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=XYZ', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        maxZoom: 18,
        id: 'USERNAME.STYLEID',
        accessToken: 'XYZ'
    }).addTo(mymap);

我从 URL 中得到了我的样式 ID，如下所示：

我还尝试使用 OSM 来绕过获取访问令牌和项目 ID 的任何问题，所以我从我找到的教程中获取了这段代码：

var map = L.map('map', {
        center: [43.64701, -79.39425],
        zoom: 15
    });

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

但这也会呈现一张空白地图。

这是使用 OSM 的完整代码转储：

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <link rel="stylesheet" href="/styles/leaflet.css" />
    <script src="../js/leaflet.js"></script>
</head>
<body onload="onload()">
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script>
        var map = L.map('map', {
            center: [43.64701, -79.39425],
            zoom: 15
        });

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    </script>
</body>

在此先感谢您的帮助。如果您需要更多信息，请告诉我。

Answer 1

tilelayer 中的括号似乎没有正常工作。由于模板已编译，因此 dust 编译器可能会忽略 {}

中的参数

包含一个 *.js 文件而不是内联会起作用。

无法渲染 Leaflet tilelayer

Cannot render Leaflet tilelayer

html

javascript

leaflet

dust.js