mapbox - 如何在 Mapbox 中旋转由 geoJSON 指定的图标？

Question

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

作为引用，我的 geoJSON 中有一个不包含旋转属性的特征:

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

这是我将其添加到 map 的代码:

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']
        }