others_rightClick.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  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_rightClick"></title>
  9. <style type="text/css">
  10. #myMenu {
  11. position: absolute;
  12. background-color: silver;
  13. visibility: hidden;
  14. }
  15. ul {
  16. list-style-type: none;
  17. width: 112px;
  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: 35px;
  31. cursor: pointer;
  32. line-height: 32px;
  33. }
  34. #myMenu ul li:hover {
  35. background-color: #CAE1FF;
  36. }
  37. .editPane {
  38. position: absolute;
  39. right: 60px;
  40. top: 50px;
  41. text-align: center;
  42. background: #FFF;
  43. z-index: 1000;
  44. }
  45. </style>
  46. </head>
  47. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  48. <div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
  49. <div class='panel-heading'>
  50. <h5 class='panel-title text-center' data-i18n="resources.text_rightClick"></h5>
  51. </div>
  52. <div class='panel-body' id='params'>
  53. <p></p>
  54. <div align='center' class='button-group'>
  55. <input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.text_input_value_addData" onclick="addData()"/>
  56. <label id="lab"></label>
  57. </div>
  58. </div>
  59. </div>
  60. <div id="map" style="margin:0 auto;width: 100%;height: 100%; position: relative;"></div>
  61. <div id ="myMenu">
  62. <ul style="margin-top: 0px; margin-bottom: 0px;margin-left: 0px" >
  63. <li onclick="setCenter()" >
  64. <div style="float:left;padding-right: 5px;width:30px;height:30px;"><img src="./images/center.png" /></div>
  65. <div data-i18n="resources.text_mediacy" style="float:left;width:52px;height:30px; text-align: center; font-size: 15px;"></div> </li>
  66. <li onclick="deleteSelect()">
  67. <div style="float:left;padding-right: 5px;width:30px;height:30px"><img src="./images/delete.png" /></div>
  68. <div data-i18n="resources.text_input_value_delete" style="float:left;width:52px;height:30px; text-align: center; font-size: 15px;"></div> </li>
  69. </li>
  70. </ul>
  71. </div>
  72. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  73. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  74. <script type="text/javascript">
  75. var map, layer, markerLayer, gmarker, marker, menu,
  76. host = window.isLocal ? window.server : "https://iserver.supermap.io",
  77. url = host + "/iserver/services/map-world/rest/maps/World";
  78. function init()
  79. {
  80. var broz = SuperMap.Util.getBrowser();
  81. if (broz.device === 'android'|| broz.device === 'apple') {
  82. widgets.alert.showAlert(resources.msg_supportEquipment,false);
  83. return;
  84. }
  85. map = new SuperMap.Map("map",{
  86. eventListeners:{"movestart":function(){
  87. menu.style.visibility="hidden";
  88. },
  89. "click":function(){
  90. menu.style.visibility="hidden";
  91. }}
  92. });
  93. layer = new SuperMap.Layer.TiledDynamicRESTLayer("world",url,{transparent: true, cacheEnabled:true}, {maxResolution:"auto"});
  94. layer.events.on({"layerInitialized":addLayer});
  95. markerLayer = new SuperMap.Layer.Markers("makerLayer");
  96. }
  97. $(document).ready(function () {
  98. init();
  99. });
  100. //创建EventUtil对象
  101. var EventUtil = {
  102. addHandler: function (element, type, handler) {
  103. if (element.addEventListener) {
  104. element.addEventListener(type, handler, false);
  105. }
  106. else if (element.attachEvent) {
  107. element.attachEvent("on" + type, handler);
  108. }
  109. },
  110. getEvent: function (event) {
  111. return event ? event : window.event;
  112. },
  113. //取消事件的默认行为
  114. preventDefault: function (event) {
  115. if (event.preventDefault) {
  116. event.preventDefault();
  117. } else {
  118. event.returnValue = false;
  119. }
  120. },
  121. stopPropagation: function (event) {
  122. if (event.stopPropagation) {
  123. event.stopPropagation();
  124. } else {
  125. event.cancelBubble = true;
  126. }
  127. }
  128. };
  129. EventUtil.addHandler(window, "load", function (event) {
  130. menu = document.getElementById("myMenu");
  131. EventUtil.addHandler(myMenu, "contextmenu", function (event) {
  132. event = EventUtil.getEvent(event);
  133. EventUtil.preventDefault(event);
  134. menu.style.visibility = "visible";
  135. });
  136. EventUtil.addHandler(document, "click", function (event) {
  137. menu.style.visibility = "hidden";
  138. });
  139. });
  140. function addLayer() {
  141. map.addLayers([layer, markerLayer]);
  142. //显示地图范围
  143. map.setCenter(new SuperMap.LonLat(116.47, 38.61), 2);
  144. }
  145. function addData() {
  146. markerLayer.removeMarker(marker);
  147. var points = new SuperMap.LonLat(116.47, 38.61)
  148. var size = new SuperMap.Size(44, 33),
  149. offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
  150. icon = new SuperMap.Icon("./images/marker.png", size, offset);
  151. marker = new SuperMap.Marker(points, icon);
  152. marker.events.on({
  153. "rightclick": menuDiv,
  154. "scope": marker
  155. });
  156. markerLayer.addMarker(marker);
  157. widgets.alert.showAlert(resources.msg_rightClick,true);
  158. }
  159. function menuDiv() {
  160. var p = map.getPixelFromLonLat(this.lonlat);
  161. menu.style.left = p.x + "px";
  162. menu.style.top = p.y + 39 + "px";
  163. menu.style.visibility = "visible";
  164. gmarker = this;
  165. }
  166. function setCenter() {
  167. menu.style.visibility = "hidden";
  168. map.setCenter(gmarker.lonlat, 2);
  169. }
  170. function deleteSelect() {
  171. menu.style.visibility = "hidden";
  172. markerLayer.removeMarker(gmarker);
  173. widgets.alert.clearAlert();
  174. }
  175. </script>
  176. </body>
  177. </html>