Быстрая и плавная прокрутка с помощью Google Maps API?

Question

Я работаю над приложением реагирования, в котором мы используем карты Google. Цель, которую мы хотим достичь, - сделать прокрутку карты максимально быстрой и плавной, а в идеале - максимально приближенной к прокрутке векторной карты jslancerteam, которую можно найти здесь: https://jslancerteam.github.io/crystal-dashboard/#/maps/vector-map. Под быстрым я подразумеваю пропуск некоторых уровней масштабирования на прокрутку колесика мыши, как видно на векторной карте выше.

Я перепробовал много вещей, которые нашел в Интернете, но самое близкое, что я получил, было отключение опции карты по умолчанию с колесом прокрутки и попытка создать пользовательскую функцию, вызываемую при каждой прокрутке колесика мыши, захваченной слушателем.

Я пробовал два разных подхода, один из которых - добавление целочисленного значения z в качестве приращения к уровню масштабирования карты (я думаю, нам нужно значение от 2 до 3 уровней для каждой прокрутки.). Я сам написал второй подход, и идея заключалась в том, чтобы дать разные множители для уровня масштабирования карты в зависимости от значения текущего уровня масштабирования. (Например, более быстрый zoomIn, если у вас низкий уровень масштабирования, и более медленный, если вы уже довольно увеличенный. Противоположность верна для zoomOut.).

Хотя я думаю, что второй подход может стать плавным, к сожалению, я не верю, что карты Google могут достичь такой же плавности и быстрой прокрутки, как в примере векторных карт.

На картах Google каждый слой (плитки) будет отображаться (серые плитки), даже если вы пытаетесь увеличить уровень масштабирования на большое значение на каждом свитке, потому что они обслуживаются по требованию. При плавной прокрутке колесика мыши результаты близки к желаемым. При быстрой прокрутке колесика мыши плитки карты не успевают визуализироваться

С другой стороны, мы считаем, что другие библиотеки не визуализируют указанные слои, и поэтому у них возникает такое плавное ощущение.

К сожалению, приложение очень зависит от карт и имеет множество базовых функций, построенных вокруг них, поэтому мы хотели бы избежать перехода на другую библиотеку карт, если мы сможем сделать это на данный момент.

// Need to point out that in some other point in the app
// the scrollwheel map option is set to false and
// the max zoom level is set to 22 


//
//1st Approach
//

// Having disabled the default scrollwheel i wanted to 
// make the custom scroll follow the mouse 
// so i get the coordinates of the mouse through a listener
// and then i set it as the center of the map on every scroll

     maps.event.addListener(map, 'mousemove', function (event) {
                displayCoordinates(event.latLng);               
            });

  let displayCoordinates=function (pnt) {

            var lat = pnt.lat();
            lat = lat.toFixed(4);
            var lng = pnt.lng();
            lng = lng.toFixed(4);
            mouselatlng =new LatLng(lat,lng)
        }

// the listener used to capture the mousewheel scroll
maps.event.addDomListener(map.getDiv(), 'mousewheel', fx);

// the function called on every scroll
// depending if you zoomIn or zoomOut
// a z is added to the zoom level of the map to replicate
// the zoom functionality

let fx = function(e) {
              e.preventDefault();
              map.setCenter(mouselatlng); //setting the mouse coords as center


//
// increase by 3 levels on zoomIn : decrease by 3 (-3) on zoomOut
//
              var z = e.wheelDelta > 0 || e.detail < 0 ? 3 : -3;
              map.setZoom(Math.max(0, Math.min(22, map.getZoom() + z)));
              setTimeout(()=>{
                  map.setZoom(map.getZoom + z);
              },80)
              return false;
           };



//
//2nd Approach
//

maps.event.addListener(map, 'mousemove', function (event) {
                displayCoordinates(event.latLng);               
            });



let displayCoordinates=function (pnt) {

            var lat = pnt.lat();
            lat = lat.toFixed(4);
            var lng = pnt.lng();
            lng = lng.toFixed(4);
            mouselatlng =new LatLng(lat,lng)
        }



 maps.event.addDomListener(map.getDiv(), 'mousewheel', fx);

  let fx = function(e) {
                e.preventDefault();
                map.setCenter(mouselatlng);


             // Using different multipliers for some zoom levels
             // the logic is not finished and the numbers used are not
             // final. This was a test to see if the multipliers could 
             // make a difference.

                if(map.getZoom >= 10){
                    var z = e.wheelDelta > 0 || e.detail < 0 ? 1.1 : 0.91;
                }
                else if ((map.getZoom >= 7)){
                    var z = e.wheelDelta > 0 || e.detail < 0 ? 1.2 : 0.7;
                }else{
                    var z = e.wheelDelta > 0 || e.detail < 0 ? 1.4 : 0.6;
                }

                map.setZoom(Math.max(0, Math.min(22, map.getZoom() * z)));
                return false;
            };