openlayers画虚线 (十四)-蒲公英云

openlayers画虚线 (十四)

我就是我 2022-12-24 02:53 853阅读 0赞

在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],
  }),
}))