如何在 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']
        }

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

How do I rotate an icon as specified by geoJSON in Mapbox?

mapbox

mapbox-gl-js