OpenLayers绘制第二个多边形时自动删除前一个的实现方法

我来帮你搞定这个需求！在OpenLayers 4.x版本里实现「每次只保留一个绘制的多边形」其实很简单，核心思路就是用单独的矢量图层管理绘制的多边形，每次完成新多边形绘制时，先清空图层里的旧要素，再添加刚画好的新要素。

具体实现步骤&代码示例 #

1. 创建专属矢量图层
   先建一个只用来存放绘制多边形的矢量图层，方便后续统一管理：

   // 创建矢量数据源
   const drawSource = new ol.source.Vector();
   // 创建矢量图层并设置样式
   const drawLayer = new ol.layer.Vector({
     source: drawSource,
     style: new ol.style.Style({
       fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }),
       stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
       image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) })
     })
   });
   // 将图层添加到地图实例
   map.addLayer(drawLayer);
   

2. 配置绘制交互并监听绘制结束事件
   初始化绘制交互后，重点监听drawend事件——每次绘制完成后先清空旧要素，再添加新的：

   // 创建多边形绘制交互
   const drawInteraction = new ol.interaction.Draw({
     source: drawSource,
     type: 'Polygon' // 指定绘制类型为多边形
   });
   
   // 监听绘制结束事件，处理要素替换
   drawInteraction.on('drawend', function(event) {
     // 清空图层里所有旧的多边形要素
     drawSource.clear();
     // 添加刚绘制完成的新多边形要素
     drawSource.addFeature(event.feature);
   });
   
   // 将绘制交互添加到地图
   map.addInteraction(drawInteraction);
   

关键逻辑说明 #

• 用单独的矢量图层/数据源管理绘制的多边形，避免和其他地图要素混淆；
• drawend事件确保只有当用户完整绘制完一个多边形后，才执行替换操作，不会出现绘制中途取消导致地图空掉的情况；
• 调用source.clear()可以快速清空所有旧要素，再通过event.feature获取刚绘制的新要素添加进去，完美实现「仅保留最新一个多边形」的需求。

内容的提问来源于stack exchange，提问作者Макс Азаренко