0

我想在 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 公里内的所有城市。

4

1 回答 1

0

首先，Mapbox Streets v8 瓦片集有一些管理边界，但它没有州、县或城市 ID。这意味着它只是用来画线。因此，如果要选择靠近中心坐标的城市，则需要额外的图块。Mapbox 为此提供了边界服务。或者你可以找到一些像这样的免费数据。

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

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

这是一个例子。我创建了一个从此处下载国家边界数据的图块集（我使用了 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
    }
}

然后生成网址。

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>tag。你能在你的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>
于 2020-11-06T09:00:00.390 回答