如何在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]
});