如何在 Mapbox 中按照 geoJSON 指定旋转图标？

Question

我有一个 geoJSON，其中包含显示风速符号的点。我试图了解如何更改我的代码以允许轮换。我确信我以前见过这个，但我在任何地方都找不到例子。

作为参考，这里是我的 geoJSON 中的一个功能，其中不包含旋转属性：

{
    "type": "Feature",
    "geometry": {      "type": "Point",
      "coordinates": [-117.2500 , 33.35000]
     },
     "properties": {
        "description": " ",
        "icon": "wind-speed-15"
     }
}

这是我将其添加到地图的代码：

map.addLayer({
        id: "wind_speed",
        type: 'symbol',
        source: 'wind_speed_json',
        layout: {
            'icon-image': ['get', 'icon']
        }
    })

我需要在 JSON 中更改哪些内容才能允许 Mapbox 根据每个功能进行旋转？我在想这样的事情，以度为单位（只是一个例子）：

 "properties": {
    "description": " ",
    "icon": "wind-speed-15",
    "icon-rotate": 90
 }

我只能找到如何使用适用于整个 JSON 的 icon-rotate 进行旋转的示例，而不是针对每个功能。有没有办法把它设计成这样？我肯定做错了什么。

Answer 1

您走在正确的轨道上，但混淆了两个问题。

首先，您需要向 GeoJSON 对象添加一个值。您可以随意称呼该字段。

"properties": {
    "description": " ",
    "icon": "wind-speed-15",
    "rotation": 90
 }

接下来，您需要告诉 Mapbox-GL-JS 如何将该属性转换为图标旋转：

layout: {
            'icon-rotate': ['get', 'rotation']
        }