使用线中心放置的符号不会随着地图旋转而旋转

Question

我在属性 symbol-placement 设置为 line-center 的情况下旋转图像时遇到问题。这是它的样子

删除属性问题解决了一半；图标随着我旋转地图而旋转，但它们位于行的开头，这不是我想要做的。

我层的定义是：

{
  "id": "my_symbol",
  "type": "symbol",
  "source": "XXXX",
  "source-layer": "XXXXXXX",
  "minzoom": 19,
  "layout": {
    "symbol-placement": "line-center",
    "icon-size": {
      "stops": [
        [20, 0.2],
        [21, 0.1],
        [22, 0.3],
        [23, 0.5],
        [24, 0.7]
      ]
    },
    "icon-image": [
      "concat",
      "edge_",
      ["get", "status_list"]
    ],
    "icon-allow-overlap": true
  }
}

我试图仅通过层的定义来实现此行为。我尝试在 SO 和其他一些网站上寻找解决方案，但我没有找到任何对我有帮助的东西。

Answer 1

您可以使用 icon-rotation-alignment

设置图标旋转

将其设置为 viewport 会将图标旋转固定到您的视口，而将其设置为 map 则不会旋转它

对不起gif很难看！

{
  "id": "my_symbol",
  "type": "symbol",
  "source": "XXXX",
  "source-layer": "XXXXXXX",
  "minzoom": 19,
  "layout": {
    "symbol-placement": "line-center",
    "icon-size": {
      "stops": [
        [20, 0.2],
        [21, 0.1],
        [22, 0.3],
        [23, 0.5],
        [24, 0.7]
      ]
    },
    "icon-image": [
      "concat",
      "edge_",
      ["get", "status_list"]
    ],
    "icon-allow-overlap": true,
    "symbol-placement": "line-center",
    "icon-rotation-alignment": "viewport"
  }
}

使用线中心放置的符号不会随着地图旋转而旋转

Symbol placed with line-center doesn't rotate as the map rotates

mapbox

mapbox-gl-js