美文网首页开源GIS文章集GIS
Openlayers3官网实例一(动画)

Openlayers3官网实例一(动画)

作者: 拜拜都不行啊 | 来源:发表于2016-12-10 12:18 被阅读390次

    一、动画实例代码

    var view = new ol.View({
        center:new ol.proj.fromLonLat([120,33]),
        zoom: 3,
        maxZoon: 15,
        minZoom: 3,
        logo:false
    });
    
    var googleMapSource = new ol.source.XYZ({
        url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
    });
    var googleLayer = new ol.layer.Tile({
        source: googleMapSource
    });
    
    
    var map = new ol.Map({
        view: view,
        layers: [googleLayer],
        target:"map"
    });
    
    //实现旋转动画
    var rotate = document.getElementById("rotate");
    rotate.addEventListener("click", function() {
        var rotateAnitation =ol.animation.rotate({
            rotation: Math.PI*2,//本参数单位是弧度,设置为旋转一周
            anchor: view.getCenter(),//指定围绕哪一个点进行旋转,默认未然中心点
            duration: 2000//动画总共花费时间单位是毫秒
        });
        map.beforeRender(rotateAnitation);
    });
    
    var bounce = document.getElementById("bounce");//实现弹跳效果
    bounce.addEventListener("click", function() {
        var bounceAnimation = ol.animation.bounce({
            resolution: view.getResolution()*2,//根据分辨率缩放或者放大到的级别
            duration:2000
        });
        map.beforeRender(bounceAnimation);
    });
    
    var pan = document.getElementById("pan");
    pan.addEventListener("click",function() {
        var panAnimation = ol.animation.pan({
            source: view.getCenter(),//此处为移动到的起始点,既从此处移动到下一处的点
            duration: 2000
        });
        map.beforeRender(panAnimation);
        view.setCenter(new ol.proj.fromLonLat([120, 23]));
        view.setZoom(10);
    }, false);
    
    var flyTo = document.getElementById("flyTo");
    flyTo.addEventListener("click", function () {
        var flyPan = ol.animation.pan({
            source: view.getCenter(),
            duration:2000
        });
        var flyBounce = ol.animation.bounce({
            resolution: view.getResolution() * 2,
            duration:2000
        });
    
        map.beforeRender(flyPan, flyBounce);
        view.setCenter(new ol.proj.fromLonLat([111,24]));
    }, false);
    
    
    var easing = document.getElementById("easing");
    easing.addEventListener("click", function() {
        var easingPan = ol.animation.pan({
            source: view.getCenter(),
            duration: 2000,
            easing: ol.easing.linear
        });
        map.beforeRender(easingPan);
        view.setCenter(new ol.proj.fromLonLat([111,27]));
    });
    

    二、关于动画中easing的用法

    var easingFunc = document.getElementById("easingFunc");
    easingFunc.addEventListener("click", function () {
        function myAnitation(t) {
            var z = 0;
            if (t <= 0.5) {
                z = -2 * t + 1;//y=-2x+1;
            } else {
                z = 2 * t - 1;//y=2*x-1
            }
            console.log(z);
            return z;
        }
    
        var easingPan = ol.animation.pan({
            source: view.getCenter(),
            duration: 2000,
            easing: myAnitation
        });
        map.beforeRender(easingPan);
        view.setCenter(new ol.proj.fromLonLat([111, 27]));
    });
    

    总结

      easing参数是一个函数类型,其返回范围是[0,1],我们可以写一些曲线或者直线的函数来控制,地图怎么进行动画;返回1就是到达目标点,返回0是在起始点。在此,感谢

    相关文章

      网友评论

        本文标题:Openlayers3官网实例一(动画)

        本文链接:https://www.haomeiwen.com/subject/lhokmttx.html