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

Answer 2

矢量层中的样式可以按样式或函数数组填充。

1. 定义样式

public styles = {
  'Point': new Style({
    image: this.image
  }),
  'LineString': new Style({
    stroke: new Stroke({
      color: 'green',
      lineDash: [4],
      width: 2
    })
  }),
  'Polygon': new Style({
    stroke: new Stroke({
      color: 'blue',
      lineDash: [4],
      width: 3
    }),
    fill: new Fill({
      color: 'rgba(255, 0, 255, 0.1)'
    })
  }),
  'Circle': new Style({
    stroke: new Stroke({
      color: 'red',
      width: 2
    }),
    fill: new Fill({
      color: 'rgba(255,0,0,0.2)'
    })
  })
};

1. 按功能在矢量层中使用上述每种样式

var vector = new VectorLayer({
  source: new VectorSource({}),
  style: (feature, resolution) => {
    switch (feature.getGeometry().getType()){
      case 'Polygon':
        return this.styles['Polygon'];       
      case 'LineString':
        return this.styles['LineString'];       
    }
  }
});