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