Question

使用Leaflet自学JavaScript创建一些简单的Web地图。此步骤是将图层控件添加到地图中。我正在测试基础层和覆盖层的控制。

我收到了JS类型的错误。我已经使用了一些调试但是找不到我做错了什么。

使用Map API的“layers”选项时发生错误。如果我删除该选项，则不会发生错误（显然地图不起作用，所以刚刚进行调试）。

在Firefox中使用调试器，叠加层组的内容看起来没问题。我会很感激另一双眼睛。

// Creates a variable to hold the attribution including OSM, Creative Commons license,and Mapbox imagery; this is done via variable because two tileLayers will each need attribution
    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';

    var grayscale = L.tileLayer(mbUrl, {id: 'examples.map-20v6611k', attribution: mbAttr}),
        streets = L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7',   attribution: mbAttr});

// var myURL = jQuery( 'script[src$="kcdfp.js"]' ).attr( 'src' ).replace( 'kcdfp.js', '' );  // Gets the URL and removes the file name, which will be replaced in the icon API; can't get it to work
    var myURL = 'http://www.myspatialhome.org/';  // Sets the url for icon images

// Criteria for overlay layers
// In Active -1=YES, 0 = NO
// Create new layerGroups for overlay
    var active = new L.layerGroup();
    var inactive = new L.layerGroup();

// Create Marker icons
    var myIcon = L.icon({
    iconUrl: myURL + 'images/pin24.png',
    iconRetinaUrl: myURL + 'images/pin48.png',
    iconSize: [29, 24],
    iconAnchor: [9, 21],
    popupAnchor: [0, -14]
});

// Loop through the entire JSON file
for ( var i=0; i < kcdfp.length; ++i ) 
    {
    if (kcdfp[i].In_Active == 0){  // Inactive=no, i.e. Active
        L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} )
        .bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
        .addTo( active );  // Add to active layer group
    }
    else {  // Otherwise show a Inactive
        L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} )
        .bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
        .addTo( inactive );  // Add to inactive layer group
        }
}

// Create the map
var map = L.map( 'map', {
        center: [47.5, -121.95],
        minZoom: 10,
        zoom: 10,
        layers: [streets, active, inactive]  // ERROR
});
// Set variables for layer control
    var baseLayers = {
        "Grayscale": grayscale,
        "Streets": streets
    };
    var overlays = {
        "Active": active,
        "Inactive": inactive
    };  // Sets the other variable for layer control

    L.control.layers(baseLayers, overlays).addTo(map);  // Adds a layer control to the map

编辑：进一步的测试让我想到我创建layerGroups的方式是错误的。我将Map更改为仅包含street tileLayer并添加了带有.addTo（map）子句的layerGroups。

将layerGroups添加到地图时会出现错误。

看来layerGroups想要一个数组。我用.addLayer子句更改了Marker。 layerGroup是否将其视为数组元素？

// Loop through the entire JSON file
for ( var i=0; i < kcdfp.length; ++i ) 
    {
    if (kcdfp[i].In_Active == 0){  // Inactive=no, i.e. Active
        L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} )
        .bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
        .addLayer( active );  // Add to active layer group
    }
    else {  // Otherwise show a Inactive
        L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} )
        .bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
        .addLayer( inactive );  // Add to inactive layer group
        }
}

Answer 1

您的添加图层流程有点逆转。

他们应该看起来像

    var newMarker = L.marker( [kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon} ).bindPopup( '<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>' )
    active.addLayer(newMarker);  // Add to active layer group

Answer 2

根问题证明是数据错误（即lat / lon NULL）。测试包括原始JS和基于提议的答案进行修改，该答案将“var newMarker”添加到L.marker API。最初的JS基于Leaflet教程6。

我很好奇选择一种方法比另一方更有优势。

感谢您的回答。它有助于我的JS / Leaflet学习。

Leaflet layerGroup和Control;得到类型错误

2 个答案: