Leaflet地图绘制问题：点和线绘制后立即消失

问题根源 #

你的代码存在两处逻辑冲突，导致点、线绘制后消失：

1. 图层容器重复绑定：你既把pointLayer、polygonsLayer、lineLayer分别添加到地图，又将它们放进allLayers再添加到地图。Leaflet规则是一个图层只能属于一个父容器，这会让三个要素组被迫从地图移除，转而归属allLayers。
2. 绘制图层重复添加：处理draw:created事件时，你把点、线同时加到要素组和地图，这会导致图层从要素组中剥离，直接绑定到地图，后续因容器冲突丢失显示；而多边形代码里重复添加polygonsLayer到地图，意外让它脱离了allLayers，反而正常显示。

修复后的完整代码 #

var map = L.map("leaflet-map", {
  center: [37.7749, -122.4194],
  zoom: 8,
});

let osm = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}", {
  foo: "bar",
  attribution: "© OpenStreetMap contributors",
});
osm.addTo(map);

var CyclOSM = L.tileLayer(
  "https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
  {
    attribution: "CyclOSM | Map data: © OpenStreetMap contributors",
  }
);

CyclOSM.addTo(map);

var Esri_WorldImagery = L.tileLayer(
  "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
  {
    attribution:
      "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community",
  }
).addTo(map);

let baseLayers = {
  "Esri World Imagery": Esri_WorldImagery,
  "Open Street Map": osm,
  "Cycl OSM": CyclOSM,
};

// 创建要素组，无需单独添加到地图
var pointLayer = L.featureGroup();
var polygonsLayer = L.featureGroup();
var lineLayer = L.featureGroup();

// 统一通过allLayers将三个要素组添加到地图
var allLayers = L.featureGroup([pointLayer, polygonsLayer, lineLayer]).addTo(map);

// 处理绘制完成事件
map.on("draw:created", function (e) {
  var type = e.layerType,
    layer = e.layer;
  if (type === "point") {
    layer.addTo(pointLayer);
  } else if (type === "polygon") {
    layer.addTo(polygonsLayer);
  } else if (type === "line") {
    layer.addTo(lineLayer);
  }
});

var drawControl = new L.Control.Draw({
  draw: {
    marker: true,
    polyline: true,
    polygon: true,
    rectangle: true,
    circle: true,
  },
}).addTo(map);

核心修改说明 #

• 删掉pointLayer、polygonsLayer、lineLayer各自的addTo(map)调用，只通过allLayers统一挂载到地图，避免容器冲突。
• 绘制事件中仅需将图层添加到对应要素组即可，无需再添加到地图（要素组已在地图上）。
• 移除了无用的全局变量point、polygon、line，简化代码结构。

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