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

Question

I'm having a problem rotating an image with property symbol-placement set to line-center . This is what it looks like

Removing the property half-solve the issue; the icon rotate as I rotate the map, but they position at the start of the line, and it's not what I'm trying to do.

The definition of my layer is:

{
  "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
  }
}

I'm trying to achieve this behaviour only by the layer's definition. I tried looking for a solution, here on SO and on some other sites but I haven't found anything that would help me.

Answer 1

you can set your icon rotation with icon-rotation-alignment

setting it to viewport will fix the icon rotation to your viewport while setting it to map won't rotate it

i'm sorry the gif is hard to see!

{
  "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"
  }
}