OpenLayers 绘图面积校验：为什么 drawend 里删不掉图形？

        近日在做 OpenLayers 地图开发时，遇到一个有意思的问题：需要实现「绘制图形后自动校验面积，超过阈值就抛弃这个图形」的功能。最初把校验逻辑放在了 drawend 事件里，结果频频报错；后来换成 addfeature 事件，却顺畅运行。这中间的坑，值得好好说道说道。

场景还原：看似合理的错误方案

        需求很明确：用户在地图上画矩形、多边形等图形，松开鼠标完成绘制时，自动计算面积。如果面积超过 250000 平方单位，就把这个图形删掉，提示用户重新绘制。一开始我想当然地认为：「松开鼠标完成绘制」就是 drawend 事件，这时候处理正好。于是写下了这样的代码：

// 最初的错误写法
this.draw.on('drawend', (e) => {
  const area = 计算面积...
  if (area > 250000) {
    this.vectorSource.removeFeature(e.feature); // 尝试删除图形
    this.$message.error('面积过大，请重绘');
  }
});

        结果却频繁报错：Cannot read properties of undefined (reading 'forEach')，意思是 vectorSource 内部报错，根本删不掉图形。

关键原因：两个事件的「时间差」

        为什么在 drawend 里删不掉？这要从 OpenLayers 的绘图流程说起：

         1、drawend 事件的本质：
        当用户松开鼠标（完成最后一笔）时，drawend 事件会立刻触发。但此时，图形只是「完成绘制动作」，并没有真正被添加到数据源（vectorSource）里。它就像刚出炉的面包，还在传送带上，没被放进展示柜（数据源）。

        2、addfeature 事件的本质：
        只有当图形被正式「存入」数据源后，vectorSource 才会触发 addfeature 事件。这时候，图形已经稳稳地躺在数据源里，就像面包被摆进了展示柜，随时可以拿取或移除。所以在 drawend 里调用vectorSource.removeFeature时，相当于「试图从还没放进面包的展示柜里拿面包」—— 数据源里根本还没有这个图形，自然会报错。

正确解法：在 addfeature 里做校验

        既然 drawend 时机太早，那就换个思路：等图形被存入数据源后再校验。把逻辑移到VectorSource的 addfeature 事件里，问题迎刃而解：

// 正确的写法
this.vectorSource.on('addfeature', (e) => {
  const area = 计算面积...
  if (area > 250000) {
    this.vectorSource.removeFeature(e.feature); // 顺利删除
    this.$message.error('面积过大，请重绘');
  }
});

经验总结：事件选择的「时机原则」

做 OpenLayers 绘图开发时，事件的选择要遵循「时机原则」：

• 若要处理「绘制动作相关」的逻辑（如记录绘制耗时、统计绘制次数），用 drawend 事件，它能精准捕捉动作结束的瞬间。
• 若要处理「图形数据相关」的逻辑（如校验、修改、删除图形），必须用 addfeature 事件，它能确保图形已被数据源接收，操作绝对可靠。

        就像我们网购时，「下单成功」（drawend）不代表能立刻发货，只有「商品已入库」（addfeature），仓库才能进行拣货、退货等操作。找对时机，代码才能少走弯路。当然还有其他办法解决这个问题，比如实时计算面积，提前阻止超限面积，又或者可以绘制出虚拟的图形，待二次确认加载进入真正的数据里面。