传单js删除一层，添加另一层并按第一层的变量过滤

Question

我有一个传单地图，通过数据库的两个URL提供数据。 我使用Django和Django-Leaflet。 Python 3.5，PostgreSQL 9.6。

加载页面时显示 layerA。 打开我想要的图层A的弹出窗口 可以通过单击LayerA中项目的弹出窗口来加载图层B。B层中的项目属于A层中通过外键连接的某些项目。

这是一个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);
        }

我收到以下错误：

类型错误： t 未定义

Answer 1

您需要

将getLayerB添加到窗口中，以便弹出窗口的点击处理程序可以访问它

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>