map_overlayLayer.html 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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_overlayLayer"></title>
  9. <style type="text/css">
  10. body {
  11. margin: 0;
  12. overflow: hidden;
  13. background: #fff;
  14. width: 100%;
  15. height: 100%
  16. }
  17. #map {
  18. position: absolute;
  19. width: 100%;
  20. height: 100%;
  21. }
  22. .editPane {
  23. position: absolute;
  24. right: 10px;
  25. top: 50px;
  26. width: 350px;
  27. text-align: center;
  28. background: #FFF;
  29. z-index: 1000;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id="map">
  35. <div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
  36. <div class='panel-heading'>
  37. <h5 class='panel-title text-center' data-i18n="resources.text_mapOverlay"></h5>
  38. </div>
  39. <div class='panel-body' id='params'>
  40. <div class='input-group'>
  41. <span class='input-group-addon' data-i18n="resources.text_opacity"></span>
  42. <input id='layerOpacity' type='text' class='form-control' data-i18n="[placeholder]resources.text_input_tips_opacity"/>
  43. </div>
  44. <p></p>
  45. <div align='right' class='input-group'>
  46. <input type='button' id='calc' class='btn btn-primary' data-i18n="[value]resources.btn_createOpacity" onclick="setLayerOpacity()"/>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  52. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  53. <script type="text/javascript">
  54. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  55. var map, layerWorld, layerJingjing;
  56. var url = host + "/iserver/services/map-world/rest/maps/World";
  57. var url2 = host + "/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
  58. map = new SuperMap.Map("map", {
  59. controls: [
  60. new SuperMap.Control.LayerSwitcher(),
  61. new SuperMap.Control.ScaleLine(),
  62. new SuperMap.Control.OverviewMap(),
  63. new SuperMap.Control.Zoom(),
  64. new SuperMap.Control.Navigation({
  65. dragPanOptions: {
  66. enableKinetic: true
  67. }
  68. })], allOverlays: true
  69. });
  70. layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {
  71. transparent: true,
  72. cacheEnabled: true
  73. });
  74. layerWorld.events.on({"layerInitialized": addLayer1});
  75. function setLayerOpacity() {
  76. var numStr = document.getElementById('layerOpacity').value;
  77. if (numStr && !isNaN(numStr)) {
  78. if (Number(numStr) >= 0 && Number(numStr) <= 1) {
  79. layerJingjing.setOpacity(Number(numStr));
  80. }
  81. }
  82. }
  83. function addLayer1() {
  84. layerJingjing = new SuperMap.Layer.TiledDynamicRESTLayer("京津地区地图", url2, {
  85. transparent: true,
  86. cacheEnabled: true
  87. });
  88. layerJingjing.events.on({"layerInitialized": addLayer2});
  89. layerJingjing.setOpacity(0.8);
  90. }
  91. function addLayer2() {
  92. map.addLayers([layerWorld, layerJingjing]);
  93. map.setCenter(new SuperMap.LonLat(118, 40), 7);
  94. }
  95. </script>
  96. </body>
  97. </html>