在 Bing 地图中平滑放大缩小

Question

我有 Angular 4 应用程序和集成的 Bing 地图来在图钉中显示信息。

我做了很多谷歌搜索，但找不到在 Bing 地图中进行平滑放大缩小操作的解决方案。

每当我尝试通过鼠标滚轮或单击地图上的 (+) (-) 按钮进行放大缩小时，我都会在地图上看到下面模糊和粘滞的图像。

我还检查了互联网速度，它已经足够了（100 mbps）。我还没有在 mousewheelchanged 事件上写任何代码。

附上缩放操作时模糊地图的截图。

简而言之，我正在寻找像谷歌提供的平滑放大缩小操作。

Answer 1

我仍然没有在 BingMap 中找到缩放问题的合适解决方案，但我遇到了以下 MSDN 社区论坛问题，该问题由 Ricky Brundritt 回答。

https://social.msdn.microsoft.com/Forums/en-US/93a2d940-d468-4e70-a06e-610c04105022/set-zoom-level-with-setview-with-animation-in-v8?forum= bingmapsajax

根据 rbrundritt Bing Map V8 使用 HTML5 画布并要求绘制每一帧。这使得动画很难流畅。

但似乎微软已经在他们最新的Azure Maps Web Control中处理了Bing Map挑战。

Answer 2

经过大量搜索，我能够通过从谷歌地图中复制一个例子得到一个流畅的动画。该示例使用 TweenJs，但请注意该页面似乎链接到错误的 tween 库。我能够使用以下 TweenJs 使其工作：https://github.com/tweenjs/tween.js.

就我而言，我希望在选择图钉后获得平滑的地图居中动画。我认为您应该能够毫无问题地调整以下缩放。

我还必须报告输出动画在移动地图时很流畅，但是地图顶部的任何 Bing 标签（包括图钉和地名）并不总是精确地跟随移动：有时标签会在地图动画之后呈现已经移动到下一帧，导致标签的动画断断续续。真可惜。

function pushpinClicked(e)
{
    let selectedPin = e.target;
    DotNet.invokeMethodAsync('MauiBlazorApp', 'SetCoordinates', e.target.getLocation());
    selectedPin.setOptions({ color: 'red' });

    const mapLocationZoom = { center: map.getCenter() };

    new TWEEN.Tween(mapLocationZoom) // Create a new tween that modifies 'cameraOptions'.
        .to({ center: e.target.getLocation() }, 1000) // Move to destination in 1 second.
        .easing(TWEEN.Easing.Cubic.Out) // Use an easing function to make the animation smooth.
        .onUpdate(() => {
            map.setView(mapLocationZoom);
        })
        .start(); // Start the tween immediately.

    // Setup the animation loop.
    function animate(time) {
        TWEEN.update(time);
        requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);
}