Azure Maps如何将line layer线图层设置为可编辑模式？

你现有代码只实现了线图层的基础渲染，缺少绘图交互管理器的挂载逻辑，以下是完整的可编辑功能补全代码：

完整实现代码 #

// 地图初始化完成后执行所有逻辑
map.events.add('ready', function() {
    //Create a data source and add it to the map.
    var dataSource = new atlas.source.DataSource();
    map.sources.add(dataSource);

    //Create a line and add it to the data source.
    dataSource.add(new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]));
  
    //Create a line layer to render the line to the map.
    map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
        strokeColor: 'blue',
        strokeWidth: 5
    }));

    // ---------------- 以下为新增的编辑功能代码 ----------------
    // 加载Azure Maps官方绘图工具模块
    atlas.module.load('DrawingTools', function () {
        // 初始化绘图管理器，绑定已有数据源
        const drawingManager = new atlas.drawing.DrawingManager(map, {
            source: dataSource,
            // 直接开启编辑交互模式
            interactionMode: 'edit',
            // 自定义编辑态样式，可根据需求调整
            style: {
                // 顶点拖拽点样式
                vertexCircleRadius: 6,
                vertexCircleColor: '#fff',
                vertexCircleStrokeColor: '#2563eb',
                vertexCircleStrokeWidth: 2,
                // 线段中点新增点样式
                midPointCircleRadius: 4,
                midPointCircleColor: '#2563eb',
                midPointCircleStrokeColor: '#fff',
                midPointCircleStrokeWidth: 2
            }
        });

        // 可选：默认选中已创建的线条进入编辑状态
        const targetLine = dataSource.getShapes()[0];
        drawingManager.edit(targetLine);
    });
});

功能说明 #

• 现在悬停在线条上会显示可交互的顶点，拖拽顶点即可调整线段位置
• 点击线段中间的半透点可新增顶点，拉伸调整线段形状
• 所有添加到当前dataSource中的线、多边形、点形状都可自动支持编辑操作
• 如需切换到其他模式（如新增形状、删除形状），修改interactionMode参数即可

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