OpenLayersの線の後ろの描画点

Question

OpenLayers 4を使用してマップを作成しようとしています。

私は線と点を含むベクトルタイルをいくつか持っています。線は道路を表し、点はロータリーを表します。私がしようとしているのは、ケーシングで道路を描き、ケーシングでもラウンドアバウトを描くことですが、道路の後ろに現れるロータリーのケーシングを使っています。それは意味をなさないでしょうか？ :)

は、ここで私は、現時点では取得していますものです：

お知らせそれらの周りのストロークが道路と交差するかロータリーに？それが私が避けようとしていることです。

道路がこれと同様にスタイルされています

const road = [ 
    new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: '#505050', 
     width: 2 
    }), 
    zIndex: 2 
    }), 
    new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: '#ffffff', 
     width: 20 
    }), 
    zIndex: 3 
    }) 
]; 

私は私の例を複雑にしないようにと自分のタイプなどに基づいて、道路の色を削除するには、ややそれを簡略化してきました。

ロータリーはこれに同様にスタイルされる：再び

const roundabout = [ 
    new ol.style.Style({ 
    image: new ol.style.Circle({ 
     radius: 20, 
     fill: new ol.style.Fill({ 
     color: '#ffffff' 
     }), 
    }), 
    zIndex: 1 
    }), 
    new ol.style.Style({ 
    image: new ol.style.Circle({ 
     radius: 18, 
     fill: new ol.style.Fill({ 
     color: '#ffffff' 
     }), 
    }), 
    zIndex: 4 
    }) 
]; 

、ちょうど同じ時点再描画も小さいラウンドアバウトの真ん中に余分な円を含まないように簡略化。

ラウンドアバウトケーシングが最初に描画され、次に道路ケーシング、次に道路充填、そして最後にラウンドアバウト充填が行われる必要があります。これは、道路の充填と回り道の充填が1本の連続した線として現れる効果と、道路の交差点を横切ることなく回り道を回るケーシングを与えるはずです。

問題は、私がラウンドアバウトのために設定している値がまったく効果がないように見えることです。私がそれらを何に変更しても、道路の線の後ろに描かれるポイント（ケーシングまたは塗りつぶし）の一部を得ることはできません。私は道のためにzIndexを変更することができます。例えば、どれくらい大きな数字を選んでも、塗りの前にケーシングが描かれます。私はラウンドアバウトの前に道路を描くことはできません！

どのように私はこれを修正し、私がそれらをしたいと思うポイント図面を得ることができる任意のアイデア？

おかげで、

ディラン

Answer 1

デフォルトでは、OpenLayersを、ベクトルとしてポイント（すなわち、あなたのロータリー）をレンダリングしますが、画像へのライン（すなわち、あなたの道を）事前にレンダリングします。これはol.layer.VectorTileのrenderModeオプションを使用して制御できます。デフォルトは'hybrid'です。

同じパスで（zIndexを尊重するために）点と線をレンダリングするには、renderMode: 'image'またはrenderMode: 'vector'でol.layer.VectorTileを設定します。