在Leaflet中创建多边形后弹出输入框命名并存入GeoJSON属性的方法

先修正原代码的基础问题 #

原代码中重复初始化了editableLayers要素组：

• 第一次初始化的实例被绑定到drawPluginOptions的编辑配置中
• 后续代码重新新建了一个editableLayers实例并添加到地图，导致绘制的多边形被加到新实例上，编辑功能完全无法触发。需要删掉重复的初始化代码，只保留第一次的实例定义。

核心逻辑改造 #

在draw:created事件的多边形处理分支中，为刚创建的图层直接绑定带名称输入框的弹窗，收集用户输入后写入对应GeoJSON要素的属性，最后把名称渲染到多边形的中心位置。

具体代码调整 #

1. 替换原代码里的无效表单模板为多边形名称输入专用模板：

// 多边形名称输入弹窗模板
const polygonNamePopupContent = `
  <form id="polygon-name-form">
    <label for="polygon-name-input">区域名称：</label>
    <input 
      id="polygon-name-input" 
      type="text" 
      class="popup-input" 
      placeholder="请输入区域名称"
      style="margin: 8px 0; width: 180px;"
    />
    <button 
      type="button" 
      id="save-polygon-name" 
      style="width: 100%; padding: 4px; cursor: pointer;"
    >
      保存名称
    </button>
  </form>
`

2. 重写多边形创建后的处理函数：

function polygonCreateHandler(e) {
  const type = e.layerType;
  const layer = e.layer;

  if (type !== 'polygon') return;

  // 初始化标准GeoJSON要素结构，方便后续直接导出属性
  layer.feature = layer.feature || {};
  layer.feature.properties = layer.feature.properties || {};
  layer.feature.properties.name = '未命名区域';

  editableLayers.addLayer(layer);

  // 为多边形绑定带输入框的popup
  layer.bindPopup(polygonNamePopupContent, {
    closeOnClick: false,
    autoPan: true
  });

  // 自动在多边形中心位置弹出输入框
  const polygonCenter = layer.getBounds().getCenter();
  layer.openPopup(polygonCenter);

  // 绑定保存按钮的交互逻辑
  document.querySelector('#save-polygon-name').addEventListener('click', () => {
    const inputVal = document.querySelector('#polygon-name-input').value.trim();
    // 空输入时使用默认名称兜底
    layer.feature.properties.name = inputVal || '未命名区域';

    // 在多边形中心渲染固定的名称提示
    const nameTooltip = L.tooltip({
      permanent: true,
      direction: 'center',
      className: 'text'
    })
    .setContent(layer.feature.properties.name)
    .setLatLng(layer.getBounds().getCenter());
    
    nameTooltip.addTo(map);
    layer.closePopup();
  });
}

注意事项 #

• Leaflet默认一次仅支持打开一个popup，连续绘制多边形时不会出现DOM元素冲突，保存按钮的事件绑定可正常生效
• 如果需要导出所有绘制的多边形为GeoJSON格式，直接调用editableLayers.toGeoJSON()即可获取所有带名称属性的要素集合，无需额外处理
• 原代码中的瓦片配置、绘制权限设置都无需调整，可正常运行

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