8-地图切换动画

2020-05-18 本文已影响0人阿健在长安

本博客合集是我的openlayers学习笔记，希望能帮助到刚开始接触openlayers的同学
@commnet 所用openlayers版本：v5.3.0
@commnet 阅读本文前需要对前端知识有一定的了解
@comment 本文内容只提供参考，建议结合openlayers官网的API和examples来学习
@comment 部分代码参考了@老胡

动画即过渡动画，如果没有动画，地图从一个view状态切换到另一个view状态是突变的、死板的，动画能使过渡效果更自然。

本节内容主要用到了view对象的animate方法，下面以实例说明。

创建几个功能测试按钮和一个地图容器

<button id="rotate-left" title="顺时针旋转">↻</button>
<button id="rotate-right" title="逆时针旋转">↺</button>
<button id="pan-to-london">平移到伦敦</button>
<button id="elastic-to-moscow">弹性平移到莫斯科</button>
<button id="bounce-to-istanbul">弹跳平移到伊斯坦布尔</button>
<button id="spin-to-rome">旋转平移到罗马</button>
<button id="rotate-around-rome">绕着罗马旋转</button>
<button id="fly-to-bern">飞行到伯尔尼</button>
<button id="tour">来一段旅行</button>
<div id="map" class="map"></div>

创建地图对象和几个城市的伪墨卡托坐标变量，还有一个为按钮添加点击事件的函数，方便后续调用

var london = ol.proj.fromLonLat([-0.12755, 51.507222]);//伦敦
var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);//莫斯科
var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);//伊斯坦布尔
var rome = ol.proj.fromLonLat([12.5, 41.9]);//罗马
var bern = ol.proj.fromLonLat([7.4458, 46.95]);//柏林

var view = new ol.View({
    center: istanbul,
    zoom: 6
});

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            preload: 4,
            source: new ol.source.OSM()
        })
    ],
    //开启动画时允许加载瓦片数据
    loadTilesWhileAnimating: true,
    view: view
});

function onClick(id, callback) {
    document.getElementById(id).addEventListener('click', callback);
}

通过rotation参数设置地图的旋转动画

在animate中传入想要变化的view的目标参数（如rotation、center），从当前状态变化到目标状态时，如不指定动画类型，地图会使用默认方式渲染动画。

onClick('rotate-left', function() {
    //设置rotation参数的目标值为当前角度顺时针加90度，地图会以默认方式渲染动画
    view.animate({
        rotation: view.getRotation() + Math.PI / 2
    });
});

onClick('rotate-right', function() {
    //设置rotation参数的目标值为当前角度顺时针减90度，地图会以默认方式渲染动画
    view.animate({
        rotation: view.getRotation() - Math.PI / 2
    });
});

入场动画和出场动画

地图过渡的一段动画可以同时包括入场动画和出场动画，在同一animate函数中指定。下面的例子中，入场动画为先慢后快地以罗马为中心、将地图顺时针旋转180度，出场动画为先快后慢地以罗马为中心、继续顺时针旋转至360度。

onClick('rotate-around-rome', function() {
    var rotation = view.getRotation();
    view.animate(
    //入场动画为顺时针旋转180度
    {
        rotation: rotation + Math.PI,
        anchor: rome,//围绕罗马旋转
        easing: ol.easing.easeIn//擦除方式使用先慢后快的ol.easing.easeIn
    }, 
    //出场动画为顺时针旋转360度
    {
        rotation: rotation + 2 * Math.PI,
        anchor: rome,
        easing: ol.easing.easeOut//擦除方式使用先快后慢的ol.easing.easeOut
    });
});

通过center参数设置地图的移动动画

下面的例子展示了地图以默认动画从当前中心点平移到伦敦，动画过程2秒

onClick('pan-to-london', function() {
    view.animate({
        center: london,
        duration: 2000
    });
});

自定义动画

easing可以自定义过渡效果函数，返回值为0-1之间的小数，代表起点到终点的变化进度。下面的例子先定义了一个弹跳动画函数，并使用该函数让地图以弹跳动画从当前中心点平移到伦敦，动画过程2秒

function elastic(t) {
    return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
}

onClick('elastic-to-moscow', function() {
    view.animate({
        center: moscow,
        duration: 2000,
        easing: elastic
    });
});

综合应用1

下面的例子展示了地图从当前中心点旋转、平移到罗马，前半程为入场动画，后半程为出场动画

onClick('spin-to-rome', function() {
    var center = view.getCenter();
    view.animate({
        center: [
            center[0] + (rome[0] - center[0]) / 2,
            center[1] + (rome[1] - center[1]) / 2
        ],
        rotation: Math.PI,
        easing: ol.easing.easeIn
    }, {
        center: rome,
        rotation: 2 * Math.PI,
        easing: ol.easing.easeOut
    });
});

并发执行

如果给一个过程设置了多个动画，他们都是并行执行的。下面的动画类似于一只鸟的视角，从当前中心点移动到另一个中心点（动画1），并且前半程缩小视角、后半程回到原视角（动画2）。

function flyTo(location, done) {
    var duration = 2000;
    var zoom = view.getZoom();
    var parts = 2;
    var called = false;

    function callback(complete) {
        --parts;
        if (called) {
            return;
        }
        if (parts === 0 || !complete) {
            called = true;
            done(complete);
        }
    }
    view.animate({
        center: location,
        duration: duration
    }, callback);
    view.animate({
        zoom: zoom - 1,
        duration: duration / 2
    }, {
        zoom: zoom,
        duration: duration / 2
    }, callback);
}

onClick('fly-to-bern', function() {
    flyTo(bern, function() {});
});

综合应用2

下面的例子使用上面创建的“鸟视角飞跃函数”，在多个城市之间跳跃

function tour() {
    var locations = [london, bern, rome, moscow, istanbul];
    var index = -1;

    function next(more) {
        if (more) {
            ++index;
            if (index < locations.length) {
                var delay = index === 0 ? 0 : 750;
                setTimeout(function() {
                    flyTo(locations[index], next);
                }, delay);
            } else {
                alert('Tour complete');
            }
        } else {
            alert('Tour cancelled');
        }
    }
    next(true);
}

onClick('tour', tour);

本节测试用例的界面如下

8-地图切换动画

猜你喜欢

热点阅读