添加数据时设置 geoJSON 点的样式

Question

我有一张传单地图，其中显示了一些简单的 geoJSON 点标记。因为我是从外部 .geojson 文件加载它们，所以我使用这个函数：

        async function addPointGeoJson(layername, filename, style={}) {
            const response = await fetch(filename);
            const data = await response.json();
            layername.addData(data, {
                pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, style);
                }
            });
        };

然后我添加一个包含 .geojson 数据的图层，如下所示：

        let markers = L.geoJSON();
        addPointGeoJson(markers, "markers.geojson", markerStyle)

我正在尝试根据此选项对象设置标记的样式：

        let markerStyle = {
            radius: 1,
            fillColor: "#000",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        };

目前，我的标记以默认样式显示，而不是提供的样式。没有任何错误。

我查看了网上的其他几个帖子，并试图找出我错在哪里。我觉得

.addData

方法可能不允许选项对象，但我很难弄清楚这是否是问题所在。所有在线示例都是在创建图层时设置点的样式，但我想在将数据添加到图层时执行此操作。

相关文档：

https://leafletjs.com/reference.html#geojson https://leafletjs.com/reference.html#geojson-adddata

一些主题：

https://gis.stackexchange.com/questions/75590/setstyle-function-for-geojson-features-leaflet https://gis.stackexchange.com/questions/282665/layer-adddata-circle-marker-style-pointtolayer

Answer 1

问题源于 Leaflet 的 GeoJSON 层和 addData 方法如何协同工作。当您使用 L.geoJSON() 创建 GeoJSON 图层时，需要在创建时指定任何选项。 addData 方法主要用于向现有图层添加新的 GeoJSON 数据，但它不直接接受样式选项。

async function addPointGeoJson(filename, style = {}) {
    // First, fetch and parse the GeoJSON data
    const response = await fetch(filename);
    const data = await response.json();
    
    // Create the GeoJSON layer with styling options
    // Note: We create the layer after we have the data
    const layer = L.geoJSON(data, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, style);
        }
    });
    
    return layer;
}

// Usage:
let markerStyle = {
    radius: 1,
    fillColor: "#000",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

// Since we're using async/await, we need to handle this asynchronously
async function initializeMap() {
    let markers = await addPointGeoJson("markers.geojson", markerStyle);
    markers.addTo(map);  // Add the styled layer to the map
}

initializeMap();

如果您需要在加载数据之前维护对图层的引用（例如，稍后在地图中添加/删除它），您可以修改如下方法：

// Create the layer first but with styling options
let markers = L.geoJSON(null, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, markerStyle);
    }
});

// Then add the data when it's available
async function loadMarkers() {
    const response = await fetch("markers.geojson");
    const data = await response.json();
    markers.addData(data);
}

// Add the layer to the map immediately (it will be empty until data loads)
markers.addTo(map);
loadMarkers();