Leaflet使用toGeoJSON导出时如何保留标记与线面的属性信息？

要解决原生toGeoJSON仅导出几何信息的问题，推荐两种高效方案，无需手动逐个提取属性：

方案1：扩展Leaflet图层的toGeoJSON原型方法（最优） #

通过修改Marker、Polyline、Polygon的原型方法，让所有同类型图层自动在导出时携带自定义属性，一劳永逸。

1.1 扩展Marker的导出逻辑 #

L.Marker.include({
  toGeoJSON: function(precision) {
    // 调用原生方法获取基础GeoJSON结构
    const geojson = L.Marker.prototype.toGeoJSON.call(this, precision);
    // 将自定义属性注入properties
    geojson.properties = {
      id: this.options.id,
      name: this.options.name,
      description: this.options.description,
      "marker-size": this.options.markerSize,
      "marker-color": this.options.color,
      "marker-symbol": this.options.symbol
    };
    return geojson;
  }
});

1.2 扩展Polyline的导出逻辑 #

L.Polyline.include({
  toGeoJSON: function(precision) {
    const geojson = L.Polyline.prototype.toGeoJSON.call(this, precision);
    geojson.properties = {
      id: this.options.id,
      name: this.options.name,
      description: this.options.description,
      "stroke-color": this.options.color,
      "stroke-width": this.options.weight,
      "stroke-opacity": this.options.opacity
    };
    return geojson;
  }
});

1.3 扩展Polygon的导出逻辑 #

L.Polygon.include({
  toGeoJSON: function(precision) {
    const geojson = L.Polygon.prototype.toGeoJSON.call(this, precision);
    geojson.properties = {
      id: this.options.id,
      name: this.options.name,
      description: this.options.description,
      "stroke-color": this.options.color,
      "stroke-width": this.options.weight,
      "fill-color": this.options.fillColor,
      "fill-opacity": this.options.fillOpacity
    };
    return geojson;
  }
});

使用方式 #

创建图层时，将自定义属性存入options：

// 示例：创建带属性的标记
L.marker([36.014897, -75.668159], {
  id: 1,
  name: "Marker 1",
  description: "This is a marker",
  markerSize: "small",
  color: "#f5a91a",
  symbol: "b"
}).addTo(map);

之后直接用你原来的导出函数，就能得到带完整属性的GeoJSON。

方案2：导出时手动注入属性（无需修改原型） #

如果不想修改Leaflet原生原型，可在导出遍历图层时，为每个GeoJSON Feature手动添加属性：

function exportToGeoJSON() {
  const features = [];
  map.eachLayer(layer => {
    let geojson = layer.toGeoJSON();
    // 根据图层类型注入对应属性
    if (layer instanceof L.Marker) {
      geojson.properties = {
        id: layer.options.id,
        name: layer.options.name,
        description: layer.options.description,
        "marker-size": layer.options.markerSize,
        "marker-color": layer.options.color,
        "marker-symbol": layer.options.symbol
      };
    } else if (layer instanceof L.Polyline) {
      geojson.properties = {
        id: layer.options.id,
        name: layer.options.name,
        description: layer.options.description,
        "stroke-color": layer.options.color,
        "stroke-width": layer.options.weight,
        "stroke-opacity": layer.options.opacity
      };
    } else if (layer instanceof L.Polygon) {
      geojson.properties = {
        id: layer.options.id,
        name: layer.options.name,
        description: layer.options.description,
        "stroke-color": layer.options.color,
        "stroke-width": layer.options.weight,
        "fill-color": layer.options.fillColor,
        "fill-opacity": layer.options.fillOpacity
      };
    }
    features.push(geojson);
  });
  return JSON.stringify({
    type: "FeatureCollection",
    features: features
  });
}

导入恢复属性 #

导出后导入时，解析GeoJSON的properties并赋值给新创建的图层：

function importFromGeoJSON(json) {
  const data = JSON.parse(json);
  data.features.forEach(feature => {
    const props = feature.properties;
    switch(feature.geometry.type) {
      case "Point":
        L.marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {
          id: props.id,
          name: props.name,
          description: props.description,
          markerSize: props["marker-size"],
          color: props["marker-color"],
          symbol: props["marker-symbol"]
        }).addTo(map);
        break;
      case "LineString":
        L.polyline(feature.geometry.coordinates.map(coord => [coord[1], coord[0]]), {
          id: props.id,
          name: props.name,
          description: props.description,
          color: props["stroke-color"],
          weight: props["stroke-width"],
          opacity: props["stroke-opacity"]
        }).addTo(map);
        break;
      case "Polygon":
        L.polygon(feature.geometry.coordinates.map(ring => ring.map(coord => [coord[1], coord[0]])), {
          id: props.id,
          name: props.name,
          description: props.description,
          color: props["stroke-color"],
          weight: props["stroke-width"],
          fillColor: props["fill-color"],
          fillOpacity: props["fill-opacity"]
        }).addTo(map);
        break;
    }
  });
}

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