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

【问题标题】：How do I make a two-color dashed line style in OpenLayers?如何在 OpenLayers 中制作双色虚线样式？
【发布时间】：2017-08-17 16:29:10
【问题描述】：

我想向 OpenLayers 中的功能添加具有两种交替颜色的虚线笔触。基本上，我想在多边形周围创建一个两种颜色的轮廓，这样无论背景是什么颜色都可以显示出来。我希望最终结果看起来像这样；

如何在 OpenLayers 中定义这种风格？

【问题讨论】：

标签： openlayers openlayers-3

【解决方案1】：

Vector 层的样式属性除了接受一个值之外还接受一个值数组，因此您可以使用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]
});

【讨论】：

【解决方案2】：

矢量图层中的样式可以通过样式数组或函数来填充。

定义您的风格

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)'
    })
  })
};

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

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'];       
    }
  }
});

【讨论】：