Azure Maps DrawingManager编程加载矩形调整大小异常问题求助

原因分析 #

通过编程导入的矩形本质是Polygon要素，但DrawingManager处理可编辑图形时，依赖特定内部元数据和顶点结构。直接导入的多边形缺少DrawingManager编辑所需的标识信息，且顶点顺序、边界框计算逻辑和手绘矩形不一致，导致调整大小时坐标计算错误，引发变形。

解决方案 #

方法1：用DrawingManager的add方法创建矩形（推荐） #

不要直接加载预定义GeoJSON，而是调用DrawingManager API手动创建矩形，让图形自动带上编辑所需元数据：

// 获取地图和DrawingManager实例
const map = atlas.Map(...);
const drawingManager = new atlas.drawing.DrawingManager(map, ...);

// 定义矩形西南、东北坐标
const sw = [ -122.33, 47.6 ];
const ne = [ -122.3, 47.61 ];

// 按矩形顶点顺序创建多边形并添加到DrawingManager
const rectangle = drawingManager.add(atlas.data.Feature.fromGeometry(
    new atlas.data.Polygon([[
        sw,
        [ne[0], sw[1]],
        ne,
        [sw[0], ne[1]],
        sw
    ]])
), 'rectangle');

方法2：为导入的多边形补全元数据 #

如果必须导入已有GeoJSON矩形，需手动添加DrawingManager识别的元数据，并确保顶点顺序正确：

// 假设已加载的矩形GeoJSON要素
const importedRect = {
    type: 'Feature',
    geometry: {
        type: 'Polygon',
        coordinates: [[...]] // 确保顶点按矩形四角落差闭合，顺序一致
    }
};

// 添加编辑所需元数据
importedRect.properties = importedRect.properties || {};
importedRect.properties['drawingType'] = 'rectangle';
importedRect.properties['editPoints'] = [
    importedRect.geometry.coordinates[0][0],
    importedRect.geometry.coordinates[0][1],
    importedRect.geometry.coordinates[0][2],
    importedRect.geometry.coordinates[0][3]
];

// 通过DrawingManager添加图形
drawingManager.add(importedRect);

方法3：用shapes集合导入图形 #

借助DrawingManager的shapes集合添加图形，确保内部状态同步：

const shape = new atlas.Shape(importedRect);
shape.setProperties({ drawingType: 'rectangle' });
drawingManager.shapes.add(shape);

验证 #

完成上述操作后，编程添加的矩形调整大小时，会和手绘矩形保持一致的矩形形态，不会出现变形。

内容的提问来源于stack exchange，提问作者Kamil Kuryś