老规矩,先上效果图(只需看黄色箭头样式就行)
实现方法也很简单,具体如下:
// line就是线条两边的坐标
const lineArrow = [
{
name: '浙奉渔19001',
type: 1,
line: [[13739180.61760428, 3867806.8497407753], [13753601.705080839, 3864763.0546381413]]
},
{
name: '中国海监7018',
type: 2,
line: [[13746408.59354844, 3872287.6211607265], [13754948.401795218, 3866382.9561385084]]
},
{
name: '浙岱渔06423',
type: 1,
line: [[13764890.343228461, 3873362.5145883015], [13757755.785627745, 3867978.732211734]]
},
{
name: '东海救101',
type: 2,
line: [[13766958.941841919, 3868072.8124196446], [13759617.524379842, 3866116.9934596373]]
},
{
name: '中国海监7008',
type: 2,
line: [[13767786.38128729, 3860980.4743164163], [13757489.822948873, 3864373.4603425944]]
}
]
//然后通过LineString绘制线条
for (var i = 0; i < lineArrow.length; i++) {
var feature = new Feature({
geometry: new LineString(lineArrow[i].line),
name: lineArrow[i].name
})
bezierFeatures.push(feature)
}
const bezierSource = new VectorSource({
features: bezierFeatures
})
const bezierLayer = new VectorLayer({
source: bezierSource,
zIndex: 1001,
style: this.bezierStyle
})
this.map.addLayer(bezierLayer)
重点是箭头的样式,首先准备一张箭头图片,然后通过样式加到线条头部
geometry.forEachSegment(function(start, end) {
const dx = end[0] - start[0]
const dy = end[1] - start[1]
//计算箭头图片旋转角度
const rotation = Math.atan2(dy, dx)
styles.push(
设置图片位置
new Style({
geometry: new Point(end),
image: new Icon({
src: require('@/assets/images/shipIcon/line-arrow.png'),
opacity: 1,
anchor: [0.5, 0.5],
rotateWithView: true,
rotation: -rotation,
scale: 1
})
})
)
})
//设置线段样式
styles.push(
new Style({
stroke: new Stroke({
color: '#FFD966',
width: 3,
lineDash: [20, 8, 1, 8]
})
})
)
}
return styles
完整代码
createBezierPointers() {
const lineArrow = [
{
name: '浙奉渔19001',
type: 1,
line: [[13739180.61760428, 3867806.8497407753], [13753601.705080839, 3864763.0546381413]]
},
{
name: '中国海监7018',
type: 2,
line: [[13746408.59354844, 3872287.6211607265], [13754948.401795218, 3866382.9561385084]]
},
{
name: '浙岱渔06423',
type: 1,
line: [[13764890.343228461, 3873362.5145883015], [13757755.785627745, 3867978.732211734]]
},
{
name: '东海救101',
type: 2,
line: [[13766958.941841919, 3868072.8124196446], [13759617.524379842, 3866116.9934596373]]
},
{
name: '中国海监7008',
type: 2,
line: [[13767786.38128729, 3860980.4743164163], [13757489.822948873, 3864373.4603425944]]
}
]
const bezierFeatures = []
for (var i = 0; i < lineArrow.length; i++) {
var feature = new Feature({
geometry: new LineString(lineArrow[i].line),
name: lineArrow[i].name
})
bezierFeatures.push(feature)
}
const bezierSource = new VectorSource({
features: bezierFeatures
})
const bezierLayer = new VectorLayer({
source: bezierSource,
zIndex: 1001,
style: this.bezierStyle
})
this.map.addLayer(bezierLayer)
},
bezierStyle(feature) {
const geometry = feature.getGeometry()
const featureType = feature.getGeometry().getType()
const styles = []
geometry.forEachSegment(function(start, end) {
const dx = end[0] - start[0]
const dy = end[1] - start[1]
const rotation = Math.atan2(dy, dx)
styles.push(
new Style({
geometry: new Point(end),
image: new Icon({
src: require('@/assets/images/shipIcon/line-arrow.png'),
opacity: 1,
anchor: [0.5, 0.5],
rotateWithView: true,
rotation: -rotation,
scale: 1
})
})
)
})
styles.push(
new Style({
stroke: new Stroke({
color: '#FFD966',
width: 3,
lineDash: [20, 8, 1, 8]
})
})
)
return styles
},