popup_shadowPopup.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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_shadowPopup"></title>
  9. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  10. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  11. <style type="text/css">
  12. body {
  13. margin: 0;
  14. overflow: hidden;
  15. background: #fff;
  16. width: 100%;
  17. height: 100%
  18. }
  19. #map {
  20. position: absolute;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. #toolbar {
  25. position: absolute;
  26. top: 50px;
  27. right: 10px;
  28. width: 300px;
  29. text-align: center;
  30. z-index: 100;
  31. border-radius: 4px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="map"></div>
  37. <script>
  38. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  39. var map, layerWorld, marker, markers, framedCloud, vectorLayer;
  40. var url = host + "/iserver/services/map-world/rest/maps/World";
  41. init();
  42. function init() {
  43. vectorLayer = new SuperMap.Layer.Vector("Vector Layer");
  44. //map上添加控件
  45. map = new SuperMap.Map("map", {
  46. controls: [
  47. new SuperMap.Control.ScaleLine(),
  48. new SuperMap.Control.Zoom(),
  49. new SuperMap.Control.LayerSwitcher(),
  50. new SuperMap.Control.Navigation({ //添加导航控件到map
  51. dragPanOptions: {
  52. enableKinetic: true //拖拽动画
  53. }
  54. })]
  55. });
  56. //定义layerWorld图层,获取图层服务地址
  57. layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url);
  58. //为图层初始化完毕添加layerInitialized事件
  59. layerWorld.events.on({"layerInitialized": addLayer});
  60. //初始化标记图层类
  61. markers = new SuperMap.Layer.Markers("Markers");
  62. size = new SuperMap.Size(21, 25);
  63. offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
  64. icon = new SuperMap.Icon('./images/markerbig_select.png', size, offset);
  65. //初始化标记覆盖物类
  66. marker = new SuperMap.Marker(new SuperMap.LonLat(-0.1779146, 51.4877081), icon);
  67. //添加覆盖物到标记图层
  68. markers.addMarker(marker);
  69. //注册 click 事件,触发 mouseClickHandler()方法
  70. marker.events.on({
  71. "click": mouseClickHandler,
  72. "touchstart": mouseClickHandler //假如要在移动端的浏览器也实现点击弹框,则在注册touch类事件
  73. });
  74. }
  75. var infowin = null;
  76. //定义mouseClickHandler函数,触发click事件会调用此函数
  77. function mouseClickHandler(event) {
  78. closeInfoWin();
  79. var contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold ; opacity: 0.8'>";
  80. contentHTML += resources.text_BeckStreet;
  81. contentHTML += "</div>";
  82. //初始化FramedCloud类
  83. framedCloud = new SuperMap.Popup.FramedCloud(
  84. "chicken",
  85. marker.getLonLat(),
  86. null,
  87. contentHTML,
  88. icon,
  89. true,
  90. null,
  91. true
  92. );
  93. infowin = framedCloud;
  94. map.addPopup(framedCloud);
  95. }
  96. function closeInfoWin() {
  97. if (infowin) {
  98. try {
  99. infowin.hide();
  100. infowin.destroy();
  101. }
  102. catch (e) {
  103. }
  104. }
  105. }
  106. //定义addLayer函数,触发 layerInitialized事件会调用此函数
  107. function addLayer() {
  108. //map上添加分块动态REST图层和标记图层
  109. map.addLayers([layerWorld, markers]);
  110. map.setCenter(new SuperMap.LonLat(0, 50), 4);
  111. }
  112. </script>
  113. </body>
  114. </html>