openlayer绘制线段并添加等距离箭头

最新推荐文章于 2024-05-20 23:42:13 发布

sisimi_43966973

最新推荐文章于 2024-05-20 23:42:13 发布

阅读量187

点赞数

分类专栏： vue+openlayer 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_43966973/article/details/137112988

版权

vue+openlayer 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

箭头图片

一定得是此方向的箭头
在这里插入图片描述

核心代码

function stylefunction (feature) {
	const geometry = feature.getGeometry()
    // 轨迹地理长度
    const totalLength = geometry.getLength()
    // 像素间隔步长
    let step = 100
    // 将像素步长转实际地理距离步长
    let StepLength = step * resolution
    // 箭头总数
    let arrowNum = Math.floor(totalLength / 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 ++) {
        let arrow_coor = geometry.getCoordinateAt(i * 1.0 / arrowNum)
        const d = i * StepLength;
        const grid = distances.findIndex((x) => x <= d);
        styles.push(
            new Style({
                geometry: new Point(arrow_coor),
                image: new Icon({
                    src: trackArrow,
                    opacity: 1,
                    anchor: [0.5, 0.5],
                    rotateWithView: true,
                    rotation: - rotations[distances.length - grid - 1],
                    scale: 0.8
                })
            })
        )
    }
}