使用Mapbox Static API添加GeoJSON图层生成静态地图遇问题求助

1. 修复"Invalid layer passed to addlayer"错误 #

你遇到的JSON解析错误，是因为直接把JSON.stringify的结果拼到URL里时，没有对JSON字符串做URL编码。JSON里的双引号、方括号等特殊字符会破坏URL结构，导致API无法正确解析。

解决方法很简单，用encodeURIComponent对JSON字符串进行编码：

let mylayer = encodeURIComponent(JSON.stringify(addLayerStyle));
let url = 'https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/-123.0249569,49.2407190,11/500x300?access_token=你的token&addlayer=' + mylayer;

2. 如何在静态地图中加载GeoJSON数据源 #

Mapbox Static API和交互式地图的逻辑不一样，没有提前添加数据源的步骤，所以不能像交互式地图那样用source ID来引用。你需要把完整的数据源定义直接嵌入到图层对象里，替换原来的source: 'geojson'字符串：

修改后的图层对象：

let addLayerStyle = {
    'id': 'geojson-layer',
    'type': 'circle',
    // 直接嵌入GeoJSON数据源配置
    'source': {
        'type': 'geojson',
        'data': 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json'
    },
    'paint': {
        'circle-opacity': 0.05,
        'circle-radius': {
            'base': 1.75,
            'stops': [
                [12, 2],
                [22, 180]
            ]
        },
        'circle-color': [
            'match',
            ['get', 'id'],
            'relation/3824359',
            '#fbb03b',
            'relation/3834297',
            '#223b53',
            'relation/3871090',
            '#e55e5e',
            'relation/3871091',
            '#3bb2d0',
            '#ccc'
        ]
    }
};

最终可运行代码 #

把上面的图层定义、编码步骤结合起来，就是完整的请求代码：

// 定义包含数据源的图层
let addLayerStyle = {
    'id': 'geojson-layer',
    'type': 'circle',
    'source': {
        'type': 'geojson',
        'data': 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json'
    },
    'paint': {
        'circle-opacity': 0.05,
        'circle-radius': {
            'base': 1.75,
            'stops': [
                [12, 2],
                [22, 180]
            ]
        },
        'circle-color': [
            'match',
            ['get', 'id'],
            'relation/3824359',
            '#fbb03b',
            'relation/3834297',
            '#223b53',
            'relation/3871090',
            '#e55e5e',
            'relation/3871091',
            '#3bb2d0',
            '#ccc'
        ]
    }
};

// 对图层JSON做URL编码
let mylayer = encodeURIComponent(JSON.stringify(addLayerStyle));

// 构造静态地图请求URL
let url = `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/-123.0249569,49.2407190,11/500x300?access_token=你的Mapbox令牌&addlayer=${mylayer}`;

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