リーフレットonEachFeatureテーブル情報をDivに登録する？

Question

イムonEachFeature機能で抽出geojsonからテーブルを取得しようと、それは警告とそれを表示するに動作しますが、私は事業部の内側にそれを得るために、getElementsByClassNameを試みたが、何も

を示していない私は、リーフレットのサイドバーでリーフレットを使用していますプラグイン

おかげ

var tbl1 = ""; 

var proy = L.geoJSON(json_Obras, { 
    onEachFeature: function(feature, layer) { 
     tbl1 = '<table><tr><th scope="row">OBRA </th><td>' + (feature.properties['OBRA'] !== null ?  Autolinker.link(String(feature.properties['OBRA'])) : '') + '</td></tr>' 

    } 
}).addTo(map); 


proy.on('click', function() { 
    sidebar.show(); 

}) 
map.on('click', function() { 
    sidebar.hide(); 
}); 

document.getElementsByClassName('t1').innerHTML = tbl1; 

ボタンクリック

<input id="btn" class="gral" type="button" name="answer" value="DATA" /> 
      <div id="tabla" class="t1" style="display:none;"> 
      </div> 

0123でのdivを表示

jqueryのクリック機能

$('.gral').click(function() { 
     $('.t1').toggle('slow', function() { 

     }); 
    }); 

UPDATE

私はprevious questionに基づいて、これを行う方法を見つけることができた：

var sidebar = L.control.sidebar('sidebar', { 
      closeButton: false, 
      position: 'left' 
     }); 

map.addControl(sidebar); 

var ptsty = { 
    radius: 8, 
    fillColor: "#ff7800", 
    color: "#000", 
    weight: 1, 
    opacity: 1, 
    fillOpacity: 0.8 
}; 

function onEachFeature(feature, layer) { 
     layer.on({ 
      click: openSidebar 
     }); 
    } 

var lay1 = L.geoJson(json_Obras,{ 
     pointToLayer: function (feature, latlng) { 
     return L.circleMarker(latlng, ptsty) 
    }, 
     onEachFeature: onEachFeature 
    }).addTo(map); 


function openSidebar(e) { 
     sidebar.toggle(); 
     sidebar.setContent('<div id="sidebarin"><h2>' + e.target.feature.properties.OBRA + '</h2></div>'); 
    } 

Answer 1

コールバックonEachFeatureが呼び出される前に、あなたのdiv要素の内容を設定しているまず第一に。したがって、コンテンツは空です。代わりに、要素（サイドバーまたはdiv）にコンテンツを直接追加するか、サイドバーを切り替えるときにコンテンツを追加する方がよいでしょう。

onEachFeature: function (feature, layer) { 
    var popupContent = "<p>I started out as a GeoJSON " + 
    feature.geometry.type + ", but now I'm a Leaflet vector!</p>"; 

    if (feature.properties && feature.properties.popupContent) { 
     popupContent += feature.properties.popupContent; 
    } 
    $('#sidebar>.sidebar_content').html(popupContent); 
    $('.custom-div').html(popupContent); 
} 

I have prepared small demo which is working and you can get an idea how it can be implemented.

Answer 2

は、このような連結を使用してください。

var tbl1 = '<table><tr><th scope="row">OBRA </th></tr>'; 
 

 
var proy = L.geoJSON(json_Obras, { 
 
    onEachFeature: function(feature, layer) { 
 
     tbl1 += '<tr><td>' + (feature.properties['OBRA'] !== null ?  Autolinker.link(String(feature.properties['OBRA'])) : '') + '</td></tr>' 
 

 
    } 
 
}).addTo(map); 
 
tbl1 += '</table>';

jQueryのクリック機能

$('.gral').click(function() { 
    $('.t1').toggle('slow', function() { 
    if($(this).is(":visible")){ 
     document.getElementsByClassName('t1').innerHTML = tbl1; 
    }else{ 

    } 
    }); 
});