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 = 77.125359;
  latitude =  28.707624;
  showmap();
});


function showmap(callback){
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFzaDEyIiwiYSI6ImNrNzBhMHc2aTFhMnkza3J2OG51azV6aW0ifQ.1FeBAzRjqkSQex-u-GiPyw';
    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（）

在使用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
});

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

1 个答案: