OGC_wms.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7. <title data-i18n="resources.title_wms"></title>
  8. <style type="text/css">
  9. .editPane {
  10. position: absolute;
  11. right: 10px;
  12. top: 50px;
  13. text-align: center;
  14. background: #FFF;
  15. z-index: 1000;
  16. width: 300px;
  17. }
  18. </style>
  19. </head>
  20. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  21. <div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
  22. <div class='panel-heading'>
  23. <h5 class='panel-title text-center' data-i18n="resources.text_wms"></h5>
  24. </div>
  25. <div class='panel-body' id='params'>
  26. <div class='input-group'>
  27. <span style="margin-top: 15px" class='input-group-addon' data-i18n="resources.text_projection"></span>
  28. <select class='form-control selectbtn' id='projectionSelect' name="projectionSelect"
  29. onchange="switchProjection()">
  30. <option value="3857">3857</option>
  31. <option value="4326">4326</option>
  32. </select>
  33. </div>
  34. <p>
  35. <div class='input-group'>
  36. <span style="margin-top: 15px" class='input-group-addon' data-i18n="resources.text_wmsVersion"></span>
  37. <select class='form-control selectbtn' id='versionSelect' name="versionSelect"
  38. onchange="switchProjection()">
  39. <option value="1.3.0">1.3.0</option>
  40. <option value="1.1.1">1.1.1</option>
  41. </select>
  42. </div>
  43. </div>
  44. <div id='mousePositionDiv' class='smCustomControlMousePosition'></div>
  45. </div>
  46. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  47. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  48. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  49. <script type="text/javascript">
  50. var map, layer, wms1, wms2, wms3, wms4, newHtml, projectionSelect, versionSelect, lastLayer, mapDiv,
  51. host = window.isLocal ? window.server : "https://iserver.supermap.io";
  52. var url1 = host + "/iserver/services/map-china400/wms130/China";
  53. var url2 = host + "/iserver/services/map-china400/wms130/China_4326";
  54. var url3 = host + "/iserver/services/map-china400/wms111/China";
  55. var url4 = host + "/iserver/services/map-china400/wms111/China_4326";
  56. map = new SuperMap.Map('map', {
  57. controls: [new SuperMap.Control.Zoom(),
  58. new SuperMap.Control.Navigation(),
  59. new SuperMap.Control.ScaleLine(),
  60. new SuperMap.Control.LayerSwitcher()
  61. ]
  62. });
  63. projectionSelect = document.getElementById("projectionSelect");
  64. versionSelect = document.getElementById("versionSelect");
  65. mapDiv = document.getElementById("map");
  66. switchProjection();
  67. setposition();
  68. addHandler(window, "resize", setposition);
  69. function switchProjection() {
  70. if (lastLayer) {
  71. map.removeLayer(lastLayer);
  72. }
  73. if (versionSelect.value == "1.3.0") {
  74. if (projectionSelect.value == "3857") {
  75. //设置layers图层名称必须是 GetCapabilities 操作返回的文档中声明的Name元素的值,地图图层之间以半角英文逗号进行分隔。最左边的图层在最底,下一个图层放到前一个的上面,依次类推。
  76. //version,请求版本号。现支持”1.1.1”和”1.3.0”。
  77. //设置地图的projection,最大显示范围bounds参数
  78. //初始化WCS图层
  79. wms1 = new SuperMap.Layer.WMS("WMS1", url1, {
  80. layers: "China",
  81. version: '1.3.0'
  82. }, {
  83. projection: "EPSG:3857",
  84. maxExtent: new SuperMap.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
  85. });
  86. switchLayer(wms1);
  87. } else if (projectionSelect.value == "4326") {
  88. wms2 = new SuperMap.Layer.WMS("WMS2", url2, {
  89. layers: "China_4326",
  90. version: '1.3.0'
  91. }, {projection: "EPSG:4326", maxExtent: new SuperMap.Bounds(-180, -90, 180, 90)});
  92. switchLayer(wms2);
  93. }
  94. } else if (versionSelect.value == "1.1.1") {
  95. if (projectionSelect.value == "3857") {
  96. wms3 = new SuperMap.Layer.WMS("WMS3", url3, {
  97. layers: "China",
  98. version: '1.1.1'
  99. }, {
  100. projection: "EPSG:3857",
  101. maxExtent: new SuperMap.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
  102. });
  103. switchLayer(wms3);
  104. } else if (projectionSelect.value == "4326") {
  105. wms4 = new SuperMap.Layer.WMS("WMS4", url4, {
  106. layers: "China_4326",
  107. version: '1.1.1'
  108. }, {projection: "EPSG:4326", maxExtent: new SuperMap.Bounds(-180, -90, 180, 90)});
  109. switchLayer(wms4);
  110. }
  111. }
  112. document.getElementById("mousePositionDiv").innerHTML = newHtml;
  113. }
  114. function switchLayer(wms) {
  115. map.addLayers([wms]);
  116. var center = new SuperMap.LonLat(0, 0);
  117. map.setCenter(center, 1);
  118. lastLayer = wms;
  119. mapDiv.focus();
  120. newHtml = resources.text_currentInfo+"<br>" + resources.text_mapProjection + wms.projection + "<br>"+resources.text_currentVersion + wms.params.VERSION;
  121. }
  122. function addHandler(element, type, handler) {
  123. if (element.addEventListener) {
  124. element.addEventListener(type, handler, false);
  125. } else if (element.attachEvent) {
  126. element.attachEvent("on" + type, handler);
  127. } else {
  128. element["on" + type] = handler;
  129. }
  130. }
  131. function setposition() {
  132. var width = map.getSize().w;
  133. document.getElementById("mousePositionDiv").style.left = width / 2 - 100 + "px";
  134. }
  135. </script>
  136. </body>
  137. </html>