静态地图上的热图答案

【问题标题】：Heatmap over static map静态地图上的热图
【发布时间】：2021-08-07 18:18:48
【问题描述】：

我正在尝试使用静态地图 api 和 PHP 在静态地图上显示热图。我已经能够生成静态地图，但是在尝试添加热图图层时，我无法这样做。我正在尝试通过使用 addsource 和直接在 url 的 addlayer 参数中添加内联 geojson 源和外部 geojson 文件，但它们都不起作用。

有人可以举个例子或以某种方式指导我吗？

提前致谢。

编辑：举个例子，尝试复制地震的例子：

$url  = 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/static/-120,50/access_token=MY_ACCESS_TOKEN';
$url .= "&addsource={'earthquakes',{'type':'geojson','data':'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'}}";
$url .= "&addlayer={'id':'earthquakes-heat','type':'heatmap','source':'earthquakes','maxzoom':'9'}";

当我尝试这个时，控制台显示

'消息“传递给 addlayer 的层无效。无法解析 JSON。”'

我只想创建一个地图图像，我使用上面显示的第一行代码，并传递一些地理点来接收热图图像，但无法这样做。

我曾尝试使用内联 geojson、远程 geojson、与 mapbox studio（我可以轻松创建热图）和一些变体混合，但我真的不知道我错过了什么。

【问题讨论】：

对于投反对票的人，我很抱歉未能传达我的努力。在来这里之前，我已经尝试解决这个问题一个多星期了:(还是谢谢你。

标签： php static mapbox heatmap

【解决方案1】：

我没有使用 mapbox 的经验。但是从您分享的代码示例和错误消息中，我发现了几个问题。

输入 JSON 无效。 JSON 标准不允许单引号字符串。见RFC 7159 - 7. Strings。

图层源 JSON 格式看起来错误。感觉earthquakes 应该是一个属性而不是一个值。

{"earthquakes": {"type": "geojson", "data": "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"}}

另外我猜，maxzoom 在 JSON 层中应该是整数/数字。

{"id": "earthquakes-heat", "type": "heatmap", "source": "earthquakes", "maxzoom": 9}

所有这些修改只是基于 JSON 格式允许它的猜测。仔细检查文档。

网址数据未编码。这里似乎不是这样。但为了安全起见，最好对通过 url 提供的数据进行编码。

您可以在 http_build_query 的帮助下这样做：

$url = 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/static/-120,50/access_token=MY_ACCESS_TOKEN';
$url .= http_build_query([
    'addsource' => '{"earthquakes": {"type": "geojson", "data": "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"}}',
    'addlayer' => '{"id": "earthquakes-heat", "type": "heatmap", "source": "earthquakes", "maxzoom": 9}',
]);

或者使用urlencode:

$url = 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/static/-120,50/access_token=MY_ACCESS_TOKEN';

$source = '{"earthquakes": {"type": "geojson", "data": "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"}}';
$url .= '&addsource=' . urlencode($source);

$layer = '{"id": "earthquakes-heat", "type": "heatmap", "source": "earthquakes", "maxzoom": 9}';
$url .= '&addlayer=' . urlencode($layer);

希望这会对您有所帮助，或者至少给您一些解决问题的提示。

【讨论】：

嗨！感谢您的帮助！我试过这个：JSON格式是我的错，对不起。我想我对这个问题有点压力：/ 一旦我正确构建 JSON，响应是 '新层的源引用键与请求样式中的任何源键都不匹配。' 我猜问题是我错过了如何正确发送有关热图的请求。无论如何谢谢:)

【解决方案2】：

所以，@vstelmakh 关于您原始帖子中的 JSON 格式不正确是正确的。但是，还值得一提的是您当前方法的另外两个问题：

Static Images API 当前不支持 addsource 查询字符串参数，因此在您发出请求时会忽略此信息。
addlayer 查询字符串参数当前不支持 GeoJSON 源。为了正确添加热图样式图层，您需要先将数据上传为 mapbox 图块集，然后在 addlayer 参数中引用它。

来自API docs：

要从不属于样式的源添加样式层，您必须在新样式层中指定 source.url 和 source.type，例如：
"source": {
  "type": "vector",
  "url": "mapbox://{username}.{tileset}"
}
source.url 必须是 mapbox:// tileset URL，并且必须可以被请求中使用的访问令牌访问。 source.type 必须是 raster 或 vector。

免责声明：我目前在 Mapbox 工作

【讨论】：