others_jqueryContextMenu.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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_jqueryContextMenu"></title>
  9. </head>
  10. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  11. <div id="map" style="margin:0 auto;width: 100%;height: 100%;position: relative;"></div>
  12. <script type="text/javascript" include="bootstrap,jquery-scontextMenu,widgets.alert"
  13. src="../js/include-web.js"></script>
  14. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  15. <script type="text/javascript">
  16. var map, layer, host = window.isLocal ? window.server : "https://iserver.supermap.io",
  17. url = host + "/iserver/services/map-world/rest/maps/World";
  18. function init() {
  19. var broz = SuperMap.Util.getBrowser();
  20. if (broz.device === 'android' || broz.device === 'apple') {
  21. widgets.alert.showAlert(resources.msg_supportEquipment, false);
  22. return;
  23. }
  24. map = new SuperMap.Map("map");
  25. layer = new SuperMap.Layer.TiledDynamicRESTLayer("world", url, {
  26. transparent: true,
  27. cacheEnabled: true
  28. }, {maxResolution: "auto"});
  29. layer.events.on({"layerInitialized": addLayer});
  30. }
  31. $(document).ready(function () {
  32. init();
  33. widgets.alert.showAlert(resources.msg_clickZoom, true);
  34. });
  35. function addLayer() {
  36. map.addLayers([layer]);
  37. map.setCenter(new SuperMap.LonLat(4503.6240321526, -3861.911472192499), 1);
  38. }
  39. function zoomin() {
  40. map.zoomIn();
  41. }
  42. //缩小,在当前缩放级别的基础上缩小一级。
  43. function zoomout() {
  44. map.zoomOut();
  45. }
  46. </script>
  47. <script>
  48. $(function () {
  49. $.contextMenu({
  50. selector: '#map',
  51. autoHide: true,
  52. delay: 500,
  53. items: {
  54. "large": {
  55. name: resources.btn_enlarge,
  56. icon: "zoomin",
  57. callback: zoomin
  58. },
  59. "reduce": {
  60. name: resources.btn_lessen,
  61. icon: "zoomout",
  62. callback: zoomout
  63. }
  64. }
  65. })
  66. });
  67. </script>
  68. </body>
  69. </html>