如何使用 LeafletJS 的图层组和图层控件将 GeoJSON 数据添加到图层答案

【问题标题】：How to add GeoJSON data to a layer using LeafletJS' layer group and layer control如何使用 LeafletJS 的图层组和图层控件将 GeoJSON 数据添加到图层
【发布时间】：2021-09-16 11:06:09
【问题描述】：

在 LeafletJS tutorial on layer control 之后，我设置了相同的代码，但我使用的是 openstreets 而不是 Mapbox。我有这一切工作。

现在，我想添加我自己的加载了 GeoJSON 数据的叠加层。我的数据在一个单独的 javascript 文件中 <script src="dataBlackspots-mini2016.js"></script> 其中定义了 var blackaus16Data。这是经过充分测试的，并且在其他情况下也有效。

我设置了以下语句来添加额外的覆盖图

var testsix = L.geoJson(black16Data);
var testme = L.layerGroup(testsix);

这个控件出现在我的地图上，但是我如何连接那个 GeoJSON 让它出现在这个图层上？我从以下语句开始，但它会导致致命错误。

(Uncaught TypeError: Cannot read properties of undefined (reading '添加层'）在 i.addTo (Layer.js:52)

var testsix = L.geoJson(black16data).addTo(map);

我也尝试了以下

var testsix = L.geoJson(black26data);
var testme = L.layerGroup(testsix.addTo(map));

我已经阅读了十几个与图层控件相关的其他 stackkoverflow 示例，我尝试了各种变体，但我就是不明白...我无法连接任何 geojson，以便数据显示在底图或叠加层上使用教程中概述的约定时的映射。

我对 javascript 和整个映射类型都很陌生。

这是我的完整代码，我留下了一些注释代码，以便我的修改更加明显。

<!DOCTYPE html>
<html>
<head>
    <title>Full Screen Leaflet Map</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   <script src="https://kit.fontawesome.com/6d79777d2b.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="resources/leaflet-beautify-marker-icon.css"/>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
   <script src="resources/leaflet-beautify-marker-icon.js"></script> 
   <script src="dataBlackspots-mini2016.js"></script>
   <script>
    
// The following variable is used to change the default marker using beautify marker plugin
    options2 = {
//            iconShape: 'rectangle-dot'
                iconShape: 'circle-dot'
               , borderWidth: 5
               , borderColor: '#FF073A'
        };
        
var adelaide = L.marker([-34.9998826,138.330985]).bindPopup('This is Adelaide, SA'),
    innam    = L.marker([-27.74951840398218, 140.74142561361253]).bindPopup('This is Innamminka, SA'),
    coober    = L.marker([-29.0076186,134.6811297]).bindPopup('This is Coober, SA'),
    tonsley    = L.marker([-35.0081757,138.5698093]).bindPopup('This is Tonsley, SA');
    
    var testsix = L.geoJson(black16Data);
//  testsix.addTo(map);

var cities = L.layerGroup([adelaide, innam, coober, tonsley]);
var testme = L.layerGroup(testsix);

// var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', tileSize: 512, zoomOffset: -1, attribution: mapboxAttribution}),
//    streets   = L.tileLayer(mapboxUrl, {id: 'MapID', tileSize: 512, zoomOffset: -1, attribution: mapboxAttribution});

// var osmlink = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

var grayscale = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18, });
var streets   = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18, });



var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets,
};

var overlayMaps = {
    "Cities": cities,
    "Test": testme
};

var map =   L.map('map', {
        layers: [grayscale, cities] 
 }).setView([-31.9410435,130.5127033], 6);  

        L.control.layers(baseMaps, overlayMaps).addTo(map);

            // testing font awesome for marker  WORKS!! the bright red spot
        L.marker([-34.9414961, 138.6584563], {
                icon: L.BeautifyIcon.icon(options2),
                draggable: true
                }).addTo(map).bindPopup("popup").bindPopup("This is a BeautifyMarker");
            
            
//  The following code has been tested.
//          L.geoJson(black16Data, {                    //Load 2016 data using font awesome for marker bright red
//              pointToLayer: function (feature, latlng) 
//              {
//                  return L.marker(latlng, 
//                  {
//                      icon: L.BeautifyIcon.icon(options2)
//                  });
//              }
//              }).addTo(map);
//          L.geoJson(black18Data, {                    //Load 2018 data using font awesome for black marker
//              pointToLayer: function (feature, latlng) 
//              {
//                  return L.marker(latlng, 
//                  {
//                      icon: L.BeautifyIcon.icon(options)
//                  });
//              }
//              }).addTo(map);

//debugger;         
    </script>
</body>
</html>

【问题讨论】：

似乎传单对象仍在加载中。仅在加载所有内容后尝试启动传单操作。例如：document.addEventListener("DOMContentLoaded", function() { // your leaflet code}
感谢您的宝贵时间。这不是问题。

标签： javascript leaflet geojson

【解决方案1】：

我终于解决了这个问题！我删除了下面这行代码

var testsix = L.geoJson(black16Data);

我替换了这一行 var testme = L.layerGroup(testsix);

用这个var testme = L.geoJson(black16Data);

我的数据现在出现在名为 Test 的叠加层上。

【讨论】：

不要忘记将您的答案标记为帮助解决您的问题的答案 :)