Question

我创建了一个图层组，并在我的Leaflet脚本中将其指定为叠加层。当我查看地图时，它看起来像预期的那样。但是，当我取消选中“叠加”复选框时，它不会隐藏图层组。

    /* Define base layers */
var URL='http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
var attrib='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
var cartoDbMap = new L.TileLayer(URL, {attribution: attrib}); 


/* create new layer group */
var layer_halloween = new L.LayerGroup();
var array_markers = new Array();

/* create custom marker which will represent complaints in layer 'layer_halloween' */
customMarker = L.circleMarker;

/* define function which adds markers from array to layer group */
function AddPointsToLayer() {
    for (var i=0; i<array_markers.length; i++) {
        array_markers[i].addTo(layer_halloween);
    }
} 

/* Get all complaints from DB and add them to layer_halloween */
$.ajax({
    url: "https://data.cityofnewyork.us/resource/fhrw-4uyv.json?descriptor=Loud%20Music/Party&$where=UPPER(city)%20NOT%20LIKE%20%22%25STATEN%25%22%20AND%20created_date%20BETWEEN%20'2015-10-29T17:00:00'%20AND%20'2015-11-01T08:00:00'",
    success: function(response) {
        $.each(eval(response), function(key, val) {      
            //fields in JSON that was returned          
            var fields = val.fields; 

            var lon=val.longitude;
            var lat=val.latitude;
            var date = val.created_date;

            //function which creates and adds new markers based on filtered values
            marker = new customMarker([lat, lon], {
                title: "test",
                opacity: 1.0  
            }); 
            marker.bindPopup(val.date);
            marker.setRadius(2);
            marker.addTo(map);
            array_markers.push(marker);
        });

        // add markers to layer and add it to map
        AddPointsToLayer();
    }
});

/* create map object */
var map = L.map('map', {
    center: [40.7518685, -73.984857],
    zoom: 11,
    fullscreenControl: true,
    fullscreenControlOptions: {
        position: 'topleft'
    },
    layers: [cartoDbMap, layer_halloween]
});

var baseLayers = {
    "Map": cartoDbMap,
};

var overlays = {
    "Halloween": layer_halloween
};

L.control.layers(baseLayers, overlays).addTo(map);

Answer 1

您的一个JSON点没有指定latitude或longitude（键385）。当尝试使用未定义的坐标创建标记时，它似乎以某种方式破坏了Leaflet。

只需检查是否存在这些字段：

success: function(response) {
    $.each(eval(response), function(key, val) {      
        //fields in JSON that was returned          
        var fields = val.fields; 

        var lon=val.longitude;
        var lat=val.latitude;
        var date = val.created_date;

        // Make sure lat and lon are specified, otherwise trying to
        // create a marker with undefined position breaks Leaflet.
        if (typeof lat === "undefined" || typeof lon === "undefined") {
            console.log("Invalid value: " + key + " / " + JSON.stringify(val));
            return;
        }

        //function which creates and adds new markers based on filtered values
        marker = new customMarker([lat, lon], {
            title: "test",
            opacity: 1.0  
        }); 
        marker.bindPopup(val.date);
        marker.setRadius(2);
        //marker.addTo(map); // This is unnecessary
        array_markers.push(marker);
    });

    // add markers to layer and add it to map
    AddPointsToLayer();
}

演示：http://jsfiddle.net/ve2huzxw/34/（检查控制台以查看无效点）

正如iH8所指出的，您无需在地图和layer_halloween上添加标记。

Leaflet.js图层控制：取消选中叠加不会隐藏关联的图层组

1 个答案: