openlayers-16-添加一组轨迹动画

实现一组动画，即根据一组只有起止点坐标的线段，实现点在这些线段上较为平滑的移动，移动速度和平滑程度均可控制。

下面的代码仅作为思路参考，还欠缺很多细节，比如在进行插值计算时，还需要判断经纬度坐标差，选择差值大的作为已知项计算插值，这样会避免一些bug并让计算的插值数据更平滑。还有如何把示例中的圆点改为箭头，并计算箭头的方向与线的走向一致等等一些问题。如果有时间，后期会整理一个更加具体的，可以直接移植使用的demo。

运行结果

在这里插入图片描述

代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>添加箭头动画</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css"/>
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<!-- 地图容器 -->
<div id="mapCon"></div>
<div style="position: absolute;top: 20px;left: 50%;">
    运动速度:<input id="speed" type="range" min="1" max="10" step="1" value="5"/>
    <button id="start-animation">开始</button>
</div>
<script type="text/javascript">
    var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥

    //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
    //source是必填项，用于为图层设置来源。

    //ol.source.XYZ:
    //创建天地图矢量图层
    var TiandiMap_vec = new ol.layer.Tile({
        title: "天地图矢量图层",
        source: new ol.source.XYZ({
            url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
            wrapX: false
        })
    });
    //创建天地图矢量注记图层
    var TiandiMap_cva = new ol.layer.Tile({
        title: "天地图矢量注记图层",
        source: new ol.source.XYZ({
            url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
        })
    });
    //实例化Map对象加载地图
    var map = new ol.Map({
        //地图容器div的ID
        target: 'mapCon',
        //地图容器中加载的图层
        layers: [TiandiMap_vec, TiandiMap_cva],
        //地图视图设置
        view: new ol.View({
            //地图初始中心点（经纬度）
            center: [118.37, 37.14],
            //地图初始显示级别
            zoom: 12,
            projection: "EPSG:4326"
        })
    });

    /**
     * 线性插值
     * @param start 线段开始点的坐标
     * @param end 结束点坐标
     * @param step 步长
     * @returns {*[]}
     */
    function interpolate(start, end, step) {
        const x = start[0] + step * (end[0] - start[0]);
        let num = Math.ceil(Math.abs(end[0] - start[0]) / step);
        let xArr = [];
        setp = end[0] > start[0] ? step : 0 - step;
        for (let i = 1; i < num; i++) {
            xArr.push(start[0] + setp * i);
        }
        //插入起点
        let lonlat = [start];
        for (let i = 0; i < xArr.length; i++) {
            let y = start[1] + (end[1] - start[1]) / (end[0] - start[0]) * (xArr[i] - start[0]);
            lonlat.push([xArr[i], y]);
        }
        //加入终点
        lonlat.push(end);
        return lonlat;
    }

    //构建一组离散化的点（一组线段的起止点）
    var Coordinates = [
        {
            lonlat: [[118.37, 37.14], [118.48, 37.05]]
        },
        {
            lonlat: [[118.46, 37.04], [118.51, 37.06]]
        }
    ];
    //遍历线段，并根据起止点，计算插值数据，用于动画
    let routes = [];//路径对象数组
    for (let i = 0; i < Coordinates.length; i++) {
        const item = Coordinates[i];
        //获取插值数据
        let lonlatArr = interpolate(item.lonlat[0], item.lonlat[1], 0.01);
        //将插值数据构建为Line对象
        let route = new ol.geom.LineString(lonlatArr);
        //获取直线的坐标
        let routeCoords = route.getCoordinates();
        let routeLength = routeCoords.length;

        let routeFeature = new ol.Feature({
            type: 'route',
            geometry: route
        });
        let geoMarker = new ol.Feature({
            type: 'geoMarker',
            geometry: new ol.geom.Point(routeCoords[0])
        });
        routes.push(
            {
                route: route,
                routeCoords: routeCoords,
                routeLength: routeLength,
                routeFeature: routeFeature,
                geoMarker, geoMarker,
                index: 0
            }
        )
    }


    var styles = {
        'route': new ol.style.Style({
            stroke: new ol.style.Stroke({
                width: 6,
                color: [237, 212, 0, 0.8]
            })
        }),
        'icon': new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: "../../images/stationicon.png"
            })
        }),
        'geoMarker': new ol.style.Style({
            image: new ol.style.Circle({
                radius: 7,
                snapToPixel: false,
                fill: new ol.style.Fill({color: 'black'}),
                stroke: new ol.style.Stroke({
                    color: 'white',
                    width: 2
                })
            })
        })
    };

    var animating = false;
    var speed, now;
    var speedInput = document.getElementById('speed');
    var startButton = document.getElementById('start-animation');
    //添加用于展示动画的层
    var vectorSource = new ol.source.Vector();
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: function (feature) {
            //如果动画是激活的就隐藏geoMarker
            if (animating && feature.get('type') === 'geoMarker') {
                return null;
            }
            return styles[feature.get('type')];
        }
    });

    map.addLayer(vectorLayer);
    for (let i = 0; i < routes.length; i++) {
        let item = routes[i];
        vectorSource.addFeature(item.routeFeature);
        vectorSource.addFeature(item.geoMarker);
    }
    var moveFeature = function (event) {
        var vectorContext = event.vectorContext;
        var frameState = event.frameState;

        if (animating) {

            //通过增加速度，来获得lineString坐标
            for (let i = 0; i < routes.length; i++) {
                const item = routes[i];
                var elapsedTime = frameState.time - item.now;
                item.index = Math.round(speed * elapsedTime / 1000);
                if (item.index >= item.routeLength) {
                    //重置时间和各个线段的下标，用于循环
                    item.now = new Date().getTime();
                    item.index = 0;
                    //执行下面两行代码 自动结束动画
                    //stopAnimation(true);
                    //return;
                }

                var currentPoint = new ol.geom.Point(item.routeCoords[item.index]);
                var feature = new ol.Feature(currentPoint);
                vectorContext.drawFeature(feature, styles.geoMarker);
            }

        }
        //继续动画效果
        map.render();
    };

    function startAnimation() {
        if (animating) {
            stopAnimation(false);
        } else {
            animating = true;
            speed = speedInput.value;
            startButton.textContent = '结束运动';
            //隐藏geoMarker
            for (let i = 0; i < routes.length; i++) {
                const item = routes[i];
                item.geoMarker.setStyle(null);
                item.now = new Date().getTime();
            }

            //设置显示范围
            // map.getView().setCenter(center);
            map.on('postcompose', moveFeature);
            map.render();
        }
    }


    /**
     * @param {boolean}结束动画
     */
    function stopAnimation(ended) {
        animating = false;
        startButton.textContent = '开始运动';
        for (let i = 0; i < routes.length; i++) {
            const item = routes[i];
            //如果动画取消就开始动画
            var coord = ended ? item.routeCoords[item.routeLength - 1] : item.routeCoords[0];
            //将各个线段上的点重新定位到起始位置
            (item.geoMarker.getGeometry()).setCoordinates(coord);
        }

        //移除监听
        map.un('postcompose', moveFeature);
    }

    startButton.addEventListener('click', startAnimation, false);
</script>
</body>
</html>