求助：根据GeoJSON的Issue属性配置Leaflet标记样式失败

问题核心 #

你需要根据GeoJSON中Issue属性为Leaflet标记匹配对应图标，但现有两段代码存在明显错误：

• 第一段代码固定使用绿色图标，未根据Issue属性做判断；还错误地将data包裹在数组中传入L.geoJSON，且无效使用了针对多边形/线要素的style选项。
• 第二段代码用L.Icon直接创建标记（正确方式是用L.marker）；引用了未定义的freg_palmela变量（实际应使用你定义的data）；switch判断的"OK"与GeoJSON中的"Ok"大小写不匹配，导致逻辑失效。

修正后的完整代码 #

// 自定义图标
var greenIcon = new L.Icon({
    iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
    shadowUrl:'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
    iconSize: [12, 20],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [20, 20]
});

var redIcon = new L.Icon({
    iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
    shadowUrl:'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
    iconSize: [12, 20],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [20, 20]
});

// 处理弹窗交互
function onEachFeature(feature, layer) {
    var popupContent = '<b><span style="color:#eb991e;">MacloRa:</span> ' +
            feature.properties.maclora +
            '<br><span style="color:#eb991e;">Serial Number: </span> ' +
            '<small>' +
            feature.properties.serial_num +
            '<br><span style="color:#eb991e;">Issue: </span> ' +
            feature.properties.Issue +
            '<br><span style="color:#eb991e;">Last UL: </span> ' +
            feature.properties.last_ul +
            '<br><span style="color:#eb991e;">Last JR: </span> ' +
            feature.properties.last_jr +
            '<br><span style="color:#eb991e;">Last JA </span> ' +
            feature.properties.last_ja;
    
    layer.on('mouseover', function(ev) {
        ev.target.openPopup();
    });
    layer.on('mouseout', function(ev) {
        ev.target.closePopup();
    });
    layer.bindPopup(popupContent);
}

// 加载GeoJSON并根据Issue设置标记样式
var points = L.geoJSON(data, {
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng) {
        let icon;
        // 根据Issue属性匹配对应图标
        switch(feature.properties.Issue) {
            case "Ok":
                icon = greenIcon;
                break;
            case "Sem Uplinks":
                icon = redIcon;
                break;
            default:
                // 可自定义默认图标替换此处
                icon = greenIcon;
        }
        return L.marker(latlng, {icon: icon});
    }
}).addTo(map);

关键修正说明 #

1. 移除无效配置：删除针对多边形的style选项，点标记样式通过pointToLayer控制。
2. 正确传入数据：直接使用定义好的data变量，无需包裹数组。
3. 标准样式控制：在pointToLayer中根据Issue属性选择图标，这是Leaflet处理点标记样式的规范方式。
4. 修复大小写匹配：保持判断条件与GeoJSON中Issue值的大小写一致（"Ok"而非"OK"）。
5. 修正标记创建逻辑：用L.marker创建标记实例，L.Icon仅用于定义图标样式。

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