fix 图例示例style

Author: chenxianhuii

examples/leaflet/01_layersLegend.html

@@ -12,6 +12,7 @@
       max-height: 40vh;
       overflow: auto;
       font-size: 12px;
+      text-wrap: nowrap;
     }
 
     #layersList label {
@@ -63,7 +64,6 @@ <h5 class='panel-title text-center'>
       <div class="panel-body" id="mapLegend"></div>
     </div>
   </div>
-  </div>
 
   <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
   <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
@@ -89,12 +89,12 @@ <h5 class='panel-title text-center'>
           layerGroup.innerHTML = layer.name;
           layerGroup.className = 'layer-group';
           layerGroup.setAttribute('data-toggle', 'collapse');
-          layerGroup.setAttribute('data-target', '#' + layer.name);
+          layerGroup.setAttribute('data-target', '#' + layer.name.replace(/#/g, '_'));
           groupWrapper.appendChild(layerGroup);
 
           parentDom.appendChild(groupWrapper);
           var collapse = document.createElement('div');
-          collapse.id = layer.name;
+          collapse.id = layer.name.replace(/#/g, '_');
           collapse.className = 'collapse';
           collapse.style.paddingLeft = '18px';
           groupWrapper.appendChild(collapse);

examples/mapboxgl/01_layersLegend.html

@@ -12,6 +12,7 @@
       max-height: 40vh;
       overflow: auto;
       font-size: 12px;
+      text-wrap: nowrap;
     }
 
     #layersList label {
@@ -110,12 +111,12 @@ <h5 class='panel-title text-center'>
           layerGroup.innerHTML = layer.name;
           layerGroup.className = 'layer-group';
           layerGroup.setAttribute('data-toggle', 'collapse');
-          layerGroup.setAttribute('data-target', '#' + layer.name);
+          layerGroup.setAttribute('data-target', '#' + layer.name.replace(/#/g, '_'));
           groupWrapper.appendChild(layerGroup);
 
           parentDom.appendChild(groupWrapper);
           var collapse = document.createElement('div');
-          collapse.id = layer.name;
+          collapse.id = layer.name.replace(/#/g, '_');
           collapse.className = 'collapse';
           collapse.style.paddingLeft = '18px';
           groupWrapper.appendChild(collapse);

examples/maplibregl/01_layersLegend.html

@@ -13,6 +13,7 @@
       max-height: 40vh;
       overflow: auto;
       font-size: 12px;
+      text-wrap: nowrap;
     }
 
     #layersList label {
@@ -111,12 +112,12 @@ <h5 class='panel-title text-center'>
           layerGroup.innerHTML = layer.name;
           layerGroup.className = 'layer-group';
           layerGroup.setAttribute('data-toggle', 'collapse');
-          layerGroup.setAttribute('data-target', '#' + layer.name);
+          layerGroup.setAttribute('data-target', '#' + layer.name.replace(/#/g, '_'));
           groupWrapper.appendChild(layerGroup);
 
           parentDom.appendChild(groupWrapper);
           var collapse = document.createElement('div');
-          collapse.id = layer.name;
+          collapse.id = layer.name.replace(/#/g, '_');
           collapse.className = 'collapse';
           collapse.style.paddingLeft = '18px';
           groupWrapper.appendChild(collapse);

examples/openlayers/01_layersLegend.html

@@ -13,6 +13,7 @@
       max-height: 40vh;
       overflow: auto;
       font-size: 12px;
+      text-wrap: nowrap;
     }
 
     #layersList label {
@@ -114,12 +115,12 @@ <h5 class='panel-title text-center'>
           layerGroup.innerHTML = layer.name;
           layerGroup.className = 'layer-group';
           layerGroup.setAttribute('data-toggle', 'collapse');
-          layerGroup.setAttribute('data-target', '#' + layer.name);
+          layerGroup.setAttribute('data-target', '#' + layer.name.replace(/#/g, '_'));
           groupWrapper.appendChild(layerGroup);
 
           parentDom.appendChild(groupWrapper);
           var collapse = document.createElement('div');
-          collapse.id = layer.name;
+          collapse.id = layer.name.replace(/#/g, '_');
           collapse.className = 'collapse';
           collapse.style.paddingLeft = '18px';
           groupWrapper.appendChild(collapse);