是否有任何未记录的用于绘制道路外壳的 z 顺序魔术？

Question

按照Mapbox-GL Style Spec, layers are drawn in the order specified by the "layers" array of the style json. Let's assume a subset of the bright-v8样式只需要四层就可以得到secondary/tertiary条带套管的路桥：

{
  "version": 8,
  "name": "Bright",
  "metadata": {
    "mapbox:autocomposite": true,
    "mapbox:groups": {
      "1444849345966.4436": {
        "name": "Roads",
        "collapsed": true
      },
      "1444849334699.1902": {
        "name": "Bridges",
        "collapsed": true
      }
    }
  },
  "sources": {
    "mapbox": {
      "url": "mapbox://mapbox.mapbox-streets-v7",
      "type": "vector"
    }
  },
  "sprite": "mapbox://sprites/mapbox/bright-v8",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "layers": [
    {
      "interactive": true,
      "layout": {
        "line-cap": "round",
        "line-join": "round",
        "visibility": "visible"
      },
      "metadata": {
        "mapbox:group": "1444849345966.4436"
      },
      "filter": [
        "all",
        [
          "in",
          "class",
          "secondary",
          "tertiary"
        ],
        [
          "!in",
          "structure",
          "bridge",
          "tunnel"
        ]
      ],
      "type": "line",
      "source": "mapbox",
      "id": "road_secondary_tertiary_casing",
      "paint": {
        "line-color": "#e9ac77",
        "line-width": {
          "base": 1.2,
          "stops": [
            [
              8,
              1.5
            ],
            [
              20,
              17
            ]
          ]
        },
        "line-opacity": 1
      },
      "source-layer": "road"
    },
    {
      "interactive": true,
      "metadata": {
        "mapbox:group": "1444849345966.4436"
      },
      "id": "road_secondary_tertiary",
      "paint": {
        "line-color": "#fea",
        "line-width": {
          "base": 1.2,
          "stops": [
            [
              6.5,
              0
            ],
            [
              8,
              0.5
            ],
            [
              20,
              13
            ]
          ]
        }
      },
      "ref": "road_secondary_tertiary_casing"
    },
    {
      "interactive": true,
      "layout": {
        "line-join": "round"
      },
      "metadata": {
        "mapbox:group": "1444849334699.1902"
      },
      "filter": [
        "all",
        [
          "==",
          "structure",
          "bridge"
        ],
        [
          "in",
          "class",
          "secondary",
          "tertiary"
        ]
      ],
      "type": "line",
      "source": "mapbox",
      "id": "bridge_secondary_tertiary_casing",
      "paint": {
        "line-color": "#e9ac77",
        "line-width": {
          "base": 1.2,
          "stops": [
            [
              8,
              1.5
            ],
            [
              20,
              17
            ]
          ]
        },
        "line-opacity": 1
      },
      "source-layer": "road"
    },
    {
      "interactive": true,
      "metadata": {
        "mapbox:group": "1444849334699.1902"
      },
      "id": "bridge_secondary_tertiary",
      "paint": {
        "line-color": "#fea",
        "line-width": {
          "base": 1.2,
          "stops": [
            [
              6.5,
              0
            ],
            [
              7,
              0.5
            ],
            [
              20,
              10
            ]
          ]
        }
      },
      "ref": "bridge_secondary_tertiary_casing"
    }
  ]
}

应用于"mapbox://mapbox.mapbox-streets-v7"矢量源，我希望有桥的道路看起来像这样：

因为桥壳和桥是在路壳和道路之后渲染的，所以桥壳的线帽是可见的。但是，我得到以下信息：

我同意在没有桥壳线帽的情况下看起来更好，这可能是用户希望它看起来的样子，但如果实现严格按照规范所说，它是 - 至少对我来说- 意想不到的结果。

我是不是遗漏了什么明显的东西？有人可以解释实现如何处理 z 顺序以及它是否与规范不同或有何不同？

Answer 1

我认为您的问题不是线帽被遮挡——我认为它们根本没有圆形线帽！

如果您希望您的桥梁具有 round line-caps，您必须在图层的布局属性中设置 "line-cap": "round"。

看看这个工作演示 http://jsbin.com/yutewakuwa/edit?html,output

是否有任何未记录的用于绘制道路外壳的 z 顺序魔术？

Is there any undocumented z-order magic for drawing road casings?

mapbox-gl-js