如何在HTML应用中使用Mapbox JSON样式文件

前提准备 #

先确保HTML页面引入Mapbox GL JS的样式和脚本：

<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>

方法1：通过Fetch加载本地style.json文件 #

把下载的style.json放在HTML文件同级目录，用以下代码加载并初始化地图：

<!-- 页面中添加承载地图的容器 -->
<div id='map' style='width: 100%; height: 400px;'></div>

<script>
// 替换为你的Mapbox访问令牌
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

// 加载本地样式文件
fetch('./style.json')
  .then(response => response.json())
  .then(style => {
    // 修复样式文件中background-color空数组的问题（可选但建议）
    style.layers.find(layer => layer.id === 'background').paint['background-color'] = '#eeeeee';
    
    // 初始化地图
    const map = new mapboxgl.Map({
      container: 'map', // 地图容器ID
      style: style, // 传入加载的自定义样式
      // 可选：若不需要样式预设的中心、缩放参数，可单独指定
      // center: [116.4074, 39.9042],
      // zoom: 10
    });
  })
  .catch(err => console.error('加载样式文件失败:', err));
</script>

注意：本地开发不能直接双击打开HTML文件（会触发跨域限制），需要用本地服务器运行，比如python -m http.server或VS Code的Live Server插件。

方法2：将样式JSON内联到JS代码中 #

如果不想处理跨域问题，可直接把style.json内容复制为JS对象使用：

<div id='map' style='width: 100%; height: 400px;'></div>

<script>
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

// 直接将style.json内容转为JS对象
const customStyle = {
  "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": "#eeeeee" // 替换空数组为有效颜色
      }
    },
    // 其他图层内容...
  ],
  "created": "2015-10-30T22:18:31.111Z",
  "id": "cjikt35x83t1z2rnxpdmjs7y7",
  "modified": "2015-10-30T22:22:06.077Z",
  "owner": "examples",
  "visibility": "public",
  "draft": false
};

// 初始化地图
const map = new mapboxgl.Map({
  container: 'map',
  style: customStyle
});
</script>

关键提示 #

• 必须替换代码中的YOUR_MAPBOX_ACCESS_TOKEN为自己的Mapbox访问令牌，否则地图无法加载。
• 原始样式文件中background图层的background-color是空数组，会导致地图背景无样式，建议修改为有效颜色值（如#eeeeee）或合法样式表达式。

内容的提问来源于stack exchange，提问作者san test