plot_filetransfer.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  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_filetransfer"></title>
  9. <style type="text/css">
  10. body {
  11. margin: 0;
  12. overflow: hidden;
  13. background: #fff;
  14. width: 100%;
  15. height: 100%
  16. }
  17. #map {
  18. position: absolute;
  19. left: 200px;
  20. right: 0px;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. #toolbar {
  25. position: absolute;
  26. top: 50px;
  27. right: 10px;
  28. width: 401px;
  29. text-align: center;
  30. z-index: 100;
  31. border-radius: 4px;
  32. }
  33. #toolbar .panel-title {
  34. font-size: 16px;
  35. color: white;
  36. }
  37. #filetree {
  38. position: absolute;
  39. float: left;
  40. background: #ffffff;
  41. width: 250px;
  42. height: 100%;
  43. border: 1px solid #3473b7;
  44. z-index: 100;
  45. }
  46. .input-group {
  47. margin-bottom: 10px;
  48. }
  49. .panel-title {
  50. font-size: 16px;
  51. color: #ffffff;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div id="toolbar" class="panel panel-primary">
  57. <div class='panel-heading'>
  58. <h5 class='panel-title text-center' data-i18n="resources.title_filetransfer"></h5></div>
  59. <div class='panel-body content' style="border-bottom-left-radius: 4px;border-bottom-right-radius: 4px">
  60. <div class='input-group' style="margin-top: 15px;margin-left: 10px">
  61. <input type="file" style='width:200px;float: left;' id="smlFile"
  62. name="smlFile"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  63. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_upload"
  64. onclick="uploadSmlFile()"/>
  65. </div>
  66. <div class='input-group' style="margin-left: 10px;">
  67. <span class='input-group-addon' data-i18n="resources.text_fileUrl"></span>
  68. <input class='form-control' type="text" style='width:200px;' id="downloadUrl" name="downloadUrl"
  69. value=""/>
  70. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_download"
  71. onclick="downloadSmlFileOnServer()"/>
  72. </div>
  73. <div class='input-group' style="margin-left: 10px;margin-bottom: 15px">
  74. <span class='input-group-addon' data-i18n="resources.text_fileName"></span>
  75. <input class='form-control' type="text" style='width:200px;' id="smlFileName" name="smlFileName"
  76. value=""/>
  77. <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_delete" onclick="deleteSmlFileOnServer()"/>
  78. </div>
  79. </div>
  80. </div>
  81. <div id="filetree" data-i18n="[title]resources.text_fileList"></div>
  82. <div id="map"></div>
  83. <script type="text/javascript" include="bootstrap,fileupLoad" src="../js/include-web.js"></script>
  84. <script type="text/javascript" exclude="iclient-classic" include="iclient8c-plot,PlottingPanel" src="../../dist/classic/include-classic.js"></script>
  85. <script>
  86. var map, layer, drawFeature, treePanel, plottingLayer, plottingEdit, sitManager, plotting;
  87. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  88. var mapurl = host + "/iserver/services/map-china400/rest/maps/China_4326";
  89. var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
  90. init();
  91. function init() {
  92. map = new SuperMap.Map("map", {
  93. controls: [
  94. new SuperMap.Control.LayerSwitcher(),
  95. new SuperMap.Control.ScaleLine(),
  96. new SuperMap.Control.Zoom(),
  97. new SuperMap.Control.Navigation({
  98. dragPanOptions: {
  99. enableKinetic: true
  100. }
  101. })]
  102. });
  103. layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, {
  104. transparent: true,
  105. cacheEnabled: true
  106. }, {maxResolution: "auto"});
  107. layer.events.on({"layerInitialized": addLayer});
  108. plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", serverUrl);
  109. plottingLayer.style = {
  110. fillColor: "#66cccc",
  111. fillOpacity: 0.4,
  112. strokeColor: "#66cccc",
  113. strokeOpacity: 1,
  114. strokeWidth: 3,
  115. pointRadius: 6
  116. };
  117. }
  118. function addLayer() {
  119. map.addLayers([layer, plottingLayer]);
  120. map.setCenter(new SuperMap.LonLat(104, 35), 3);
  121. plotting = SuperMap.Plotting.getInstance(map, serverUrl);
  122. treePanel = new SuperMap.Plotting.TreePanel("filetree");
  123. treePanel.events.on({"clickTreeNode": clickTreeNode});
  124. sitManager = plotting.getSitDataManager();
  125. sitManager.events.on({
  126. "getSMLInfosCompleted": getSMLInfosSuccess,
  127. "getSMLInfosFailed": getSMLInfosFail,
  128. "deleteSmlFileCompleted": deleteSmlFileSuccess,
  129. "deleteSmlFileFail": deleteSmlFileFail
  130. });
  131. getSMLInfos();
  132. fileFilter();
  133. }
  134. function getSMLInfos() {
  135. sitManager.getSMLInfos(0, 10);
  136. }
  137. function getSMLInfosSuccess(result) {
  138. treePanel.initializeTree(result);
  139. }
  140. function getSMLInfosFail(result) {
  141. console.log(result);
  142. }
  143. function clickTreeNode() {
  144. var result = sitManager.downloadSmlFileURL(this.clickSmlFileName);
  145. document.getElementById("downloadUrl").value = serverUrl + result;
  146. document.getElementById("smlFileName").value = this.clickSmlFileName;
  147. sitManager.openSmlFileOnServer(this.clickSmlFileName);
  148. plottingLayer.redraw();
  149. }
  150. function uploadSmlFile() {
  151. function sucess() {
  152. getSMLInfos();
  153. }
  154. function fail() {
  155. console.log("todo something if faied");
  156. }
  157. sitManager.uploadSmlFile('smlFile', sucess, fail);
  158. }
  159. function downloadSmlFileOnServer() {
  160. window.open(document.getElementById("downloadUrl").value);
  161. }
  162. function deleteSmlFileOnServer() {
  163. var smlFileName = document.getElementById("smlFileName").value;
  164. sitManager.deleteSmlFileOnServer(smlFileName);
  165. }
  166. function deleteSmlFileSuccess() {
  167. document.getElementById("downloadUrl").value = null;
  168. document.getElementById("smlFileName").value = null;
  169. var allLayers = map.layers;
  170. for (var j = 0; j < allLayers.length; j++) {
  171. if (allLayers[j].isBaseLayer === true) {
  172. continue;
  173. }
  174. allLayers[j].removeAllFeatures();
  175. map.removeLayer(allLayers[j], false);
  176. }
  177. getSMLInfos();
  178. }
  179. function deleteSmlFileFail() {
  180. }
  181. function fileFilter() {
  182. var file = document.getElementById('smlFile');
  183. file.setAttribute("accept", ".sml");
  184. }
  185. function stop() {
  186. window.event.returnValue = false;
  187. return false;
  188. }
  189. </script>
  190. </body>
  191. </html>