如何在OpenLayers中制作双色虚线样式？

Question

我想添加一个带有两种交替颜色的虚线笔画到OpenLayers中的一个功能。基本上，我想创建一个围绕多边形的双色轮廓，以便无论背景是什么颜色都会显示出来。我希望最终的结果看起来像这样;

我如何定义的OpenLayers那种风格？

Answer 1

Vector层的style属性接受除了单个值以外的值数组，因此您可以使用lineDash创建两个虚线笔划并为它们赋予不同的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] 
});