openlayers地图旋转_OpenLayers3学习三：地图旋转及地图跳转到某一点的方式（以类为接口）...

OpenLayers3官网提供的例子：

视图动画View Amimation：http://openlayers.org/en/latest/examples/animation.html

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

淡淡的

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

OpenLayers Map

Zoom out

Zoom in

↻

↺

Pan to London

Elastic to Moscow

Bounce to Istanbul

Spin to Rome

Fly to Bern

Rotate around Rome

Take a tour

进入地图  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);

};