openlayers画虚线 (十四)

在openlayers中画虚线主要是通过设置Style对象中Stroke里的lineDash属性来实现，lineDash在官网文档描述中很模糊，只说了它是一个数组，再尝试后发现规律过来记录一下这个属性。

lineDash数组可以任意长度，它的奇数代表线的长度，偶数代表间隙长度。通过这个规则，就可以画出各种规则的虚线，如以下效果：

再举个例子：lineDash: [20, 10, 40, 20]

代码如下：

// 创建线因素
const wireFeature = new Feature({
     
  geometry: new LineString([
    transform([121.501842, 31.239204], 'EPSG:4326', 'EPSG:3857'),
    transform([121.506337, 31.238305], 'EPSG:4326', 'EPSG:3857'),
    transform([121.506606, 31.235846], 'EPSG:4326', 'EPSG:3857'),
    transform([121.500243, 31.236103], 'EPSG:4326', 'EPSG:3857'),
  ]),
})
// 创建线样式
const wireStyle = new Style({
     
  stroke: new Stroke({
     
    width: 2,
    color: '#000000',
    lineDash: [20, 10, 40, 20], // 重点在这
  }),
})
// 样式添加进因素中
wireFeature.setStyle(wireStyle)
// 在地图中显示
this.map.addLayer(new VectorLayer({
     
  source: new VectorSource({
     
    features: [wireFeature],
  }),
}))