You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在OpenLayers中实现带箭头标记的线串动画?

求助:OpenLayers实现带箭头标记的线串动画

我已经能基于数据在地图上绘制线串,但想实现带箭头标记的线串动画(如附图所示),恳请OpenLayers社区的各位帮忙解决此问题。

我的myLayerFeature中存储着一组带坐标的要素列表,目前通过循环遍历每个要素来绘制线条,并参考要素移动动画的实现逻辑添加箭头图像,相关代码如下:

遍历要素调用动画函数

$(myLayerFeature).each((index, mapitem1) => {
    moveArrowOnLine(mapitem1.geometry);
});

箭头动画核心函数

function moveArrowOnLine(geometry) {
    debugger
    var startCoordinates = geometry.coordinates[0];
    var endCoordinates = geometry.coordinates[1];

    const startMarker = new ol.Feature({
        type: 'icon',
        geometry: new ol.geom.Point(startCoordinates),
    });
    const endMarker = new ol.Feature({
        type: 'icon',
        geometry: new ol.geom.Point(endCoordinates),
    });
    const position = startMarker.getGeometry().clone();
    const geoMarker = new ol.Feature({
        type: 'geoMarker',
        geometry: position,
    });

    const styles = {
        'route': new ol.style.Style({
            stroke: new ol.style.Stroke({
                width: 6,
                color: [237, 212, 0, 0.8],
            }),
        }),
        'geoMarker': new ol.style.Style({
            image: new ol.style.Icon({
                scale: -0.04,
                anchor: [0, 0.8],
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                opacity: 1,
                projection: '3857',
                src: './images/left-arrow.png',
            }),
            image: new ol.style.Circle({
                radius: 20,
                fill: new ol.style.Fill({ color: 'red' }),
                stroke: new ol.style.Stroke({
                    color: 'black',
                    width: 2,
                }),
            }),
        }),
    };

    const vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [geoMarker, startMarker, endMarker],
        }),
        style: function (feature) {
            return styles[feature.get('type')];
        },
    });
    map.addLayer(vectorLayer);
    startAnimation();
}

内容的提问来源于stack exchange,提问作者Sanjay Singh

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.11 23:10:31