1
リーフレットプロジェクトでは、地図上の50個以上のマーカーを〜10個のチェックボックスでフィルタリングする必要があります。フィルタはマーカーの可視性を制御します。フィルタリングのためにクラス名を追加する以外に、DOMを分類する最適な方法はありますか？
私のアプローチは、各フィルタ条件の各マーカーに対応するクラス名を追加することです。スクリプトで50個以上のマーカーに10個のクラス名を割り当てると、読み込み時間が遅くなることが心配です。
ここでここでリンク http://jbk1109.github.io/hiking-info.html
が私のコードです：マーカーはにGeoJSONデータに基づいて作成され、クラス名は、スタイル機能で
<div id="distanceFilterContainer">
<input type="checkbox" name="checkboxField" class ="distanceFilter" id="short">
<label> Under 3 miles </label>
<input type="checkbox" name="checkboxField" class ="distanceFilter" id="medium">
<label> 3-8 miles </label>
<input type="checkbox" name="checkboxField" class ="distanceFilter" id="long">
<label> 8-12 miles </label>
</div>
geojson = L.geoJson(data,{
onEachFeature: featureEvent,
pointToLayer:function(feature, latlng){
// console.log(latlng.lat)
return L.circleMarker(latlng, geojsonMarkerOptions);
},
style: style
}).addTo(mymap)
function style(feature){
console.log(feature)
var length;
if (feature.properties.Length <= 3.0){
length = " short"
}
else if (feature.properties.Length > 3 && feature.properties.Length < 8)
{
length = " medium"
}
else if (feature.properties.Length >= 8.0){
length =" long"
}
console.log(feature.properties.Name + length)
return {className : feature.properties.Name + length}
}
document.getElementById("short").addEventListener("change",handleDistanceFilter)
document.getElementById("medium").addEventListener("change",handleDistanceFilter)
document.getElementById("long").addEventListener("change",handleDistanceFilter)
function handleDistanceFilter(e){
var x = e.target.id
console.log(x)
if (!e.target.checked){
var filtered = document.getElementsByClassName(x)
console.log(x)
for (var i =0; i< filtered.length; i++){
filtered[i].classList.remove("hide")
// filtered[i].style.visibility = 'visible';
}
}
else{
var filtered = document.getElementsByClassName(x)
for (var i =0; i< filtered.length; i++){
console.log(x)
filtered[i].classList.add("hide")
// console.log(filtered)
// filtered[i].style.visibility = 'hidden';
}
}
// console.log(e.target.checked)
}
これは時期尚早の最適化の場合のように聞こえます。 「私は心配です[X]はパフォーマンスを傷つけるでしょう」というフレーズは、あなたが実際にこれが当てはまるとは思わなかったことを意味する、将来の緊張です。 [正しいかもしれませんが、間違っているかもしれません。]（https://softwareengineering.stackexchange.com/questions/80084/is-premature-optimization-really-the-root-of-all-evil）ブラウザは高速です、そして良くなっています。これが最初の問題であるかどうかを確認することを提案する。 – hunteke
_ "スクリプトで50個以上のマーカーのクラス名を10個割り当てても、読み込み時間が遅くなることが心配です。"そして、実際にロード時間、または何らかの形でランタイムパフォーマンスを意味するのでしょうか？ – CBroe
ランタイムパフォーマンス - 現在は40個のマーカーしかありませんが、潜在的に5〜600個のマーカーまで増やすことができます。 – user3562812