map_toggleMaps.html 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8. <title data-i18n="resources.title_toggleMaps"></title>
  9. <style type="text/css">
  10. .editPane {
  11. position: absolute;
  12. right: 50px;
  13. top: 50px;
  14. text-align: center;
  15. background: #FFF;
  16. display: inline-block;
  17. z-index: 1000;
  18. }
  19. </style>
  20. </head>
  21. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  22. <div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
  23. <div class='panel-heading'>
  24. <h5 class='panel-title text-center' data-i18n="resources.text_toggleMaps"></h5>
  25. </div>
  26. <div class='panel-body' id='params'>
  27. <p></p>
  28. <div align='center' class='input-group'>
  29. <input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.btn_toggleMaps" onclick="changeMap()"/>
  30. </div>
  31. </div>
  32. </div>
  33. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  34. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  35. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  36. <script type="text/javascript">
  37. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  38. var map, layerDay, layerNight, bt = false;
  39. var url1 = host + "/iserver/services/map-world/rest/maps/世界地图_Day";
  40. var url2 = host + "/iserver/services/map-world/rest/maps/世界地图_Night";
  41. map = new SuperMap.Map("map", {
  42. controls: [
  43. new SuperMap.Control.ScaleLine(),
  44. new SuperMap.Control.OverviewMap(),
  45. new SuperMap.Control.Zoom(),
  46. new SuperMap.Control.Navigation({
  47. dragPanOptions: {
  48. enableKinetic: true
  49. }
  50. })], allOverlays: false
  51. });
  52. layerDay = new SuperMap.Layer.TiledDynamicRESTLayer("世界地图_Day", url1, {transparent: true, cacheEnabled: true});
  53. layerDay.events.on({"layerInitialized": addLayer1});
  54. function addLayer1() {
  55. layerNight = new SuperMap.Layer.TiledDynamicRESTLayer("世界地图_Night", url2, {
  56. transparent: true,
  57. cacheEnabled: true
  58. });
  59. layerNight.events.on({"layerInitialized": addLayer2});
  60. }
  61. function addLayer2() {
  62. layerDay.isBaseLayer = true;
  63. layerNight.isBaseLayer = true;
  64. map.addLayers([layerDay, layerNight]);
  65. map.setCenter(new SuperMap.LonLat(0, 0), 2);
  66. }
  67. function changeMap() {
  68. if (bt == false) {
  69. layerDay.setVisibility(false);
  70. layerNight.setVisibility(true);
  71. map.setBaseLayer(layerNight);
  72. bt = true;
  73. } else if (bt == true) {
  74. layerDay.setVisibility(true);
  75. layerNight.setVisibility(false);
  76. map.setBaseLayer(layerDay);
  77. bt = false;
  78. }
  79. }
  80. </script>
  81. </body>
  82. </html>