Bir süredir, en son şeyler geliştirdiğim için QGIS2Web. Dürüst olmak gerekirse: QGIS2Leaf’ı 2015 yılında OpenLayers İhracatçısı ile birleştirmeye karar verdikten sonra tüm projeye odaklandım. Tom Chadwin Ve diğerleri harika bir iş çıkardı ve QGIS içinden içerik yayınlamak söz konusu olduğunda sanat eklentisini geliştirmeyi başardı. Ama şanslı olduğum için son haftalarda QGIS2Web için bazı ilginç şeyler geliştirme şansım oldu.
QGIS2Web: Fikir
Geçmişte zaten bazı yollar gösterdim Basit JavaScript ile broşür tabanlı bir web haritasını filtreleme ve/veya materyalizecss. Statik verileriniz varsa bu oldukça basit bir yaklaşımdır: Veri modelini biliyorsanız, haritayı filtrelemek için doğru filtreler ve HTML öğeleri oluşturmak kolaydır. Bu jenerik yapmak biraz daha zor:
Alan tipleri QGI’lerde oldukça çeşitlidir ve 4-5 ana filtre elemanına eşlenmesi gerekir
Filtreler, her katmanın sahip olduğu özelliklere bağlı olarak, tüm veya tek bir katman için geçerli olabilir veya olmayabilir
Her filtrenin aralıkları, listeleri konsolide edilmelidir (kopyaları kaldır, min/maks.
Tarih/Saat/Datetime girişleri için çapraz tarayıcı işlevini unutmayın
HTML’deki Selects söz konusu olduğunda, aşağıdaki önceden tanımlanmış seçenekler kümesini kullandım:
Dizeler için Metin Seçimi Listesi (Çoklu Seçenekler)
Booleans için seçim listesi
tamsayı
çift kaydırıcı
Kombine Tarih/Saat/Datetime Seçim
Harita iki parça halinde bölünmelidir: biri harita için, diğeri “filtre menüsü” için. Ayrıca: Regresyon testini hala mümkün kılmak için QGIS2Web’in ana koduna mümkün olduğunca çok fazla dokunulmalıdır.
QGIS2Web Filtreleri: Seçimler için yaklaşım
Ana yaklaşım:
Her katmanın özelliklerini alın
Alan türlerini bir seçme türüne eşleme
Seç girişlerini belirleyin
Seçilen her öznitelik için QGIS2Web’in ana kodundan sonra js kullanarak html öğeleri oluşturun
Her filtre türü için işlev ekleyin ve tüm filtrelerin filtre seçimini tüm katmanlara uygulayın
Kodlama açısından çirkin kısım şudur: Tüm HTML öğeleri JavaScript ile oluşturulur ve Python’u kullanarak dosyaya yazılır:
if filterItems[item]["type"] in ["str", "bool"]:
endHTML += """
document.getElementById("menu").appendChild(
document.createElement("div")); #placeholder DIV
var div_{nameS} = document.createElement('div'); #This is the div which holds the select
div_{nameS}.id = "div_{name}";
div_{nameS}.className= "filterselect";
document.getElementById("menu").appendChild(div_{nameS});
sel_{nameS} = document.createElement('select'); #this is the select itself
sel_{nameS}.multiple = true;
sel_{nameS}.id = "sel_{name}";
var {nameS}_options_str = "<option value='' unselected></option>";
sel_{nameS}.onchange = function(){{filterFunc()}}; #runs the same functio for all filters in the map
""".format(name=itemName, nameS=safeName(itemName)) #safename removes unwanted strings in a attribute name
for entry in filterItems[item]["values"]: #populating the select options
endHTML += """
{nameS}_options_str += '<option value="{e}">{e}</option>';
""".format(e=entry, name=itemName,
nameS=safeName(itemName))
endHTML += """
sel_{nameS}.innerHTML = {nameS}_options_str;
div_{nameS}.appendChild(sel_{nameS});
var lab_{nameS} = document.createElement('div');
lab_{nameS}.innerHTML = '{name}';
lab_{nameS}.className = 'filterLabel';
div_{nameS}.appendChild(lab_{nameS});
""".format(name=itemName, nameS=safeName(itemName))
HTML kullanarak aynı kod okumak ve yazmak çok daha kolay olacaktır. Ama hey: (kırık resmi düzeltin!)
QGIS2Web: Seçimlerle uğraşmak
Tüm katmanlara uygulanan işlev, bir katmanın altında yatan JSON verilerini alır, öznitiğin özelliklerin bir parçası olup olmadığını belirler ve daha sonra seçilen kriterleri (JavaScript) karşılamayan girişleri kaldırır:
map.eachLayer(function(lyr){
if ("options" in lyr && "dataVar" in lyr["options"]){
features = this[lyr["options"]["dataVar"]].features.slice(0);
try{
for (key in Filters){
if (Filters[key] == "str" || Filters[key] == "bool"){
var selection = [];
for (option in Array.from(document.getElementById("sel_" + key).selectedOptions)){
selection.push(document.getElementById("sel_"+key).selectedOptions[option].value);
}
try{
if (key in features[0].properties){
for (i = features.length - 1;i >= 0; --i){
if (selection.indexOf(features[i].properties[key])<0 && selection.length>0) {
features.splice(i,1);
}
}
}
} catch(err){
}
}
} catch(err){
}
this[lyr["options"]["layerName"]].clearLayers();
this[lyr["options"]["layerName"]].addData(features);
}
})
}
Diğer seçmeler için kod oldukça benzerdir ve aynı prensipleri izler. Yine de sonuç ilk bakışta gerçekten iyi:
QGIS2Web Wxport’ta bir web haritası için mümkün olan her şey mümkün
Ve burada alan ve isim filtreleri ile küçük bir örnek keşfedebilirsiniz (tam boyutlu bağlantı):
Filtre işlevi, en son deneysel sürüm 3.8.0’ın bir parçasıdır. zımpara ve senin eklenti işleyicisi Deney eklentilerini de kabul ederseniz. Veri ile işleme konusunda herhangi bir sorun görürseniz, lütfen çok nazik olun ve GitHub hakkında bir yorum bırakın.
News
