Jupyter Notebook中iPyLeaflet地图绘制多边形后功能异常排查

问题现象 #

• 首次绘制多边形正常，但第二个多边形无法通过点击起始点闭合，只能通过侧边菜单的cancel退出绘制工具
• 删除图形时，点击图形可使其消失，但无法点击侧边菜单的save按钮（cancel和clear all功能正常）
• 重新运行代码单元格后，地图不再显示，单元格显示运行完成但无任何输出

原代码 #

class PolygonMap():
    def __init__(self):
        self.polygons = []
        
        self.m = Map(zoom=10, dragging=True)

        self.draw_control = DrawControl()

        self.draw_control.on_draw(self.handle_draw)
        self.m.add_control(self.draw_control)
        return

        
    def handle_draw(self,target, action, geo_json):
        # Get coordinates of selected polygon out of map drawing
        coords = geo_json['geometry']['coordinates'][0]
        print(coords)

        return
    
    def display(self):
        display(self.m)
        return

显示地图的单元格代码：

m = PolygonMap()
m.display()

问题根源 #

1. 图层管理缺失：原代码只获取了多边形坐标，但没有将绘制完成的多边形添加到地图的图层集合中，导致DrawControl无法正确跟踪已绘制的图形状态，引发后续绘制、保存按钮的异常
2. Jupyter上下文残留：重新运行单元格时，旧的地图实例没有被正确清理，Jupyter的widget上下文存在冲突，导致新地图无法渲染

修复后的代码 #

from ipyleaflet import Map, DrawControl, Polygon

class PolygonMap():
    def __init__(self):
        self.polygons = []
        self.layers = []  # 用于跟踪所有添加到地图的多边形图层
        
        self.m = Map(zoom=10, dragging=True, center=(0, 0))  # 添加默认中心点，避免地图加载异常

        self.draw_control = DrawControl(
            polygon={'shapeOptions': {'color': '#6bc2e5', 'fillOpacity': 0.7}},
            edit=True,  # 启用编辑功能，确保删除操作状态正常
            remove=True
        )

        self.draw_control.on_draw(self.handle_draw)
        self.m.add_control(self.draw_control)

        
    def handle_draw(self, target, action, geo_json):
        coords = geo_json['geometry']['coordinates'][0]
        print(coords)
        
        if action == 'created':
            # 创建多边形图层并添加到地图
            polygon = Polygon(locations=coords, color='#6bc2e5', fill_opacity=0.7)
            self.m.add_layer(polygon)
            self.layers.append(polygon)
            self.polygons.append(coords)
        elif action == 'deleted':
            # 从地图中移除对应的多边形图层
            for layer in self.layers:
                if layer.locations == coords:
                    self.m.remove_layer(layer)
                    self.layers.remove(layer)
                    self.polygons.remove(coords)
                    break
    
    def display(self):
        display(self.m)

使用方式不变：

m = PolygonMap()
m.display()

关键修复点说明 #

• 添加图层跟踪：新增self.layers列表管理所有多边形图层，确保绘制的图形被正确添加到地图，让DrawControl能识别已绘制元素，解决二次绘制闭合失效、save按钮不可用的问题
• 完善事件处理：区分created和deleted动作，分别处理图层的添加与移除，保证地图状态与DrawControl同步
• 添加默认中心点：初始化Map时指定center参数，避免因无默认中心点导致的地图加载异常
• 启用编辑移除功能：初始化DrawControl时显式开启edit和remove，确保删除操作的状态逻辑正常

依赖确认 #

虽然你更新了iPyLeaflet版本，但问题核心是代码逻辑缺失。仍需确保依赖版本兼容：

• 确认jupyter-widgets版本≥7.0.0，可通过pip list | grep jupyter-widgets查看
• 若仍有异常，可尝试重新安装ipyleaflet：pip install --upgrade ipyleaflet，并重启Jupyter Notebook

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