plot_filetransfer.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  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. </head>
  10. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  11. <div id="toolbar" class="panel panel-primary" style=" position: absolute;top: 15px;right: 10px;text-align: center;z-index: 9999;border-radius: 4px;">
  12. <div class='panel-heading' id="panelheading">
  13. <h5 class='panel-title text-center' data-i18n="resources.title_filetransfer" style=" font-size: 16px;color: #ffffff;"></h5></div>
  14. <div class='panel-body content' id="panelbodycontent" style="height:160px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px">
  15. <div class='input-group' style="margin-top: 15px;margin-left: 10px margin-bottom: 10px;">
  16. <input type="file" style='width:200px;float: left;' id="smlFile" name="smlFile"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  17. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_upload" onclick="uploadSmlFile()"/>
  18. </div>&nbsp;&nbsp;
  19. <div class='input-group' style="margin-left: 10px; margin-bottom: 10px;">
  20. <span data-i18n="resources.text_fileUrl"></span>
  21. <input type="text" readonly style='width:155px;' id="downloadUrl" name="downloadUrl" value=""/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  22. <input type="button" class="btn btn-default"data-i18n="[value]resources.btn_download" onclick="downloadSmlFileOnServer()"/>
  23. </div>
  24. <div class='input-group' style="margin-left: 10px;margin-bottom: 15px margin-bottom: 10px;">
  25. <span data-i18n="resources.text_fileName"></span>
  26. <input type="text" readonly style='width:155px;' id="smlFileName" name="smlFileName" value=""/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  27. <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_delete" onclick="deleteSmlFileOnServer()" />
  28. </div>
  29. </div>
  30. </div>
  31. <div id="popupWin" class="panel panel-primary popupWindow" style=" position: absolute;right: 10px;top: 230px;width: 315px;background: #FFF;z-index: 9999;display: block;">
  32. <div class="winTitle" style=" background: #1E90FF;">
  33. <span class="title_left" data-i18n="resources.text_fileList">态势图文件列表</span>
  34. </div>
  35. <div id="filetree" class="winContent" style=" padding: 5px;overflow-y: auto;height: 400px;"></div>
  36. </div>
  37. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  38. <script type="text/javascript" include="bootstrap,fileupLoad,plottingPanel" src="../js/include-web.js"></script>
  39. <script type="text/javascript" include="iclient-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script>
  40. <script type="text/javascript" include="SMLInfosPanel" src="../js/plottingPanel/PlottingPanel.Include.js"></script>
  41. <script type="text/javascript">
  42. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  43. var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
  44. var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
  45. var map;
  46. map = L.map('map', {
  47. preferCanvas: true,
  48. crs: L.CRS.EPSG4326,
  49. center: [35,104],
  50. maxZoom: 18,
  51. zoom: 3
  52. });
  53. L.supermap.tiledMapLayer(url).addTo(map);
  54. var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
  55. plottingLayer.addTo(map);
  56. var drawControl = L.supermap.plotting.drawControl(plottingLayer);
  57. drawControl.addTo(map);
  58. var editControl = L.supermap.plotting.editControl();
  59. editControl.addTo(map);
  60. var plotting = L.supermap.plotting.getControl(map, serverUrl);
  61. var sitDataManager = plotting.getSitDataManager();
  62. function getSMLInfosSucess(evt){
  63. L.supermap.plotting.initSMLInfosPanel("filetree", evt.smlInfoList, function(clickSmlFileName){
  64. var result = sitDataManager.downloadSmlFileURL(clickSmlFileName);
  65. document.getElementById("downloadUrl").value = serverUrl + result;
  66. document.getElementById("smlFileName").value =clickSmlFileName;
  67. sitDataManager.openSmlFileOnServer(clickSmlFileName);
  68. })
  69. }
  70. //获取态势图列表
  71. function getSMLInfos() {
  72. sitDataManager.getSMLInfos(0, 10, getSMLInfosSucess);
  73. }
  74. //上传态势图
  75. function uploadSmlFile(){
  76. sitDataManager.uploadSmlFile('smlFile', function(evt){
  77. if(evt.success){
  78. getSMLInfos();
  79. } else {
  80. }
  81. });
  82. }
  83. //下载态势图
  84. function downloadSmlFileOnServer(){
  85. window.open(document.getElementById("downloadUrl").value);
  86. }
  87. //删除态势图
  88. function deleteSmlFileOnServer(){
  89. var smlFileName = document.getElementById("smlFileName").value;
  90. sitDataManager.deleteSmlFileOnServer(smlFileName, function(evt){
  91. if(evt.success){
  92. document.getElementById("downloadUrl").value = null;
  93. document.getElementById("smlFileName").value = null;
  94. plottingLayer.removeAllFeatures();
  95. getSMLInfos();
  96. } else {
  97. }
  98. });
  99. }
  100. function fileFilter() {
  101. var file = document.getElementById('smlFile');
  102. file.setAttribute("accept", ".sml");
  103. }
  104. window.onload = function(){
  105. getSMLInfos();//初始化页面时获取态势图列表
  106. fileFilter();
  107. };
  108. $(document).ready(function(){
  109. $('#panelheading').click(function(){
  110. $('#panelbodycontent').toggle();
  111. $('#popupWin').toggle();
  112. });
  113. });
  114. </script>
  115. </body>
  116. </html>