Angular10中Leaflet折线与多边形绘制异常求助

看起来你遇到了两个典型的Leaflet-Draw集成问题：工具栏图标不显示，以及折线/多边形需要多次点击才能添加节点。我来帮你一步步解决：

一、修复工具栏图标不显示问题 #

Leaflet-Draw依赖自身的CSS文件来渲染工具栏图标，Angular项目中默认不会自动引入这个文件。你需要手动添加：

• 打开angular.json，找到build -> options -> styles数组，添加Leaflet-Draw的CSS路径：

"styles": [
  "src/styles.css",
  "node_modules/leaflet/dist/leaflet.css",
  "node_modules/leaflet-draw/dist/leaflet.draw.css"
]

或者在src/styles.css中直接导入：

@import "~leaflet/dist/leaflet.css";
@import "~leaflet-draw/dist/leaflet.draw.css";

二、解决折线/多边形多次点击才添加节点的问题 #

你的代码里有两个关键配置错误，导致绘制交互异常：

1. 错误的rectangle配置 #

你在rectangle的配置里混入了marker属性，这是完全错误的——marker是独立的绘制工具配置，不属于rectangle的选项。这个错误会干扰Leaflet-Draw的事件处理逻辑，导致节点添加异常。

2. 重复创建图层 #

在draw:created事件中，你重新创建了一个L.polygon并添加到地图，但实际上e.layer已经是绘制完成的图层，直接添加到drawnItems即可（这也是edit控件指定的featureGroup）。

修正后的完整代码 #

ngAfterViewInit() {
  try {
    // 这里的setTimeout(0)可以保留，确保DOM完全渲染完成
    setTimeout(() => {
      this.map = L.map('areamap', {
        center: [37.780813, -122.404750],
        zoom: 17
      });

      const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      });
      tiles.addTo(this.map);

      // 用于管理绘制图层的FeatureGroup
      const drawnItems = new L.FeatureGroup();
      this.map.addLayer(drawnItems);

      // 修正后的Draw控件配置
      this.drawControl = new L.Control.Draw({
        position: 'topright',
        draw: {
          polyline: {
            shapeOptions: { color: '#f357a1', weight: 10 }
          },
          polygon: {
            allowIntersection: true,
            drawError: {
              color: '#e1e100',
              message: '<strong>Polygon draw does not allow intersections!</strong> (allowIntersection: false)'
            },
            shapeOptions: { color: '#bada55' }
          },
          circle: false,
          rectangle: {
            shapeOptions: { clickable: true }
            // 移除了错误的marker配置
          },
          circlemarker: false,
          // 如果需要marker工具，在这里单独配置
          marker: {
            // icon: iconDefault // 确保iconDefault已正确定义，比如L.icon({...})
          }
        },
        edit: {
          featureGroup: drawnItems,
          remove: true
        }
      });
      this.map.addControl(this.drawControl);

      // 修正后的draw:created事件处理
      this.map.on('draw:created', (e) => {
        // 将绘制好的图层添加到drawnItems，这样才能被edit控件管理
        drawnItems.addLayer(e.layer);
        // 如果你需要自定义样式，可以在这里修改e.layer的options
        e.layer.setStyle({ color: '#43425D' });
        // 打印坐标
        console.log(e.layer.getLatLngs());
      });
    }, 0);
  } catch (err) {
    console.error('初始化地图出错:', err);
  }
}

额外注意点 #

• 如果确实需要自定义marker图标，确保iconDefault是正确创建的Leaflet Icon对象，比如：

const iconDefault = L.icon({
  iconUrl: 'path/to/your/icon.png',
  shadowUrl: 'path/to/your/shadow.png',
  iconSize: [38, 95],
  shadowSize: [50, 64],
  iconAnchor: [22, 94],
  shadowAnchor: [4, 62],
  popupAnchor: [-3, -76]
});

• 尽量避免在ngAfterViewInit中使用setTimeout(0)，如果必须用，确保是因为DOM渲染延迟的问题（Angular的ngAfterViewInit已经保证视图初始化完成，但有时候第三方库可能需要额外等待）。

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