使用Wax和Leaflet加载本地TileJSON时的SyntaxError

时间:2013-08-09 11:09:50

标签: json maps mapbox tilemill

我有这个TileJSON文件:

{
    "tilejson": "1.0.0",
    "bounds": [ -6.6028, 49.689, 1.9446, 55.943 ],
    "center": [ -1.7029, 52.703, 6 ],
    "minzoom": 6,
    "maxzoom": 15,
    "version": "1.0.0",
    "tiles": [
        "http://localhost:8081/data/oa_belonging_tiles/{z}/{x}/{y}.png"
    ]
}

我正在使用以下代码创建地图:

<script type="text/javascript">

    wax.tilejson('data/oa_belonging_tiles/metadata.json',
            function(tilejson) {
                var map = new L.Map('map-div')
                        .addLayer(new wax.leaf.connector(tilejson))
                        .setView(new L.LatLng(51, 0), 1);
                wax.leaf.legend(map, tilejson).appendTo(map._container);
            });
</script>

当我在浏览器中执行脚本时,出现此错误:

Uncaught SyntaxError: Unexpected token : metadata.json:2

我遵循了TileJSON规范,我发现文件中没有拼写错误/其他问题。我清除了浏览器缓存,我100%确定我正在加载正确的文件。我已尝试删除一些键/值,但问题仍然存在。

我很感激有关如何在本地加载瓷砖的任何建议。

2 个答案:

答案 0 :(得分:0)

我通过将tilejson存储在变量中来实现它。它现在加载瓷砖没有任何问题:

var tilejson = {
        bounds: [-6.6028, 49.689, 1.9446, 55.943 ],
        center: [-1.7029, 52.703, 6],
        maxzoom: 15,
        minzoom: 6,
        scheme: "xyz",
        tilejson: "2.0.0",
        tiles: ["http://localhost:8081/data/oa_belonging_tiles/{z}/{x}/{y}.png"],
        version: "1.0.0"
    };

var map = new L.Map('map')
        .addLayer(new wax.leaf.connector(tilejson))
        .setView(new L.LatLng(53, -1.7), 6);

答案 1 :(得分:0)

如果您不反对使用https://www.mapbox.com/,则可以提供更多的磁贴选项。我遇到了类似的问题,请参阅下面的代码片段,了解如何替换整个tilejson对象。以下是mapbox的工作原理https://www.mapbox.com/guides/how-mapbox-works/

编辑:当然还在使用传单,就像我一样。还使用了蜡连接器的更新版本。 http://www.geosprocket.com/mapbox-wax/manual/index.html#downloads

// HTML

     <div id="map"></div>

JS脚本

     L.mapbox.accessToken = 'token';
var map = L.mapbox.map('map','yourmapid')
    .setView([yourlocation], 15);