Azure Maps动画在TypeScript项目中报错：EventEmitter与play方法未找到

问题概述 #

• 项目启动时浏览器控制台报错：Cannot read properties of undefined (reading 'EventEmitter')
• 触发动画play()方法时报错：Cannot read properties of undefined (reading 'play')
• 尝试将动画实例转换为atlas.animations.PlayableAnimation类型时，TypeScript提示：'atlas.animations.PlayableAnimation' refers to a value, but is being used as a type here. Did you mean 'typeof atlas.animations.PlayableAnimation'

用户曾尝试手动合并命名空间，但问题未解决：

import * as azmaps from 'azure-maps-control'
import * as azanimations from 'azure-maps-animations'

namespace atlas { 
    export const AuthenticationType = azmaps.AuthenticationType; 
    export const Map = azmaps.Map; 
    export const source = azmaps.source; 
    export const layer = azmaps.layer; 
    export const data = azmaps.data; 
    export const Shape = azmaps.Shape; 
    export const animations = azanimations.animations; 
}

解决方案 #

1. 修复EventEmitter未定义错误 #

azure-maps-animations依赖azure-maps-control的内部EventEmitter，手动合并命名空间会断开这种依赖关联。正确方式是让动画库自动扩展控件的atlas命名空间：

// 导入核心控件库
import * as atlas from 'azure-maps-control';
// 导入动画库，自动扩展atlas命名空间
import 'azure-maps-animations';

2. 修复play()方法调用错误 #

避免将动画实例声明为any类型，同时确保地图实例初始化完成后再创建动画：

// 初始化地图实例
const map = new atlas.Map('map-container', {
    authOptions: {
        authType: atlas.AuthenticationType.subscriptionKey,
        subscriptionKey: '你的密钥'
    }
});

// 声明动画实例时指定正确类型
let anim: atlas.animations.PlayableAnimation;

// 地图就绪后创建动画
map.events.add('ready', () => {
    anim = atlas.animations.moveAlongRoute(routePoints, {
        map: map,
        // 其他动画配置项
    });
});

// 调用play方法
function startAnimation() {
    anim?.play();
}

3. 解决类型转换提示问题 #

若需类型断言，需使用typeof引用类的类型：

// 错误写法
anim = atlas.animations.moveAlongRoute(...) as atlas.animations.PlayableAnimation;

// 正确写法
anim = atlas.animations.moveAlongRoute(...) as typeof atlas.animations.PlayableAnimation;

核心说明 #

• azure-maps-animations原生支持自动扩展azure-maps-control的atlas命名空间，手动合并会破坏内部依赖链
• 必须等待地图ready事件触发后再创建动画，避免因地图未初始化导致动画实例创建失败

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