OpenLayersで2色の破線スタイルを作成するにはどうすればよいですか？

Question

OpenLayersのフィーチャーに2つの交互の色を持つ破線のストロークを追加したいとします。基本的には、ポリゴンの周りに2色のアウトラインを作成して、背景がどのような色であっても表示されるようにします。私は最終結果をこのように見せたい。

どのように私は、OpenLayersをでスタイルのようなものを定義することができますか？

Answer 1

ベクトルレイヤのstyleプロパティは、単一の値に加えて値の配列を受け入れます。したがって、lineDashを使用して2つの点線のストロークを作成し、異なるlineDashOffsetの値を与えることができます。

var lightStroke = new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
    color: [255, 255, 255, 0.6], 
    width: 2, 
    lineDash: [4,8], 
    lineDashOffset: 6 
    }) 
}); 

var darkStroke = new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
    color: [0, 0, 0, 0.6], 
    width: 2, 
    lineDash: [4,8] 
    }) 
}); 

このように同じレイヤーに適用します。

var myVectorLayer = new ol.layer.Vector({ 
    source: myPolygon, 
    style: [lightStroke, darkStroke] 
});