Leaflet.PM 中防止绘制零面积矩形的技术方案

问题背景

在使用 Leaflet.PM 插件进行矩形绘制时，开发者可能会遇到一个常见的边界情况：当用户在同一个坐标点连续点击两次时，会生成一个零面积的矩形。这种情况在实际应用中通常是不需要的，因为它没有实际的地理意义。

问题分析

矩形绘制的基本流程如下：

1. 调用 enableDraw('Rectangle', options) 方法启用矩形绘制模式
2. 用户第一次点击地图确定矩形的第一个顶点
3. 用户第二次点击确定对角顶点完成矩形绘制
4. 如果两次点击在同一位置，则生成零面积矩形
5. 触发 pm:created 和 pm:drawend 事件

这种零面积矩形在实际业务场景中通常没有意义，反而可能引发后续处理逻辑中的异常。

解决方案

方案一：事件拦截法

在绘制过程中监听 pm:drawstart 事件，记录第一个点击点的坐标。然后在 pm:drawend 事件中检查最终矩形的面积：

let firstClickPoint = null;

map.on('pm:drawstart', (e) => {
    if(e.shape === 'Rectangle') {
        firstClickPoint = e.workingLayer.getLatLngs()[0];
    }
});

map.on('pm:drawend', (e) => {
    if(e.shape === 'Rectangle') {
        const rectangle = e.layer;
        const bounds = rectangle.getBounds();
        
        // 检查矩形面积是否为零
        if(bounds.getNorthEast().equals(bounds.getSouthWest())) {
            map.removeLayer(rectangle);
            // 可以在这里提示用户重新绘制
            return;
        }
    }
});

方案二：自定义绘制逻辑

通过继承和扩展 Leaflet.PM 的矩形绘制类，重写点击处理逻辑：

L.PM.Draw.Rectangle.include({
    _onClick: function(e) {
        // 如果是第一次点击，记录位置
        if(!this._startLatLng) {
            this._startLatLng = e.latlng;
            this._createMarker(e.latlng);
            return;
        }
        
        // 检查是否在同一位置点击
        if(e.latlng.equals(this._startLatLng)) {
            // 可以在这里显示提示信息
            return;
        }
        
        // 调用原始方法继续绘制
        this._originalOnClick(e);
    }
});

方案三：后处理过滤

在所有绘制完成后，通过检查几何特征来过滤无效矩形：

map.on('pm:create', (e) => {
    if(e.shape === 'Rectangle') {
        const layer = e.layer;
        const area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
        
        if(area === 0) {
            map.removeLayer(layer);
            // 提示用户重新绘制
        }
    }
});

最佳实践建议

1. 用户体验：当检测到无效绘制时，应该给用户明确的反馈，例如显示提示信息说明为什么绘制被拒绝。

2. 阈值设置：除了完全零面积的情况，还可以考虑设置最小面积阈值，过滤掉过小的矩形。

3. 绘制引导：在用户开始绘制时，可以通过UI提示引导用户进行有效的绘制操作。

4. 多设备适配：考虑触摸设备上的操作特点，可能需要调整判断逻辑以适应不同的交互方式。

总结

防止零面积矩形的绘制是提升Leaflet.PM插件使用体验的重要细节。通过事件拦截、自定义绘制逻辑或后处理过滤等方法，开发者可以有效解决这一问题。选择哪种方案取决于具体应用场景和需求复杂度。在实际项目中，建议结合用户反馈和业务需求选择最适合的实现方式。