controler_dragpan.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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_dragpan"></title>
  9. <style type="text/css">
  10. .editPane {
  11. position: absolute;
  12. right: 50px;
  13. top: 50px;
  14. text-align: center;
  15. background: #FFF;
  16. z-index: 1000;
  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_dragpan"></h5>
  24. </div>
  25. <div class='panel-body' id='params'>
  26. <p></p>
  27. <div align='right' class='button-group'>
  28. <input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.text_input_value_dragMap" onclick="activated()"/>
  29. <input type='button' id='btn2' class='btn btn-primary' data-i18n="[value]resources.text_input_value_notDrag" onclick="deactivated()"/>
  30. </div>
  31. </div>
  32. </div>
  33. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  34. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  35. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  36. <script type="text/javascript">
  37. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  38. var map, layerWorld;
  39. var url = host + "/iserver/services/map-world/rest/maps/World";
  40. //初始化地图拖拽控件类
  41. dragPan = new SuperMap.Control.DragPan();
  42. //当该属性为true,拖拽地图时,鼠标移动到地图可视区域外依然有效。默认为false
  43. dragPan.documentDrag = true;
  44. //设置是否使用拖拽动画。默认为false,不使用动画
  45. dragPan.enableKinetic = true;
  46. //执行动画的间隔,默认为10,单位是毫秒
  47. dragPan.kineticInterval = 20;
  48. //初始化地图类,添加地图拖拽控件到Map
  49. map = new SuperMap.Map("map", {
  50. controls: [dragPan]
  51. });
  52. layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url); //获取图层服务地址
  53. layerWorld.events.on({"layerInitialized": addLayer});
  54. //添加地图图层到map
  55. function addLayer() {
  56. map.addLayers([layerWorld]);
  57. map.setCenter(new SuperMap.LonLat(80, 37), 4);
  58. }
  59. //激活控件
  60. function activated() {
  61. dragPan.activate();
  62. }
  63. //注销控件
  64. function deactivated() {
  65. dragPan.deactivate();
  66. }
  67. </script>
  68. </body>
  69. </html>