使用Mapbox JavaScript SDK加载外部GeoJSON至静态地图遇问题

问题分析 #

• Mapbox Static API的addlayer参数不支持直接引用外部HTTP URL的GeoJSON源，仅兼容内联GeoJSON数据或Mapbox托管的资源（mapbox://前缀格式）。
• 代码中保留的source-layer字段是针对矢量瓦片源的配置项，GeoJSON源无需该字段，会导致加载逻辑异常。
• 即使取消注释外部GeoJSON的URL，Static API也无法识别并加载该外部资源。

解决方案 #

方案1：使用内联GeoJSON数据

将外部GeoJSON的内容直接嵌入到source的data字段中，示例修改代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Demo: Static images with style parameters</title>
    <script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
    <style>
      .container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img id="traffic" src="" alt="Mapbox traffic map" />
    </div>
  </body>
  <script>
    const mapboxClient = mapboxSdk({ accessToken: '你的API密钥' });

    // 替换为你要加载的GeoJSON完整数据内容
    const inlineGeoJSON = {
      "type": "FeatureCollection",
      "features": [
        // 粘贴外部GeoJSON的features数组内容
      ]
    };

    const addLayerStyle = {
      'id': 'chicago-wards',
      'type': 'line',
      'source': {
        'type': 'geojson',
        'data': inlineGeoJSON
      },
      'paint': {
        'line-color': '#ff0000',
        'line-width': 2
      }
    };

    const request = mapboxClient.static.getStaticImage({
      ownerId: 'mapbox',
      styleId: 'light-v10',
      width: 500,
      height: 350,
      position: {
        coordinates: [-87.6298, 41.8781],
        zoom: 12
      },
      addlayer: addLayerStyle,
      before_layer: 'road-label'
    });
    const staticImageUrl = request.url();

    document.getElementById('traffic').src = staticImageUrl;
  </script>
</html>

方案2：使用Mapbox托管的GeoJSON源

1. 将外部GeoJSON文件上传到Mapbox Studio，创建托管数据源，获取mapbox://格式的数据源URL。
2. 修改代码中的source配置，移除冗余字段，示例如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Demo: Static images with style parameters</title>
    <script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
    <style>
      .container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img id="traffic" src="" alt="Mapbox traffic map" />
    </div>
  </body>
  <script>
    const mapboxClient = mapboxSdk({ accessToken: '你的API密钥' });

    const addLayerStyle = {
      'id': 'chicago-wards',
      'type': 'line',
      'source': {
        'type': 'geojson',
        'url': 'mapbox://你的托管数据源ID' // 替换为Mapbox托管的GeoJSON URL
      },
      'paint': {
        'line-color': '#ff0000',
        'line-width': 2
      }
    };

    const request = mapboxClient.static.getStaticImage({
      ownerId: 'mapbox',
      styleId: 'light-v10',
      width: 500,
      height: 350,
      position: {
        coordinates: [-87.6298, 41.8781],
        zoom: 12
      },
      addlayer: addLayerStyle,
      before_layer: 'road-label'
    });
    const staticImageUrl = request.url();

    document.getElementById('traffic').src = staticImageUrl;
  </script>
</html>

注意事项 #

• 替换代码中的你的API密钥和对应GeoJSON内容/托管URL。
• 内联GeoJSON需保证数据结构无语法错误，若数据体积过大，推荐使用Mapbox托管方案（Static API对请求URL长度有上限）。

内容的提问来源于stack exchange，提问作者Zaynaib Giwa