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

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

1 个答案: