Leaflet GeoJSON的pointToLayer方法如何同时返回多个图层

解决方法 #

Leaflet 的 pointToLayer 回调支持返回 L.LayerGroup 图层组实例，你只需要把标记、矩形两个图层都打包到图层组中返回，即可实现单条GeoJSON同时渲染多个元素的效果。

核心实现代码如下：

pointToLayer: function (feature, latlng) {
    // 分别创建标记和矩形图层
    const siteMarker = L.marker(latlng);
    const siteRange = L.rectangle(feature.properties.rect);
    // 打包为图层组返回
    return L.layerGroup([siteMarker, siteRange]);
}

如果需要给两个图层分别配置自定义样式、弹窗、交互事件，直接在创建图层时传入对应配置即可，参考示例：

pointToLayer: function (feature, latlng) {
    // 配置自定义工地标记
    const siteMarker = L.marker(latlng, {
        icon: L.icon({
            iconUrl: '你的工地图标路径',
            iconSize: [36, 36],
            iconAnchor: [18, 36]
        })
    }).bindPopup(`<b>工地名称：</b>${feature.properties.siteName}`);

    // 配置自定义范围框样式
    const siteRange = L.rectangle(feature.properties.rect, {
        color: '#f59e0b',
        weight: 2,
        fillColor: '#fbbf24',
        fillOpacity: 0.2
    });

    return L.layerGroup([siteMarker, siteRange]);
}

实现效果参考：

内容的提问来源于stack exchange，提问作者Martin Belcher - AtWrk