ロードケーシングを描くための、文書化されていないzオーダーの魔法はありますか？

Question

Mapbox-GL Style Specによれば、スタイルjsonの配列"layers"によって指定された順序でレイヤーが描画されます。のは、ケーシングと三次/二次道路や橋を取得するために、わずか4層で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