others_contextMenu.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="utf-8">
  8. <title data-i18n="resources.title_contextMenu"></title>
  9. <style type="text/css">
  10. ul {
  11. list-style-type: none;
  12. width: 112px;
  13. }
  14. #myMenu {
  15. position: absolute;
  16. visibility: hidden;
  17. z-index: 9999;
  18. }
  19. #myMenu ul {
  20. float: left;
  21. border: 1px solid #979797;
  22. background: #f1f1f1 url(./images/line.png) 36px 0 repeat-y;
  23. padding: 2px;
  24. box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
  25. }
  26. #myMenu ul li {
  27. width: 112px;
  28. float: left;
  29. clear: both;
  30. height: 30px;
  31. cursor: pointer;
  32. line-height: 30px;
  33. }
  34. #myMenu ul li:hover {
  35. background-color: #CAE1FF;
  36. }
  37. </style>
  38. </head>
  39. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;;">
  40. <div id="map" style="margin:0 auto;width: 100%;height: 100%;"></div>
  41. <div id="myMenu">
  42. <ul style="margin-top: 0px; margin-bottom: 0px; margin-left:0px;">
  43. <li onclick="zoomin()">
  44. <div style="float:left;padding-right: 5px;width:30px;height:30px"><img src="./images/plus.png"/></div>
  45. <div data-i18n="resources.btn_enlarge"
  46. style="float:left;width:52px;height:30px; text-align: center; font-size: 15px;">
  47. </div>
  48. </li>
  49. <li onclick="zoomout()">
  50. <div style="float:left;padding-right: 5px;width:30px;height:30px"><img src="./images/subtract.png"/></div>
  51. <div data-i18n="resources.btn_lessen"
  52. style="float:left;width:52px;height:30px; text-align: center; font-size: 15px;">
  53. </div>
  54. </ul>
  55. </div>
  56. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  57. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  58. <script type="text/javascript">
  59. var map, layer, menu, host = window.isLocal ? window.server : "https://iserver.supermap.io",
  60. url = host + "/iserver/services/map-world/rest/maps/World";
  61. function init() {
  62. var broz = SuperMap.Util.getBrowser();
  63. if (broz.device === 'android' || broz.device === 'apple') {
  64. widgets.alert.showAlert(resources.msg_supportEquipment, false);
  65. }
  66. map = new SuperMap.Map("map", {
  67. eventListeners: {
  68. "movestart": function () {
  69. menu.style.visibility = "hidden";
  70. },
  71. "click": function () {
  72. menu.style.visibility = "hidden";
  73. }
  74. }
  75. });
  76. layer = new SuperMap.Layer.TiledDynamicRESTLayer("world", url, {
  77. transparent: true,
  78. cacheEnabled: true
  79. }, {maxResolution: "auto"});
  80. layer.events.on({"layerInitialized": addLayer});
  81. map.events.register("mousedown");
  82. }
  83. $(document).ready(function () {
  84. init();
  85. widgets.alert.showAlert(resources.msg_clickZoom, true);
  86. });
  87. function addLayer() {
  88. map.addLayers([layer]);
  89. map.setCenter(new SuperMap.LonLat(4503.6240321526, -3861.911472192499), 1);
  90. }
  91. //创建EventUtil对象
  92. var EventUtil = {
  93. addHandler: function (element, type, handler) {
  94. if (element.addEventListener) {
  95. element.addEventListener(type, handler, false);
  96. }
  97. else if (element.attachEvent) {
  98. element.attachEvent("on" + type, handler);
  99. }
  100. },
  101. getEvent: function (event) {
  102. return event ? event : window.event;
  103. },
  104. //取消事件的默认行为
  105. preventDefault: function (event) {
  106. if (event.preventDefault) {
  107. event.preventDefault();
  108. } else {
  109. event.returnValue = false;
  110. }
  111. },
  112. stopPropagation: function (event) {
  113. if (event.stopPropagation) {
  114. event.stopPropagation();
  115. } else {
  116. event.cancelBubble = true;
  117. }
  118. }
  119. };
  120. EventUtil.addHandler(window, "load", function (event) {
  121. var mapDiv = document.getElementById("map");
  122. menu = document.getElementById("myMenu");
  123. EventUtil.addHandler(mapDiv, "contextmenu", function (event) {
  124. event = EventUtil.getEvent(event);
  125. EventUtil.preventDefault(event);
  126. menu.style.left = event.clientX + "px";
  127. menu.style.top = event.clientY + "px";
  128. menu.style.visibility = "visible";
  129. });
  130. EventUtil.addHandler(myMenu, "contextmenu", function (event) {
  131. event = EventUtil.getEvent(event);
  132. EventUtil.preventDefault(event);
  133. menu.style.visibility = "visible";
  134. });
  135. });
  136. //放大 ,在当前缩放级别的基础上放大一级。
  137. function zoomin() {
  138. menu.style.visibility = "hidden";
  139. map.zoomIn();
  140. }
  141. //缩小,在当前缩放级别的基础上缩小一级。
  142. function zoomout() {
  143. menu.style.visibility = "hidden";
  144. map.zoomOut();
  145. }
  146. </script>
  147. </body>
  148. </html>