如何使用 Mapbox 检索添加了带有 geojson 源的样式图层的静态地图图像？

Question

这是我定义的图层，这可以完美地将 geojson 图层添加到我的地图中。但我想要使用 mapbox 静态 api 获得带有 geosjson 层的地图的静态图像。我一直在尝试理解来自mapbox的这些文档https://docs.mapbox.com/api/maps/static-images/

我的代码：

//Source

map.addSource('geojson', {
            type: 'geojson',
            // Use a URL for the value for the `data` property.
            data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json'
        });

//Layer

 let addLayerStyle = {
            'id': 'geojson-layer',
            'type': 'circle',
            'source': 'geojson',
            'paint': {
                'circle-opacity': 0.05,
// Make circles larger as the user zooms from z12 to z22.
                'circle-radius': {
                    'base': 1.75,
                    'stops': [
                        [12, 2],
                        [22, 180]
                    ]
                },
// Color circles by ethnicity, using a `match` expression.
                'circle-color': [
                    'match',
                    ['get', 'id'],
                    'relation/3824359',
                    '#fbb03b',
                    'relation/3834297',
                    '#223b53',
                    'relation/3871090',
                    '#e55e5e',
                    'relation/3871091',
                    '#3bb2d0',
                    /* other */ '#ccc'
                ]
            }
        }
        map.addLayer(addLayerStyle)

这在我的地图上效果很好，如附图所示。

根据文档，我应该能够添加名为 addlayer 的 url 参数

这是我的网址

        let mylayer = JSON.stringify(addLayerStyle)
        console.log(mylayer)
        let url = 'https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/-123.0249569,49.2407190,11/500x300?access_token=pk.D_ngzR7j4vU1CILtpNLg4Q&addlayer=' + mylayer

我收到错误消息“message”：“传递给 addlayer 的层无效。无法解析 JSON。”

另外，我不明白这是如何工作的，因为它似乎没有将带有 geojson 的实际源传递给请求。

Answer 1

您必须先对字符串进行编码，然后再将其附加到 URL。

颜色字符串中的

#

破坏了 URL。

#

需要在 URL 中编码为

%23

，使

#223b53

变为

%23223b53