如何在地图框中使地图旋转平滑

Question

我正在尝试在Mapbox-gl js中将地图缓慢旋转到给定的角度。我遇到了两种旋转地图的选项，我找不到缓慢进行旋转的方法。

1. map.rotateTo((

如果我使用map.rotateTo(angle,{duration: 2000})则会收到此错误

camera.js:1065 Uncaught TypeError: this._onEaseFrame is not a function
at r.i._renderFrameCallback (camera.js:1065)
at Oo.run (task_queue.js:52)
at r._render (map.js:2154)
at map.js:2317

如果我将旋转值减少到 0 或 1，旋转会快速/突然而不是缓慢地发生。

var latitude,longitude;
$(document).ready(function(){
longitude = 17.125359;
latitude =  56.989567;
showmap();
});

function showmap(callback){
mapboxgl.accessToken ='';
map = new mapboxgl.Map({
style: 'mapbox://styles/mapbox/streets-v11',
center: [longitude,latitude],
zoom: 17.9,
pitch: 0,
bearing: 0,
container: 'map',
antialias: false,
dragPan: false,
dragRotate: false,
maxZoom: 18.4,
minZoom: 17.3
});
var geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [longitude,latitude]
},
'properties': {
'title': 'Mapbox',
'description': 'Park '
}
}
]
};
map.on('rotate',function(){
map.jumpTo({center: [longitude,latitude]});
});
map.on('load', function() {
// Insert the layer beneath any symbol layer.
console.log("map loaded");
var layers = map.getStyle().layers;
console.log(layers);
var labelLayerId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
labelLayerId = layers[i].id;
break;
}
}
rotTest();

});
}

function rotTest(){
setTimeout(function(){
if(map != undefined){
map.rotateTo(180,{duration:2000});
}
},5000);
}

2. map.setBearing((

在使用固定轴承时，旋转也非常突然。我尝试使用类似map.setBearing().setDuration()的东西，但它导致setDuration()不是一个定义的函数。

由于其余代码是相同的，因此这里是 rotTest(( 函数与map.setBearing()函数的变体。

function rotTest(){
console.log("Inside rotTest");
setTimeout(function(){
if(map != undefined){
map.setBearing(180);
}
},5000);
}

谁能帮助我如何实现这一目标？

Answer 1

处理大多数此类情况的最简单方法是使用easeTo：

map.easeTo({
bearing: angle,
duration: 2000,
easing: x => x
});