Azure Maps加载绘图模块后悬停样式失效、绘制预览线卡顿问题

基础实现情况 #

• 参考官方示例实现了基础地图图钉交互：鼠标悬停在图钉上时，将光标设置为pointer样式，核心实现代码：

this.map.events.add('mouseover', layer, () => this.map.getCanvasContainer().style.cursor = 'pointer');

• 同步绑定了对应的mouseout事件，鼠标移出图钉范围时将光标恢复为grab样式，未加载绘图模块时该功能运行完全正常。
• 项目基于Angular 12开发，为单页应用（SPA），在index页面通过以下方式引入绘图模块资源：

<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script type="text/javascript" src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js" async defer></script>

• 绘图模块初始化仅额外开启了拖拽、旋转相关配置，其余配置均使用默认值，初始化代码如下：

this.drawingManager = new azDrawing.drawing.DrawingManager(this.map, {...});

• 通过编程方式触发多边形绘制模式的代码：

this.drawingManager.setOptions({
  mode: azDrawing.drawing.DrawingMode.drawPolygon
});

加载绘图模块后的异常现象 #

• 光标样式切换失效：检查DOM元素可确认，hover触发时容器的cursor样式仍会正常在pointer和grab之间切换，但页面实际展示的光标样式完全不发生变化。
• 绘制预览渲染卡顿：绘图核心功能可正常运行，但绘制多边形过程中，已点击点位与当前光标位置之间的预览连线无法实时跟随鼠标渲染，仅当鼠标停止移动时才会更新；对比官方示例中预览线平滑跟随鼠标的实时效果，当前实现无该实时渲染能力。

待咨询问题 #

• 该问题的可行排查方向有哪些？
• 定位根因是否需要补充更多项目相关信息？

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