修改图例示例按钮样式

Author: chenxianhuii

examples/leaflet/01_layersLegend.html

@@ -9,7 +9,7 @@
   <style>
     #layersList,
     #mapLegend {
-      max-height: 40vh;
+      max-height: calc(40vh - 55px);
       overflow: auto;
       font-size: 12px;
       text-wrap: nowrap;
@@ -53,7 +53,9 @@ <h5 class='panel-title text-center'>
         </h5>
       </div>
       <div class="panel-body" id="layersList"></div>
-
+      <div class="panel-footer">
+        <input class="btn btn-default" type="button" onclick="createLegend()" data-i18n="[value]resources.btn_getLegend"></input>
+      </div>
     </div>
     <div class="panel panel-primary legend" style="width:250px;margin-top: 50vh;position: absolute;float:right;">
       <div class="panel-heading">
@@ -68,7 +70,7 @@ <h5 class='panel-title text-center'>
   <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
   <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
   <script type="text/javascript">
-    var url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-jingjin/rest/maps/京津地区土地利用现状图";
+    var url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
     var map = L.map('map', {
       preferCanvas: true,
       crs: L.CRS.EPSG4326,
@@ -127,12 +129,6 @@ <h5 class='panel-title text-center'>
         var parentDom = document.getElementById('layersList');
         var layerName = '@@' + serviceResult.result.name;
         createLayersDom(layers, parentDom, layerName);
-        var submitBtn = document.createElement('input');
-        submitBtn.type = 'button';
-        submitBtn.classList = 'btn btn-default';
-        submitBtn.value = resources.btn_getLegend;
-        submitBtn.addEventListener('click', createLegend);
-        layersList.appendChild(submitBtn);
       });
     }
 

examples/mapboxgl/01_layersLegend.html

@@ -9,7 +9,7 @@
   <style>
     #layersList,
     #mapLegend {
-      max-height: 40vh;
+      max-height: calc(40vh - 55px);
       overflow: auto;
       font-size: 12px;
       text-wrap: nowrap;
@@ -53,7 +53,9 @@ <h5 class='panel-title text-center'>
           </h5>
         </div>
         <div class="panel-body" id="layersList"></div>
-
+        <div class="panel-footer">
+          <input class="btn btn-default" type="button" onclick="createLegend()" data-i18n="[value]resources.btn_getLegend"></input>
+        </div>
       </div>
       <div class="panel panel-primary legend" style="width:250px;margin-top: 50vh;position: absolute;">
         <div class="panel-heading">
@@ -149,12 +151,6 @@ <h5 class='panel-title text-center'>
         var parentDom = document.getElementById('layersList');
         var layerName = '@@' + serviceResult.result.name;
         createLayersDom(layers, parentDom, layerName);
-        var submitBtn = document.createElement('input');
-        submitBtn.type = 'button';
-        submitBtn.classList = 'btn btn-default';
-        submitBtn.value = resources.btn_getLegend;
-        submitBtn.addEventListener('click', createLegend);
-        layersList.appendChild(submitBtn);
       });
     }
 

examples/maplibregl/01_layersLegend.html

@@ -10,7 +10,7 @@
   <style>
     #layersList,
     #mapLegend {
-      max-height: 40vh;
+      max-height: calc(40vh - 55px);
       overflow: auto;
       font-size: 12px;
       text-wrap: nowrap;
@@ -54,7 +54,9 @@ <h5 class='panel-title text-center'>
           </h5>
         </div>
         <div class="panel-body" id="layersList"></div>
-
+        <div class="panel-footer">
+          <input class="btn btn-default" type="button" onclick="createLegend()" data-i18n="[value]resources.btn_getLegend"></input>
+        </div>
       </div>
       <div class="panel panel-primary legend" style="width:250px;margin-top: 50vh;position: absolute;">
         <div class="panel-heading">
@@ -150,12 +152,6 @@ <h5 class='panel-title text-center'>
         var parentDom = document.getElementById('layersList');
         var layerName = '@@' + serviceResult.result.name;
         createLayersDom(layers, parentDom, layerName);
-        var submitBtn = document.createElement('input');
-        submitBtn.type = 'button';
-        submitBtn.classList = 'btn btn-default';
-        submitBtn.value = resources.btn_getLegend;
-        submitBtn.addEventListener('click', createLegend);
-        layersList.appendChild(submitBtn);
       });
     }
 

examples/openlayers/01_layersLegend.html

@@ -10,7 +10,7 @@
   <style>
     #layersList,
     #mapLegend {
-      max-height: 40vh;
+      max-height: calc(40vh - 55px);
       overflow: auto;
       font-size: 12px;
       text-wrap: nowrap;
@@ -54,7 +54,9 @@ <h5 class='panel-title text-center'>
           </h5>
         </div>
         <div class="panel-body" id="layersList"></div>
-
+        <div class="panel-footer">
+          <input class="btn btn-default" type="button" onclick="createLegend()" data-i18n="[value]resources.btn_getLegend"></input>
+        </div>
       </div>
       <div class="panel panel-primary legend" style="width:250px;margin-top: 50vh;position: absolute;">
         <div class="panel-heading">
@@ -154,12 +156,6 @@ <h5 class='panel-title text-center'>
         var parentDom = document.getElementById('layersList');
         var layerName = '@@' + serviceResult.result.name;
         createLayersDom(layers, parentDom, layerName);
-        var submitBtn = document.createElement('input');
-        submitBtn.type = 'button';
-        submitBtn.classList = 'btn btn-default';
-        submitBtn.value = resources.btn_getLegend;
-        submitBtn.addEventListener('click', createLegend);
-        layersList.appendChild(submitBtn);
       });
     }