请注意:这个方法无法解决两条及两条以上线完全重叠时产生的bug。
let newFeature = new ol.Feature({
geometry: new olGeom.LineString(coordinates),
name
});
let geometry = newFeature.getGeometry();
let styles = (_, resolutions)=>{
let s = [
new olStyle.Style({
color,width
})
];
let radio = (50 * resolution) / geometry.getLength();
let dradio = 1;
for (let i = 0; i <= 1; i += radio){
let arrowLocation = geometry.getCoordinateAt(i);
geometry.forEachSegment(function (start, end){
// 避免图标离两端过近
if (i < radio / 2 || i > 1-radio / 2) return;
if (start[0] === end[0] || start[1] === end[1]) return;
let dx1 = end[0] - arrowLocation[0];
let dy1 = end[1] - arrowLocation[1];
let dx2 = arrowLocation[0] - start[0];
let dy2 = arrowLocation[1] - start[1];
if (dx1 !== dx2 && dy1 !== dy2){
if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 *dy1) <0.001){
// 图标的朝向
let y = end[1] - start[1];
let x = end[0] - start[0];
let rotation = Math.atan(y / x);
if ((y <= 0 && x >= 0) || (x >= 0 && y >= 0)){
// 第一二象限
rotation = -rotation;
}else if ((x<= 0 && y >= 0) || (x <= 0 && y <= 0)){
rotation = Math.PI - rotation;
}
// 添加图标
s.push(
new olStyle.Style({
geometry: new olGeom.Point(arrowLocation),
image: new olStyle.Icon({
scale: width / 64 // 路网宽度 ÷ 图片大小,图标和路网宽度一样大小,
src: svgUrl,
anchor: [0.7, 0.5],
rotationWithView: false,
rotation: totation
})
})
);
}
}
});
}
// 添加起点、终点图标
s.push(
new olStyle.Style({
geometry: new olGeom.Point(position1),
image: new olStyle.Icon({
src: startUrl,
anchor: [0.5, 1]
})
}),
new olStyle.Style({
geometry: new olGeom.Point(position2),
image: new olStyle.Icon({
src: endUrl,
anchor: [0.5, 1]
})
})
)
}
newFeature.setStyle(styles);