javascript - 如何让 mapbox-gl-js-offline-example 工作？

Question

我正在尝试让自托管地图图块与 Mapbox gl js 应用程序一起使用。作为一个起点，我试图让https://github.com/klokantech/mapbox-gl-js-offline-example/blob/gh-pages/index.html工作。我对 tileserver-gl-light 等其他想法持开放态度，但我也无法让它发挥作用。

我在 Windows 10 上，并从 github 下载了 .zip 并更改了 index.html 中的两行以尝试使其正常工作。你可以看到我所有被注释掉的尝试。

var style = {
  "version": 8,
  "sources": {
    "countries": {
      "type": "vector",
      // "url": "mapbox://map-id"
      // "url": "http://tileserver.com/layer.json", 
      //"tiles": [location.origin+location.pathname+"countries/{z}/{x}/{y}.pbf"],
      //"tiles": ["http://localhost:8080/data/v3/" + "countries/{z}/{x}/{y}.pbf"],
      //"tiles": "C:/Users/mattk/Desktop/mapbox-gl-js-offline-example-gh-pages/mapbox-gl-js-offline-example-gh-pages/countries/{z}/{x}/{y}.pbf",
      "tiles": "http://localhost:8000/countries/{z}/{x}/{y}.pbf",
      "maxzoom": 6
    }
  },
  //"glyphs": location.origin+location.pathname+"font/{fontstack}/{range}.pbf",
  //"glyphs": "http://localhost:8080/" + "font/{fontstack}/{range}.pbf",
  //"glyphs": "C:/Users/mattk/Desktop/mapbox-gl-js-offline-example-gh-pages/mapbox-gl-js-offline-example-gh-pages/countries/font/{fontstack}/{range}.pbf",
  "glyphs": "http://localhost:8000/countries/font/{fontstack}/{range}.pbf",
  "layers": [{
    "id": "background",
    "type": "background",
    "paint": {
      "background-color": "#ddeeff"
    }

当我打开 index.html 时，我只能看到导航小部件放大/缩小并将方位更改为北。控制台显示：

Uncaught Error: sources.countries.tiles: array expected, string found
    at style_batch.js:45
    at Array.forEach (<anonymous>)
    at Style.<anonymous> (style_batch.js:43)

但我不知道该怎么办

我是 GIS 新手，所以如果你像我 5 岁一样向我解释它，我将不胜感激。

标签： javascriptgismapbox-gl-js