javascript - Leaflet js删除一层，添加另一层并通过第一层的变量进行过滤

我有一个传单地图，用于通过数据库提供两个URL上的数据。我用django和django-leaflet。 python 3.5，postgresql 9.6。

加载页面时显示layerA。打开layerA的弹出窗口，我想通过单击LayerA中某个项目的弹出窗口来加载layerB。 LayerB中的项目属于通过外键连接的LayerA中的某些项目。

这是一个jsfiddle：
https://jsfiddle.net/zt56nmog/11/

这是我的代码：

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未定义

最佳答案

您需要将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', {
	maxZoom: 18,
	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>