如何使用 JSON 文件使用 Mapbox 样式

Question

我正在尝试为地图添加样式。我浏览了 Mapbox 站点并尝试了解如何读取 JSON 样式并在应用程序中使用它。所以这是我从 Mapbox 网站上得到的 JSON 文件。

{
  "version": 8,
  "name": "Meteorites",
  "metadata": {
    "mapbox:origin": "basic-template-v1",
    "mapbox:autocomposite": true,
    "mapbox:type": "template",
    "mapbox:sdk-support": {
      "js": "0.45.0",
      "android": "6.0.0",
      "ios": "4.0.0"
    }
  },
  "center": [
    74.24426803763072,
    -2.2507114487818853
  ],
  "zoom": 0.6851443156248076,
  "bearing": 0,
  "pitch": 0,
  "sources": {
    "composite": {
      "url": "mapbox://mapbox.mapbox-streets-v8,examples.0fr72zt8",
      "type": "vector"
    }
  },
  "sprite": "mapbox://sprites/examples/cjikt35x83t1z2rnxpdmjs7y7",
  "glyphs": "mapbox://fonts/{username}/{fontstack}/{range}.pbf",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "layout": {},
      "paint": {
        "background-color": [ ]
      }
    },
    { ... }
  ],
  "created": "2015-10-30T22:18:31.111Z",
  "id": "cjikt35x83t1z2rnxpdmjs7y7",
  "modified": "2015-10-30T22:22:06.077Z",
  "owner": "examples",
  "visibility": "public",
  "draft": false
}

所以这个文件的名字是

style.JSON

。我的问题是如何在我们的 HTML 应用程序中读取这个 JSON 文件。当加载初始地图时，我想在 UI 上显示这种样式。

Answer 1

一种简单的方法是将其直接嵌入到您的 JavaScript 中：

const style = { version: 8, ... }
const map = new mapboxgl.Map({ style, ... })