Leaflet Panel Layers报错：layer not defined in item问题求助

错误信息 #

Uncaught Error: layer not defined in item: 
    at e._addLayer (leaflet-panel-layers.js:163:10)
    at e.initialize (leaflet-panel-layers.js:73:10)
    at new e (leaflet.js:5:14525)
    at leaflet.html:89:22

问题原因 #

你将插件的配置项collapsibleGroups: true放在了图层定义数组layerController中，插件会遍历数组内的每一项并尝试解析为图层，但这个配置对象没有layer属性，因此触发报错。

修复步骤 #

把配置项从图层数组中分离出来，作为L.Control.PanelLayers构造函数的第二个参数传入：

修改前的错误代码片段 #

var layerController = [
    {
      name: "Base Layer",
      layer: layerBase
    },
    {
      group: "Marker Layers",
      layers: [
        {
          name: 'markerLayer',
          layer: markerLayer
        }
      ]
    },
    {collapsibleGroups: true}
  ]
map.addControl(new L.Control.PanelLayers(layerController))

修改后的正确代码片段 #

var layerController = [
    {
      name: "Base Layer",
      layer: layerBase
    },
    {
      group: "Marker Layers",
      layers: [
        {
          name: 'markerLayer',
          layer: markerLayer
        }
      ]
    }
  ]
// 将配置项作为第二个参数传入
map.addControl(new L.Control.PanelLayers(layerController, {collapsibleGroups: true}))

完整修复后的HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Etreab Kynubabt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js" type="text/javascript"></script>
    <script src="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-panel-layers@1.1.0/src/leaflet-panel-layers.css" />
    <script src="https://cdn.jsdelivr.net/npm/leaflet-panel-layers@1.1.0/src/leaflet-panel-layers.min.js"></script>
    <style>
      html, body, #map { width:100%; height:100%; margin:0; padding:0; z-index: 1; background: #214895; }
      #slider{ position: absolute; top: 10px; right: 10px; z-index: 5; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <input id="slider" type="range" min="0" max="1" step="0.05" value="1" oninput="layer.setOpacity(this.value)">
    <script type="text/javascript">
      var mapExtent = [0.00000000, -16637.00000000, 9462.00000000, 0.00000000];
      var mapMinZoom = 2;
      var mapMaxZoom = 7;
      var mapMaxResolution = 1.00000000;
      var mapMinResolution = Math.pow(2, mapMaxZoom) * mapMaxResolution;;
      var tileExtent = [0.00000000, -16637.00000000, 9462.00000000, 0.00000000];
      var crs = L.CRS.Simple;
      crs.transformation = new L.Transformation(1, -tileExtent[0], -1, tileExtent[3]);
      crs.scale = function(zoom) {
        return Math.pow(2, zoom) / mapMinResolution;
      };
      crs.zoom = function(scale) {
        return Math.log(scale * mapMinResolution) / Math.LN2;
      };
      
      var map = new L.Map('map', {
          maxZoom: mapMaxZoom,
          minZoom: mapMinZoom,
          crs: crs
      });

      map.fitBounds([
        crs.unproject(L.point(mapExtent[2], mapExtent[3])),
        crs.unproject(L.point(mapExtent[0], mapExtent[1]))
      ]);

      // creating a bounds object that defines the maximum extent of the map
      var maxBounds = L.latLngBounds([
        [-17500, -5000], // south west
        [1250, 15000]  // north east
      ]);

      // set the maximum bounds for the map
      map.setMaxBounds(maxBounds);
      // , {maxBoundsViscosity: 0} <-- this should make it draggy and snappy and what not
      L.control.mousePosition().addTo(map)

      var markerLayer = L.marker([51.5, -0.09]).addTo(map);

      // define the base layer variable
      var layerBase = L.tileLayer('{z}/{x}/{y}.png', {
        minZoom: mapMinZoom, maxZoom: mapMaxZoom,
        attribution: 'Render',
        noWrap: true,
        tms: false
      });

      // add the base layer to the map
      layerBase.addTo(map);

      var layerController = [
          {
            name: "Base Layer",
            layer: layerBase
          },
          {
            group: "Marker Layers",
            layers: [
              {
                name: 'markerLayer',
                layer: markerLayer
              }
            ]
          }
        ]
      map.addControl(new L.Control.PanelLayers(layerController, {collapsibleGroups: true}))

    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者508droid