Here Map setZoom方法添加缩放过渡时长的技术实现咨询

你当前的代码直接调用setCenter和setZoom未配置动画参数，所以会出现瞬时跳转的效果，可通过API内置的动画配置能力实现可自定义时长的平滑过渡，推荐优先使用setCamera方法一次性配置中心点、缩放等级和动画参数，避免多接口调用的动画不同步问题。

改造后代码实现 #

// 新增duration参数，单位为毫秒，默认值可根据业务需求自定义
public zoomAt(zoom = 11, center: { lat: number; lng: number}, duration = 300) {
    this.map.setCamera({
        zoom: zoom,
        center: center,
        animation: {
            duration: duration,
            // 如需自定义缓动效果可新增easing配置，例如线性动画：easing: (t) => t
        }
    });
}

兼容低版本API方案 #

如果你的项目使用的是3.0及以下版本的Here Map JS API，不支持setCamera方法，可以给原有两个方法分别添加动画参数：

public zoomAt(zoom = 11, center: { lat: number; lng: number}, duration = 300) {
    // 第二个参数为是否开启动画，第三个为动画时长
    this.map.setCenter(center, true, duration);
    this.map.setZoom(zoom, true, duration);
}

注意事项 #

• 动画时长可根据业务场景自由配置，一般建议缩放跨度大时设置更长的时长提升视觉流畅度
• 若需要禁止过渡动画，仅需将duration设为0即可

内容的提问来源于stack exchange，提问作者Tinkerer