Leaflet Draw绘制多边形无法显示面积问题求助（Angular 13）

• 检查Leaflet Draw版本兼容性
  不同版本的Leaflet Draw对showArea的实现逻辑存在差异，先确认你安装的版本与示例所用版本一致。可通过终端执行npm list leaflet-draw查看当前版本，建议升级到最新稳定版：

  npm install leaflet-draw@latest --save
  

• 手动监听绘制结束事件计算面积
  若自动弹窗未触发，可通过监听draw:drawstop事件手动计算并弹出面积：

  import * as L from 'leaflet';
  import 'leaflet-geometryutil';
  
  // 在添加drawControl后添加事件监听
  this.map.on('draw:drawstop', (e: any) => {
    const layer = e.layer;
    if (layer instanceof L.Polygon) {
      // 计算地球曲面面积
      const area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
      // 格式化面积单位（示例转换为公顷）
      const formattedArea = (area / 10000).toFixed(2) + ' 公顷';
      alert(`所绘图形面积：${formattedArea}`);
    }
  });
  

  注：若未安装leaflet-geometryutil，先执行npm install leaflet-geometryutil。

• 验证Angular事件绑定与图层配置
  确保drawnItems图层已正确添加到地图，若需要在回调中访问组件变量，建议使用箭头函数避免上下文丢失：

  this.map.on('draw:created', (e: L.DrawEvents.Created) => {
    const layer = e.layer;
    drawnItems.addLayer(layer);
  });
  

• 检查样式是否遮挡弹窗
  打开浏览器开发者工具，查看.leaflet-draw-tooltip类的样式，确认未被Angular全局样式或组件样式覆盖。可添加自定义样式确保弹窗可见：

  .leaflet-draw-tooltip {
    z-index: 9999 !important;
    background-color: rgba(0,0,0,0.7) !important;
    color: white !important;
  }
  

• 补充完整的多边形配置
  部分版本的Leaflet Draw需要配合tooltip配置才能触发面积弹窗，完善你的多边形配置：

  polygon: {
    showArea: true,
    tooltip: {
      start: '点击开始绘制多边形',
      cont: '点击添加下一个顶点',
      end: '点击最后一个顶点完成绘制'
    }
  }
  

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