リーフレットjsは1つのレイヤーを削除し、別のレイヤーを追加し、最初のレイヤーの変数でフィルタリングします。

Question

データベースから2つのURLにデータを配信するチラシマップがあります。私は、djangoとdjango-leafletを使用します。 python 3.5、postgresql 9.6。

ページを読み込むときにレイヤAが表示されます。レイヤーAのポップアップを開くレイヤーAのアイテムのポップアップをクリックしてレイヤーBをロードすることができます。 LayerBの項目は、外部キーで接続されたLayerAの特定の項目に属します。ここ

はjsfiddleです： https://jsfiddle.net/zt56nmog/11/

HERESに私のコード：

function map_init_basic (map, options) { 
    urlA = "http://127.0.0.1:8000/data.A" // Geojson 
    urlB = "http://127.0.0.1:8000/data.B" // Geojson 

    layerA = L.geoJson(null, { 
       pointToLayer: function(feature, latlng) { 
        return L.marker(latlng, {icon: hvIcon}); 
        }, 
       onEachFeature: function(feature, layer) { 
        popupText = "button to call layerA" + "<button id='theirFlats' type='button' class='btn btn-link' onclick='getLayerB(\""+feature.id+"\");'>show layerB:</button>"; 
        layer.bindPopup(popupText); 
       } 
       }); 


    layerB = L.geoJson(null, { 
       filter: function(feature, layer) { 
        {return feature.properties.id_hv == id_layerA;}; 
       }, 
       pointToLayer: function(feature, latlng) { 
        return L.marker(latlng, {icon: whgIcon}); 
       } 
       }); 


     $.getJSON(urlA, function(data){ 
       layerA.addData(data); 
     }); 

     layerA.addTo(map); 

} // end map_init 

function getLayerB(id_layerA){ 
     alert(id_layerA); // alerts the right id 
     layerA.remove(); // works, removes the layerA 

     alert(urlB) 

     $.getJSON(urlB, function(data){ 
       layerB.addData(data); 
       console.log(data); 
       }); 

     layerB.addTo(map); 
     alert(layerB) 
     map.fitBounds(layerB); 

     } 

私は次のエラーを取得する：

TypeError例外：tは

Answer 1

を定義されていないあなたはgetLayerBを追加する必要がありますポップアップのためのonclickハンドラにアクセス可能にするウィンドウへ

urlA = {"features":[{"id":1736,"type":"Feature","properties":{"hv_city_name":"Berlin","hv_id":1736},"geometry":{"type":"Point","coordinates":[13.299364,52.487194]}},{"id":2814,"type":"Feature","properties":{"hv_city_name":"Berlin","hv_id":2814},"geometry":{"type":"Point","coordinates":[13.627012,52.540632]}}]} 
 

 
urlB = {"features":[{"geometry":{"type":"Point","coordinates":[13.41001,52.49778]},"properties":{"id_hv":2814,"whg_scout_id":100176801},"id":100176801,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.6312,52.4528]},"properties":{"id_hv":2814,"whg_scout_id":100195258},"id":100195258,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.42556,52.53958]},"properties":{"id_hv":1736,"whg_scout_id":93580383},"id":93580383,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.41757,52.55054]},"properties":{"id_hv":2814,"whg_scout_id":66425039},"id":66425039,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.37035,52.53373]},"properties":{"id_hv":1736,"whg_scout_id":100201644},"id":100201644,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.24678,52.50916]},"properties":{"id_hv":2814,"whg_scout_id":100205048},"id":100205048,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.3163,52.52065]},"properties":{"id_hv":1736,"whg_scout_id":99870716},"id":99870716,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.33467,52.46926]},"properties":{"id_hv":2814,"whg_scout_id":99350260},"id":99350260,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.33144,52.48821]},"properties":{"id_hv":1736,"whg_scout_id":100031435},"id":100031435,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.2003,52.51963]},"properties":{"id_hv":2814,"whg_scout_id":100183131},"id":100183131,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.46024,52.50881]},"properties":{"id_hv":1736,"whg_scout_id":100206080},"id":100206080,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.29768,52.62473]},"properties":{"id_hv":2814,"whg_scout_id":98474448},"id":98474448,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.48831,52.51692]},"properties":{"id_hv":1736,"whg_scout_id":100183115},"id":100183115,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.47752,52.60434]},"properties":{"id_hv":2814,"whg_scout_id":100171391},"id":100171391,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.32684,52.46749]},"properties":{"id_hv":1736,"whg_scout_id":100180115},"id":100180115,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.37858,52.50024]},"properties":{"id_hv":2814,"whg_scout_id":88565013},"id":88565013,"type":"Feature"}]} 
 

 

 

 

 
var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', { 
 
\t maxZoom: 18, 
 
\t attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
 
}); 
 

 
var map = L.map('map') 
 
    .setView([52.5, 13.5], 10) 
 
    .addLayer(OpenStreetMap_BlackAndWhite); 
 

 
     
 
     
 
layerA = L.geoJson(urlA, { 
 
       pointToLayer: function(feature, latlng) { 
 
        return L.marker(latlng); 
 
        }, 
 
       onEachFeature: function(feature, layer) { 
 
        popupText = "button to call layerB" + "<button id='belongs2A' type='button' class='btn btn-link' onclick='getLayerB(\""+feature.id+"\");'>show layerB:</button>"; 
 
        layer.bindPopup(popupText); 
 
       }, 
 
       pointToLayer: function(feature, latlng) { 
 
        return L.circle(latlng, {color: 'red'}); 
 
       } 
 
       }); 
 

 
function getLayerB(id_layerA){ 
 
     alert(id_layerA); // alerts the right id 
 
     layerA.remove(); // works, removes the layerA 
 
     
 
     layerB = L.geoJson(urlB, { 
 
       filter: function(feature, layer) { 
 
        {return feature.properties.id_hv == parseInt(id_layerA);}; 
 
       }, 
 
       pointToLayer: function(feature, latlng) { 
 
        return L.circle(latlng, {color: 'blue'}); 
 
       } 
 
       }); 
 
     map.addLayer(layerB); 
 
     } 
 

 
// i have made reference getLayerB to window to make it accessible for onclick handler 
 
// which can call only global functions 
 
window.getLayerB = getLayerB; 
 

 

 

 
map.addLayer(layerA);

#map { 
 
    height: 500px; 
 
    width: 100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" rel="stylesheet"/> 
 
<div id="map"></div>