Daugiau

Paieškos papildinio suaktyvinimas naudojant JS lankstinuką


Bandau pridėti šį papildinį, norėdamas ieškoti „GeoJSON“ failo, kurį atidariau „Leaflet Javascript“: http://labs.easyblog.it/maps/leaflet-search/examples/geojson-layer.html

Aš atnešiau paieškos js ir css failus ir jiems paskambinau, tik nesuprantu sintaksės, kad galėčiau juos įtraukti į esamą scenarijų.

Čia yra scenarijus, kurio reikia norint ieškoti (laukas yra Sheet_Numb):

$ .getJSON ("Syriashape.json", funkcija (duomenys) {// Įkeliant failą į žemėlapį pridėkite GeoJSON sluoksnį ir iššokančiuosius langus, kai tik failas bus įkeltas. L.geoJson (duomenys, {style: function (feature) {return {};}, onEachFeature: funkcija (funkcija, sluoksnis) {layer.bindPopup (feature.properties.Sheet_Numb + "
"+" "+ feature.properties.LOC_Catalo);}}). addTo (žemėlapis);});

Žinau, kad turiu kažkur pridėti:

map.addLayer (featuresLayer); var searchControl = new L.Control.Search ({layer: featuresLayer, propertyName: 'vardas', circleLocation: false}); searchControl.on ('search_locationfound', funkcija (e) {e.layer.setStyle ({fillColor: '# 3f0', spalva: '# 0f0'}); if (e.layer._popup) e.layer.openPopup ( );}). on ('search_collapsed', funkcija (e) {featuresLayer.eachLayer (funkcija (sluoksnis) {// atkurti funkcijos spalvą featuresLayer.resetStyle (sluoksnis);});}); map.addControl (searchControl); // inizializuoti paieškos valdymą

Turite priskirti savo „L.geoJson“ sluoksnį pavadintam kintamajam, nepriklausančiam „getJSON“ funkcijai, kad prie jo galėtumėte naudotis valdikliais. Pirmiausia sukurkite jį be jokių duomenų kartu su visomis parinktimis, kurias norite naudoti funkcijoms:

// sukurkite tuščią geoJson sluoksnį, kuris bus užpildytas vėliau // Čia galite nurodyti stilius, iššokančiuosius langus ir kitas sluoksnio parinktis var syriaLayer = L.geoJson (false, {style: function (feature) {return {};}, onEachFeature: function ( funkcija, sluoksnis) {layer.bindPopup ("Lapo numeris:" + feature.properties.Sheet_Numb + "
"+" Katalogo įrašas: "+""+ feature.properties.LOC_Catalo +""); } });

Tada galite naudoti„addData“kad jį užpildytumėte failo duomenimis:

$ .getJSON ("Syriashape.json", funkcija (duomenys) {// pridėti GeoJSON duomenis į sluoksnį ir pridėti prie žemėlapio, kai failas bus įkeltas syriaLayer.addData (duomenys) .addTo (žemėlapis);});

Tada, kai apibrėžėte „syriaLayer“, galite į jį (ir „Sheet_Numb“) kreiptis kurdami savo paieškos valdiklį:

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

Čia yra veikiantis smuikas, kuris ieško pagal valstiją naudodamas duomenis iš jūsų susieto pavyzdžio:

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


Žiūrėti video įrašą: Web mapping tools (Spalio Mėn 2021).