onlineSecurity.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  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_onlineSecurity"></title>
  9. <style>
  10. .panel {
  11. margin-bottom: 0;
  12. }
  13. </style>
  14. </head>
  15. <body style=" margin: 0;overflow: auto;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  16. <div class="container">
  17. <div class="page-header">
  18. <h4 data-i18n="resources.title_onlineSecurity"></h4>
  19. </div>
  20. <div class="row">
  21. <table class="table table-bordered col-md-8">
  22. <thead>
  23. <tr>
  24. <th class="text-center" data-i18n="resources.text_function"></th>
  25. <th class="text-center" data-i18n="resources.text_instance"></th>
  26. </tr>
  27. </thead>
  28. <tbody>
  29. <tr>
  30. <td class="text-center text-success" data-i18n="resources.text_login"></td>
  31. <td>
  32. <div class="col-md-12 text-center">
  33. <a class="btn btn-success" onclick="loginOnline()" data-i18n="resources.text_login"></a>
  34. </div>
  35. </td>
  36. </tr>
  37. <!-- 注册key -->
  38. <tr>
  39. <td class="text-center text-success" data-i18n="resources.text_keyAuthorizedService"></td>
  40. <td>
  41. <div class="col-md-12">
  42. <div class="panel panel-default">
  43. <div class="panel-body">
  44. <form class="form-horizontal">
  45. <fieldset>
  46. <div class="form-group">
  47. <label for="serviceUrl_online" class="col-md-2 control-label"
  48. data-i18n="resources.text_serviceAddress"></label>
  49. <div class="col-md-8">
  50. <input type="text" class="form-control" id="serviceUrl_online">
  51. </div>
  52. </div>
  53. <div class="form-group">
  54. <label for="key_online" class="col-md-2 control-label">key</label>
  55. <div class="col-md-8">
  56. <input type="text" class="form-control" id="key_online">
  57. </div>
  58. </div>
  59. <div class="col-md-12 text-center">
  60. <a class="btn btn-success"
  61. onclick="registerOnlineKeyAndRequestService()"
  62. data-i18n="resources.text_accessing"></a>
  63. </div>
  64. </fieldset>
  65. </form>
  66. </div>
  67. </div>
  68. </div>
  69. </td>
  70. </tr>
  71. <!-- 出图 -->
  72. <tr>
  73. <td class="text-center text-success" data-i18n="resources.text_keyAuthorizedGetMap"></td>
  74. <td>
  75. <div class="col-md-12">
  76. <div class="panel panel-default">
  77. <div class="panel-body">
  78. <form class="form-horizontal">
  79. <fieldset>
  80. <div class="form-group">
  81. <label for="serviceUrlMap_online"
  82. class="col-md-2 control-label"
  83. data-i18n="resources.text_serviceAddress"></label>
  84. <div class="col-md-8">
  85. <input type="text" class="form-control" id="serviceUrlMap_online">
  86. </div>
  87. </div>
  88. <div class="form-group">
  89. <label for="mapKey_online" class="col-md-2 control-label">key</label>
  90. <div class="col-md-8">
  91. <input type="text" class="form-control" id="mapKey_online">
  92. </div>
  93. </div>
  94. <div class="form-group">
  95. <div class="col-md-12 text-center">
  96. <a class="btn btn-success" onclick="showMapWithOnlineKey()"
  97. data-i18n="resources.text_getMap"></a>
  98. </div>
  99. </div>
  100. </fieldset>
  101. </form>
  102. </div>
  103. </div>
  104. </div>
  105. </td>
  106. </tr>
  107. <tr>
  108. <td colspan="3">
  109. <div class="row">
  110. <div class="col-md-12 text-center">
  111. <div class="col-md-12" id="online_map" style=" height: 300px;"></div>
  112. </div>
  113. </div>
  114. </td>
  115. </tr>
  116. </tbody>
  117. </table>
  118. </div>
  119. </div>
  120. <script type="text/javascript" include="bootstrap,jquery,widgets" src="../js/include-web.js"></script>
  121. <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
  122. <script>
  123. //若示例与SuperMap Online不在同一域下,欲查看示例效果请打开该句注释
  124. //SuperMap.Support.cors = false;
  125. $(document).ready(function () {
  126. $("#serviceUrl_online").val("https://www.supermapol.com/iserver/services/bsaq89v0/rest/maps/World");
  127. $('#key_online').val("Ie2kriXZZz9GPevFDBQzgLRf");
  128. $("#serviceUrlMap_online").val("https://www.supermapol.com/iserver/services/bsaq89v0/rest/maps/World");
  129. $('#mapKey_online').val("Ie2kriXZZz9GPevFDBQzgLRf");
  130. });
  131. /*登录*/
  132. function loginOnline() {
  133. var href = window.location.href;
  134. SuperMap.SecurityManager.loginOnline(href, true);
  135. }
  136. /*登录 end*/
  137. /*注册key*/
  138. function requestOnlineKeyService() {
  139. var serviceUrl = getOnlineServiceUrl();
  140. if (!checkUrl(serviceUrl)) {
  141. return;
  142. }
  143. L.supermap.mapService(serviceUrl, {
  144. serverType: SuperMap.ServerType.ONLINE
  145. }).getMapInfo(function (json) {
  146. if (json.error) {
  147. widgets.alert.showAlert(JSON.stringify(json.error), false);
  148. } else {
  149. widgets.alert.showAlert(JSON.stringify(json.result), true);
  150. }
  151. });
  152. }
  153. function registerOnlineKeyAndRequestService() {
  154. var key = $('#key_online').val();
  155. var serviceUrl = getOnlineServiceUrl();
  156. if (!checkUrl(serviceUrl)) {
  157. return;
  158. }
  159. SuperMap.SecurityManager.destroyKey(serviceUrl);
  160. SuperMap.SecurityManager.registerKey(serviceUrl, key);
  161. requestOnlineKeyService();
  162. }
  163. function getOnlineServiceUrl() {
  164. return $("#serviceUrl_online").val();
  165. }
  166. /*注册key end*/
  167. /*出图*/
  168. function showMapWithOnlineKey() {
  169. var key = $('#mapKey_online').val();
  170. var mapUrl = $('#serviceUrlMap_online').val();
  171. if (!checkUrl(mapUrl)) {
  172. return;
  173. }
  174. SuperMap.SecurityManager.registerKey(mapUrl, key);
  175. var onlineMap = L.map('online_map', {
  176. crs: L.CRS.EPSG4326,
  177. center: [30, 104],
  178. maxZoom: 18,
  179. zoom: 1
  180. });
  181. L.supermap.tiledMapLayer(mapUrl, {
  182. serverType: SuperMap.ServerType.ONLINE
  183. }).addTo(onlineMap);
  184. }
  185. /*出图 end*/
  186. function checkUrl(url) {
  187. if (url === "") {
  188. widgets.alert.showAlert(resources.msg_fillInURL, false);
  189. return false;
  190. }
  191. return true;
  192. }
  193. </script>
  194. </body>
  195. </html>