Mais

Ativando o Plug-in de Pesquisa com JS Leaflet


Estou tentando adicionar o seguinte plug-in para pesquisar um arquivo GeoJSON que abri no Leaflet Javascript: http://labs.easyblog.it/maps/leaflet-search/examples/geojson-layer.html

Eu trouxe os arquivos de pesquisa js e css e os chamei, mas não entendo a sintaxe para incorporá-los ao script existente.

Aqui está o script de que ele precisa para pesquisar (o campo é Sheet_Numb):

$ .getJSON ("Syriashape.json", function (data) {// adicionar camada GeoJSON e pop-ups ao mapa assim que o arquivo for carregado L.geoJson (data, {style: function (feature) {return {};}, onEachFeature: function (feature, layer) {layer.bindPopup (feature.properties.Sheet_Numb + "
"+" "+ feature.properties.LOC_Catalo);}}). addTo (map);});

Eu sei que tenho que adicionar o seguinte em algum lugar:

map.addLayer (featuresLayer); var searchControl = new L.Control.Search ({layer: featuresLayer, propertyName: 'name', circleLocation: false}); searchControl.on ('search_locationfound', function (e) {e.layer.setStyle ({fillColor: '# 3f0', color: '# 0f0'}); if (e.layer._popup) e.layer.openPopup ( );}). on ('search_collapsed', function (e) {featuresLayer.eachLayer (function (layer) {// restaurar a cor do recurso featuresLayer.resetStyle (layer);});}); map.addControl (searchControl); // inicializa o controle de pesquisa

Você precisa atribuir sua camada L.geoJson a uma var nomeada fora da função getJSON para acessá-la por meio de controles. Primeiro, crie-o sem quaisquer dados, junto com as opções que deseja aplicar aos recursos:

// criar uma camada geoJson vazia para ser preenchida posteriormente // estilos, pop-ups e outras opções de camada podem ser especificados aqui var syriaLayer = L.geoJson (false, {style: function (feature) {return {};}, onEachFeature: function ( recurso, camada) {layer.bindPopup ("Número da folha:" + feature.properties.Sheet_Numb + "
"+" Registro do Catálogo: "+""+ feature.properties.LOC_Catalo +""); } });

Então você pode usaraddDatapara preenchê-lo com os dados do seu arquivo:

$ .getJSON ("Syriashape.json", function (data) {// adicionar dados GeoJSON à camada e adicionar ao mapa assim que o arquivo for carregado syriaLayer.addData (data) .addTo (map);});

Então, como você definiu syriaLayer, você pode se referir a ele (e Sheet_Numb) ao criar seu controle de pesquisa:

var searchControl = new L.Control.Search ({layer: syriaLayer, propertyName: 'Sheet_Numb', circleLocation: false});

Aqui está um violino que pesquisa por estado usando os dados do exemplo ao qual você vinculou:

http://fiddle.jshell.net/nathansnider/ma33L8hx/