others_coordTransfer.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  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_coordTransfer"></title>
  9. <style type="text/css">
  10. .loading {
  11. width: 48px;
  12. margin-left: auto;
  13. margin-right: auto;
  14. margin-top: 55px;
  15. text-align: center;
  16. }
  17. .content {
  18. padding: 18px;
  19. }
  20. .content > div {
  21. margin-bottom: 5px;
  22. }
  23. .editPane {
  24. position: absolute;
  25. right: 60px;
  26. top: 50px;
  27. text-align: center;
  28. background: #FFF;
  29. z-index: 1000;
  30. }
  31. </style>
  32. </head>
  33. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  34. <div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
  35. <div class='panel-heading'>
  36. <h5 class='panel-title text-center' data-i18n="resources.text_clickGetCoord"></h5>
  37. </div>
  38. <div class="loading info-body" style="display:none;"><img src="./images/loading.gif"/></div>
  39. <div class="content info-body" style="display:none;">
  40. <h4 data-i18n="resources.text_coordinate"></h4>
  41. <div>
  42. <div style="float: left;" data-i18n="resources.text_longitude"></div> <span class="lon"></span>
  43. </div>
  44. <div>
  45. <div style="float: left;" data-i18n="resources.text_latitude"></div> <span class="lat"></span>
  46. </div>
  47. </div>
  48. </div>
  49. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  50. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  51. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  52. <script type="text/javascript">
  53. var map, layer, vectorLayer, drawPoint, lastFeature,
  54. host = window.isLocal ? window.server : "https://iserver.supermap.io",
  55. url = host + "/iserver/services/map-china400/rest/maps/China",
  56. transferUrl = host + "/iserver/services/data-world/rest/data/coordtransfer";
  57. //初始化地图
  58. map = new SuperMap.Map("map", {
  59. controls: [
  60. new SuperMap.Control.Navigation(),
  61. new SuperMap.Control.Zoom()
  62. ]
  63. });
  64. map.addControl(new SuperMap.Control.MousePosition());
  65. //初始化图层
  66. layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, {maxResolution: "auto"});
  67. vectorLayer = new SuperMap.Layer.Vector("vectorLayer");
  68. drawPoint = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Point);
  69. //监听图层信息加载完成事件
  70. layer.events.on({"layerInitialized": addLayer});
  71. drawPoint.events.on({'featureadded': drawCompleted});
  72. //异步加载图层
  73. function addLayer() {
  74. map.addLayers([layer, vectorLayer]);
  75. map.addControl(drawPoint);
  76. drawPoint.activate();
  77. //显示地图范围
  78. map.setCenter(new SuperMap.LonLat(0, 0), 2);
  79. }
  80. function drawCompleted(evt) {
  81. $('.info-body').hide();
  82. $('.loading').show();
  83. lastFeature && vectorLayer.removeFeatures([lastFeature]);
  84. lastFeature = evt.feature;
  85. transfer();
  86. }
  87. function transfer(features) {
  88. var transferParams = new SuperMap.REST.CoordTransferParameters({
  89. features: vectorLayer.features,
  90. targetPrj: {
  91. "distanceUnit": "METER",
  92. "projectionParam": null,
  93. "epsgCode": 4326,
  94. "coordUnit": "DEGREE",
  95. "name": "Longitude / Latitude Coordinate System---GCS_WGS_1984",
  96. "projection": null,
  97. "type": "PCS_EARTH_LONGITUDE_LATITUDE",
  98. "coordSystem": {
  99. "datum": {
  100. "name": "D_WGS_1984",
  101. "type": "DATUM_WGS_1984",
  102. "spheroid": {
  103. "flatten": 0.00335281066474748,
  104. "name": "WGS_1984",
  105. "axis": 6378137,
  106. "type": "SPHEROID_WGS_1984"
  107. }
  108. },
  109. "unit": "DEGREE",
  110. "spatialRefType": "SPATIALREF_EARTH_LONGITUDE_LATITUDE",
  111. "name": "GCS_WGS_1984",
  112. "type": "GCS_WGS_1984",
  113. "primeMeridian": {"longitudeValue": 0, "name": "Greenwich", "type": "PRIMEMERIDIAN_GREENWICH"}
  114. }
  115. },
  116. sourcePrj: {
  117. "distanceUnit": "METER",
  118. "projectionParam": {
  119. "centralParallel": 0,
  120. "firstPointLongitude": 0,
  121. "rectifiedAngle": 0,
  122. "scaleFactor": 1,
  123. "falseNorthing": 0,
  124. "centralMeridian": 0,
  125. "secondStandardParallel": 0,
  126. "secondPointLongitude": 0,
  127. "azimuth": 0,
  128. "falseEasting": 0,
  129. "firstStandardParallel": 0
  130. },
  131. "epsgCode": 3857,
  132. "coordUnit": "METER",
  133. "name": "User Define",
  134. "projection": {"name": "SPHERE_MERCATOR", "type": "PRJ_SPHERE_MERCATOR"},
  135. "type": "PCS_USER_DEFINED",
  136. "coordSystem": {
  137. "datum": {
  138. "name": "D_WGS_1984",
  139. "type": "DATUM_WGS_1984",
  140. "spheroid": {
  141. "flatten": 0.00335281066474748,
  142. "name": "WGS_1984",
  143. "axis": 6378137,
  144. "type": "SPHEROID_WGS_1984"
  145. }
  146. },
  147. "unit": "DEGREE",
  148. "spatialRefType": "SPATIALREF_EARTH_LONGITUDE_LATITUDE",
  149. "name": "GCS_WGS_1984",
  150. "type": "GCS_WGS_1984",
  151. "primeMeridian": {"longitudeValue": 0, "name": "Greenwich", "type": "PRIMEMERIDIAN_GREENWICH"}
  152. }
  153. }
  154. });
  155. var transferService = new SuperMap.REST.CoordTransferService(transferUrl, {
  156. eventListeners: {
  157. processCompleted: function (evt) {
  158. $('.info-body').hide();
  159. $('.content').show();
  160. var feature = evt.result.features[0];
  161. var geometry = feature.geometry;
  162. $('.lon').html(geometry.x);
  163. $('.lat').html(geometry.y);
  164. },
  165. processFailed: function () {
  166. $('.info-body').hide();
  167. $('.tips').show();
  168. }
  169. }
  170. });
  171. transferService.processAsync(transferParams);
  172. }
  173. </script>
  174. </body>
  175. </html>