mapbox Studio图层突出显示城市公式

问题描述

我想在具有突出显示区域的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公里半径内的所有城市。

解决方法

首先，Mapbox Streets v8 tileset有一些管理边界，但没有州，县或城市ID。这意味着它只是用来画线。因此，如果要选择靠近中心坐标的城市，则需要其他图块。 Mapbox为此提供了Boundaries Service。或者，您可以找到一些免费数据，例如this。

一旦准备好边界数据，就可以使用静态图像API中的style parameters动态设置地图的样式。

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

这是一个例子。我创建了一个图块集，该图集具有从here下载的国家边界数据（我使用的是Admin 0-国家）。磁贴ID为yochi.092qgyqv。

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

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。我还附加了一个生成网址的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,2.5/700x400?access_token={ACCESS_TOKEN}&addlayer={encoded}"'


if __name__ == '__main__':
    layer = {
        "id":"usa","source": {
            "type": "vector","url": "mapbox://yochi.092qgyqv"
        },"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,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>