Leaflet Search无法检索GeoJSON图层marker问题咨询

问题表现 #

• 地图上GeoJSON格式的点Marker已全部正常渲染加载
• 数据源存放在freg.js文件，期望通过要素的maclora属性实现搜索匹配，但输入对应属性值始终无匹配结果
• 异常效果截图：
  

相关代码与数据源 #

数据源结构（freg.js） #

var freg_palmela = {
    "type": "FeatureCollection",
    "name": "freg_palmela",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
        { 
            "type": "Feature", 
            "properties": { 
                "maclora": "0004A30B00FB82F0", 
                "serial_num": "2,02103E+14", 
                "freguesias": "Freguesia de PALMELA", 
                "model": "OCTANS 40", 
                "latitude": "38.569244417", 
                "longitude": "-8.88123655", 
                "pt": "PT1508D2052900", 
                "instalation_date": "11/04/2022", 
                "last_ul": "21/06/2022 05:55", 
                "last_jr": "20/06/2022 21:13", 
                "last_ja": "20/06/2022 21:13", 
                "last_rssi": "-109", 
                "last_snr": "5,8", 
                "jr_rssi": "-111,52", 
                "jr_snr": "0,09", 
                "Issue": "Ok" 
            }, 
            "geometry": { "type": "Point", "coordinates": [ -8.88123655, 38.569244417 ] } 
        }
    ]
}

原有初始化代码 #

var fregData = L.geoJSON(freg_palmela, {
style: function (feature) {
return feature.properties.style;
},

 onEachFeature: function (feature, layer) {

 layer.bindPopup('<b>MacloRa: ' +
          feature.properties.maclora +
          '<br>Serial Number: ' +
          '<small>' +
          feature.properties.serial_num +
          '<br>Model: ' +
          feature.properties.model +
          '<br>Last UL: ' +
          +feature.properties.last_ul +
          '<br>Last JR: ' +
          feature.properties.last_jr +
          '<br>Last JA ' +
          feature.properties.last_ja
          );
layer.on('mouseover',function(ev) {
ev.target.openPopup();
});
layer.on('mouseout',function(ev) {
ev.target.closePopup();
});

}
}).addTo(map);


  var overlays = {
    "Palmela":fregData
   };

L.control.search({
layer: fregData,
initial: false,
propertyName: 'maclora',
buildTip: function(text, val) {
    var type = val.layer.feature.properties.maclora;
    return '<a href="#" class="'+type+'">'+text+'<b>'+type+'</b> 
</a>';
}
})
.addTo(map);

故障原因 #

1. 点要素未显式声明渲染方式：L.geoJSON默认对点几何渲染为L.CircleMarker，多数版本的Leaflet Search插件无法识别默认生成的圆点图层，建立检索索引时会直接跳过这部分要素。
2. 无效配置干扰索引：所有要素的properties中不存在style字段，style函数返回undefined，插件会将无有效样式的点判定为不可检索要素。
3. 语法笔误导致逻辑失效：两处代码错误，一是拼接last_ul字段时多写了一个加号，二是buildTip返回的HTML字符串直接换行未做拼接，触发JS语法错误，导致搜索匹配、提示渲染逻辑完全失效。

修复后代码 #

var fregData = L.geoJSON(freg_palmela, {
    // 显式指定点渲染为标准Marker，确保插件可识别
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng);
    },
    onEachFeature: function (feature, layer) {
        // 给图层绑定title属性，兼容插件默认检索规则
        layer.options.title = feature.properties.maclora;
        // 修复多余加号、标签不闭合、字符串换行的笔误
        layer.bindPopup('<b>MacloRa: ' +
                feature.properties.maclora +
                '<br>Serial Number: ' +
                '<small>' +
                feature.properties.serial_num +
                '<br>Model: ' +
                feature.properties.model +
                '<br>Last UL: ' +
                feature.properties.last_ul +
                '<br>Last JR: ' +
                feature.properties.last_jr +
                '<br>Last JA: ' +
                feature.properties.last_ja +
                '</small></b>'
                );
        layer.on('mouseover',function(ev) {
            ev.target.openPopup();
        });
        layer.on('mouseout',function(ev) {
            ev.target.closePopup();
        });
    }
}).addTo(map);

var overlays = {
    "Palmela":fregData
};

L.control.search({
    layer: fregData,
    initial: false,
    propertyName: 'maclora',
    // 自定义选中要素后的定位逻辑
    moveToLocation: function(latlng, title, map) {
        map.flyTo(latlng, 17);
    },
    buildTip: function(text, val) {
        var type = val.layer.feature.properties.maclora;
        return '<a href="#" class="'+type+'">'+text+'<b> - '+type+'</b></a>';
    }
})
.addTo(map);

修改后重新加载页面，输入maclora字段的前缀或完整值即可正常匹配对应Marker，选中后会自动定位到要素点。

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