OpenLayers学习三:地图旋转及地图跳转到某一点的方式(以类为接口)

OpenLayers官网提供的例子:视图动画


上面例子中,除了飞行到某点不好理解,其他都非常好理解,以下直接贴所有的方法,解释都在代码中。


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 viewAnimate = map.getView();

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

onClick('rotate-left', function () {
    viewAnimate.animate({
        rotation: viewAnimate.getRotation() + Math.PI / 2
    });
});

onClick('rotate-right', function () {
    viewAnimate.animate({
        rotation: viewAnimate.getRotation() - Math.PI / 2
    });
});

onClick('rotate-around-rome', function () {
    viewAnimate.animate({
        rotation: viewAnimate.getRotation() + 2 * Math.PI, //地图旋转角度
        center: rome
    });
});

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

onClick('elastic-to-moscow', function () {
    viewAnimate.animate({
        center: moscow,
        duration: 2000,
        easing: function (t) {
            return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
        }
    });
});

onClick('bounce-to-istanbul', function () {
    viewAnimate.animate({
        center: istanbul,
        duration: 2000,
        easing: function (t) {
            var s = 7.5625, p = 2.75, l;
            if (t < (1 / p)) {
                l = s * t * t;
            } else {
                if (t < (2 / p)) {
                    t -= (1.5 / p);
                    l = s * t * t + 0.75;
                } else {
                    if (t < (2.5 / p)) {
                        t -= (2.25 / p);
                        l = s * t * t + 0.9375;
                    } else {
                        t -= (2.625 / p);
                        l = s * t * t + 0.984375;
                    }
                }
            }
            return l;
        }
    });
});

onClick('spin-to-rome', function () {
    viewAnimate.animate({
        center: rome,
        rotation: 2 * Math.PI,
        duration: 2000
    });
});

function flyTo(location, done) {
    var duration = 2000;
    var zoom = viewAnimate.getZoom();
    var parts = 1; // 判断下列两个动画效果是否都执行完毕
    var called = false; // ? 未懂

    function callback(complete) {
        --parts;
        if (called) {  //此处的parts和called是什么意思没看懂
            console.log(1);  //调试用的,非正是代码
            return;
        }
        if (parts === 0 || !complete) { //动画效果完成 或 动画效果中断 complete是内部传入参数,判断动画执行还是中断
            called = true;
            done(complete); //动画效果完后执行的函数
        }
    }
    //第一个动画效果 到达目的点
    //第二个动画效果 执行放大缩小
    //两个动画换位,则两个先放大缩小,在转到目的点
    viewAnimate.animate({
        center: location,
        duration: duration
    }, callback);
    viewAnimate.animate({
        zoom: zoom + 5,
        duration: duration / 2
    }, {
        zoom: zoom - 1,
        duration: duration / 2
    },{
        zoom: zoom,
        duration: duration / 2
    }, callback);
}

onClick('fly-to-bern', function () {
    //自动产生一个boolean值传入函数中作为参数 完成则为true 中断为false
    //tour里向flyTo传入了回调函数,因此此处调用时不能空参,functions(){}此处无意义
    flyTo(bern, function () {});
});

onClick('tour', function () {
    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);
});

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>OpenLayers Map</title>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <script src="ol.js"></script>
    <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
    
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>
    
    <button id="rotate-left" title="Rotate clockwise">↻</button>
    <button id="rotate-right" title="Rotate counterclockwise">↺</button>
    <button id="pan-to-london">Pan to London</button>
    <button id="elastic-to-moscow">Elastic to Moscow</button>
    <button id="bounce-to-istanbul">Bounce to Istanbul</button>
    <button id="spin-to-rome">Spin to Rome</button>
    <button id="fly-to-bern">Fly to Bern</button>
    <button id="rotate-around-rome">Rotate around Rome</button>
    <button id="tour">Take a tour</button>
    
    <script type="text/javascript" src="Accessible Map.js"></script>
    <script type="text/javascript" src="View Animation.js"></script>
    
</body>
</html>

进入地图  Accessible Map.js

var view = new ol.View({
    center: [0, 0],
    zoom: 6
})

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
        attribution: false//来源
    }),
    view: view,
});

//每次都要获取当前地图所在级别
document.getElementById('zoom-out').onclick = function() {
    var view = map.getView();
    var zoom = view.getZoom();
    view.setZoom(zoom - 1);
};

document.getElementById('zoom-in').onclick = function() {
    var view = map.getView();
    var zoom = view.getZoom();
    view.setZoom(zoom + 1);
};


下载完整代码openlayers-exercise

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值