#openlayers 线图
dows() {
var layer = new VectorLayer({
zIndex: 10
});
var source = new VectorSource();
layer.setSource(source);
this.icingMap.addLayer(layer);
var feature;
let arr = [
[118.507906, 31.689362],
[118.707906, 31.689362]
];
feature = new Feature({
geometry: new LineString(arr)
});
source.addFeature(feature);
var stylesFunction = () => {
let resolution = this.map.getView().getResolution(); //分辨率:一个像素代表的距离
let styles = [];
// 线条样式
let backgroundLineStyle = new Style({
stroke: new Stroke({
color: "green",
width: 10,
}),
});
styles.push(backgroundLineStyle);
let geometry = feature.getGeometry();
// 获取线段长度
const length = geometry.getLength();
// 箭头间隔距离(像素)
const step = 30;
// 将间隔像素距离转换成地图的真实距离
const StepLength = step * resolution;
// 得到一共需要绘制多少个 箭头
const arrowNum = Math.floor(length / StepLength);
const rotations = [];
const distances = [0];
geometry.forEachSegment(function(start, end) {
let dx = end[0] - start[0];
let dy = end[1] - start[1];
let rotation = Math.atan2(dy, dx);
distances.unshift(Math.sqrt(dx ** 2 + dy ** 2) + distances[0]);
rotations.push(rotation);
});
// 利用之前计算得到的线段矢量信息,生成对应的点样式塞入默认样式中
// 从而绘制内部箭头
for (let i = 1; i < arrowNum; ++i) {
const arrowCoord = geometry.getCoordinateAt(i / arrowNum);
const d = i * StepLength;
const grid = distances.findIndex((x) => x <= d);
styles.push(
new Style({
geometry: new Point(arrowCoord),
image: new Icon({
src: "image/x10.png",
opacity: 1,
anchor: [0.75, 0.5],
rotateWithView: false,
// 读取 rotations 中计算存放的方向信息
rotation: -rotations[distances.length - grid - 1],
scale: 0.1,
}),
})
);
}
return styles;
};
feature.setStyle(stylesFunction);
},