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

Question

根据Mapbox-GL Style Spec，按照样式json的"layers"数组指定的顺序绘制图层。让我们假设bright-v8样式的一个子集只有四层，以获得带有外壳的二级/三级道路和桥梁：

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