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

问题描述

我有一个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
 }

我只能找到有关如何使用icon-rotate进行旋转的示例，这些示例适用于整个JSON，不适用于每个功能。有没有办法像这样样式？当然，我一定做错了。

解决方法

您步入正轨，但使两个问题混淆。

首先，您需要向GeoJSON对象添加一个值。您可以随便叫这个字段。

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

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

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