Html mapbox studio图层强光城市公式

我想在一个HTML文件中嵌入一个带有高亮区域的静态地图

我是为一封专业的电子邮件制作的，它使用自定义HTML进行特定的布局，所以它不支持HTML以外的其他语言。我只能使用内联样式，我需要在

它使我能够定义注释部分中指定的位置和样式属性，但是我希望突出显示特定区域

因此，我去mapbox studio配置地图并提取HTML中的代码。然而，我不知道如何设置这个，我知道我必须使用图层并为这个图层设置参数。我很确定我必须使用一个公式来完成这个任务

我的主要目标是突出显示一个城市的轮廓，包括30公里半径范围内与其相邻的所有城市。

首先，有一些管理边界，但没有州、州或城市id。这意味着它只是用来画线。因此，如果要选择靠近中心坐标的城市，则需要其他平铺。Mapbox为此目的提供了支持。或者你可以找到一些免费的数据，比如

准备边界数据后，可以使用in-Static Image API动态设置地图样式

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

这里有一个例子。我创建了一个tileset，其中包含从下载的国家边界数据（我使用了Admin 0-COUNTIES）。tileset ID是yochi.092qgyqv

然后创建以下样式，为美国领土着色

<!-- 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.">

然后生成URL

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编码的。我还附加了一个生成url的python脚本

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

添加： 简而言之，可以获得上面的图像

谢谢，如果我得到它，您会告诉我需要导入城市数据，然后我有两种可能：1）在Studio中编写静态表达式，或2）在静态API中使用覆盖。但我正在寻找这两种方法，并没有找到只使用HTML来实现这一点的现有方法。在我的用例中，我需要它来处理HTML电子邮件，所以我只能使用HTML。我查看文档，发现只有使用PHP的方法，等等。是否只有使用HTML和mapbox API才能做到这一点@吉崎骏错了，第二段错了。我修复并添加了一些示例。@JawadBouna–我在答案的末尾添加了一条注释。此解决方案适用于HTML。您可以在img标记中使用URL。

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 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>