mapbox studio 图层高亮城市公式

Question

我想在 HTML 文件中嵌入静态地图，并带有突出显示区域。

我正在为专业电子邮件制作它，使用自定义 HTML 进行特定布局，因此它不支持 HTML 以外的其他语言。我只能使用内联样式，我需要将此地图作为静态图像添加到 <img> 标签下。我已经找到了一种使用此代码嵌入静态地图的方法：

<!-- Retrieve a map at -87.0186 longitude, 32.4055 latitude, -->
<!-- zoom 14, bearing 0. Pitch will default to 0. -->
<!-- The map will be 500 pixels wide and 300 pixels high. -->
<img src="https://api.mapbox.com/styles/v1/mapbox/light-v10/static/-87.0186,32.4055,14/500x300?access_token=YOUR_TOKEN" alt="Map of the Edmund Pettus Bridge in Selma, Alabama.">

它使我能够定义评论部分中指定的位置和样式属性，但是我想要突出显示特定区域。

所以，我去 mapbox studio 配置地图并提取 HTML 中的代码。但是我找不到如何设置它，我知道我必须使用图层并为此图层设置参数。我很确定我必须使用公式才能完成此操作。

我的主要目标是突出一个城市的轮廓，包括它附近 30 公里半径内的所有城市。

Answer 1

首先，Mapbox Streets v8 tileset have some admin boundary but it does not have the state, prefecture or city id. That means it's just used to draw lines. Therefore, if you want to select cities close to the center coordinate, you need additional tiles. Mapbox provides Boundaries Service for that purpose. Or you can find some free data like this.

准备好边界数据后，您可以在静态图像 API 中使用 style parameters 动态设置地图样式 API。

如果我正确理解您的用例，您的服务（或您的本地工具）将生成包含 URL 为静态 API 标签的电子邮件。 URL部分将根据您的要求动态更改。

这是一个例子。我创建了一个 tileset，其中包含从 here 下载的国家/地区边界数据（我使用 Admin 0 - Countries）。瓦片集 ID 为 yochi.092qgyqv.

然后创建以下为 U.S.A 着色的样式。领土。

layer = {
    "id":"usa",
    "type":"fill",
    "source": {
        "type": "vector",
        "url": "mapbox://yochi.092qgyqv"
    },
    "source-layer":"ne_10m_admin_0_countries-6nyx14",
    "filter":["==",["get","ISO_A2"], "US"],
    "paint": {
        "fill-color":"#008800",
        "fill-opacity": 0.3
    }
}

然后生成URL.

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-93.0747,39.7962,2.5/700x400?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg&addlayer=%7B%22id%22%3A%20%22usa%22%2C%20%22type%22%3A%20%22fill%22%2C%20%22source%22%3A%20%7B%22type%22%3A%20%22vector%22%2C%20%22url%22%3A%20%22mapbox%3A//yochi.092qgyqv%22%7D%2C%20%22source-layer%22%3A%20%22ne_10m_admin_0_countries-6nyx14%22%2C%20%22filter%22%3A%20%5B%22%3D%3D%22%2C%20%5B%22get%22%2C%20%22ISO_A2%22%5D%2C%20%22US%22%5D%2C%20%22paint%22%3A%20%7B%22fill-color%22%3A%20%22%23008800%22%2C%20%22fill-opacity%22%3A%200.3%7D%7D

结果就是这样。

请注意，样式表达式应该 url 编码。我还附加了一个生成 url.

的 python 脚本

import json
import urllib.parse

ACCESS_TOKEN = 'YOUR ACCESS TOKEN HERE'


def generate(layer):
    style = 'mapbox/streets-v11'
    encoded = urllib.parse.quote(json.dumps(layer))
    return f'curl -g "https://api.mapbox.com/styles/v1/{style}/static/-93.0747,39.7962,2.5/700x400?access_token={ACCESS_TOKEN}&addlayer={encoded}"'


if __name__ == '__main__':
    layer = {
        "id":"usa",
        "type":"fill",
        "source": {
            "type": "vector",
            "url": "mapbox://yochi.092qgyqv"
        },
        "source-layer":"ne_10m_admin_0_countries-6nyx14",
        "filter":["==",["get","ISO_A2"], "US"],
        "paint": {
            "fill-color":"#008800",
            "fill-opacity": 0.3
        }
    }

    output = generate(layer)
    print(output)

已添加： 总之，上面的图片可以得到<img>标签。你能在你的 HTML 中试试吗？我解释的是如何创建这么长的 URL.

 <img src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-93.0747,39.7962,2.5/700x400?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg&addlayer=%7B%22id%22%3A%20%22usa%22%2C%20%22type%22%3A%20%22fill%22%2C%20%22    source%22%3A%20%7B%22type%22%3A%20%22vector%22%2C%20%22url%22%3A%20%22mapbox%3A//yochi.092qgyqv%22%7D%2C%20%22source-layer%22%3A%20%22ne_10m_admin_0_countries-6nyx14%22%2C%20%22filter%22%3A%20%5B%22%3D%3D%22%2C%20%5B%22get%22%2C%20%22ISO_A2%22%5D%2C%20%22US%22%5D%2C%20%22paint%22%3A%20%7B%22fill-color%22%3A%20%22%23008800%22%2C%20%22fill-opacity%22%3A%200.3%7D%7D"></img>

mapbox studio 图层高亮城市公式

mapbox studio layer highlightening city formula

html

xhtml

formula

mapbox

mapbox-studio