plot_drawRoute.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  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_drawRoute"></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: 10px;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_drawRoute" style=" color: #ffffff;font-size: 16px;"></h5></div>
  14. <div class='panel-body content' id="panelbodycontent" style="padding: 10px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px">
  15. <div class='input-group' style=" margin: 10px auto;">
  16. <select class="search-query form-control" style="width: 120px;margin-bottom: 0;" id="SLT"
  17. onclick="setRouteNodeType()"></select>
  18. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_drawRoute" onclick="plotSymbol()"/>&nbsp;&nbsp;
  19. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_cancelPlotting" onclick="plottingDrawCancel()"/>&nbsp;&nbsp;
  20. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_edit" onclick="editState()"/>&nbsp;&nbsp;
  21. </div>
  22. <div class='input-group' style=" margin: 10px auto;">
  23. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteNode" onclick="deleteRouteNode()"/>&nbsp;&nbsp;
  24. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_routeHighlight" onclick="highlightFlag()"/>&nbsp;&nbsp;
  25. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_routeFlicker" onclick="blinkRoute()"/>&nbsp;&nbsp;
  26. </div>
  27. </div>
  28. </div>
  29. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  30. <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
  31. <script type="text/javascript" include="iclient-leaflet,iclient-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script>
  32. <script type="text/javascript">
  33. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  34. var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
  35. var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
  36. var map;
  37. map = L.map('map', {
  38. preferCanvas: true,
  39. crs: L.CRS.EPSG4326,
  40. center: [35,104],
  41. maxZoom: 18,
  42. zoom: 3
  43. });
  44. L.supermap.tiledMapLayer(url).addTo(map);
  45. var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
  46. plottingLayer.addTo(map);
  47. var drawControl = L.supermap.plotting.drawControl(plottingLayer);
  48. drawControl.addTo(map);
  49. var editControl = L.supermap.plotting.editControl();
  50. editControl.addTo(map);
  51. var item = ["瞄准点","普通航路点","展开点","初始点","发射点","会合点","待机点",
  52. "补给点","起飞点","转弯点","可视初始点","齐射点","武器发射点","目标点",
  53. "攻击点","压制点","八字盘旋点","跑马圈点"],
  54. select, routeNodeType;
  55. function plotSymbol(){
  56. drawControl.handler.libID = 0;
  57. drawControl.handler.code = 1005;
  58. drawControl.handler.serverUrl = serverUrl;
  59. drawControl.handler.enable();
  60. }
  61. function plottingDrawCancel(){
  62. drawControl.handler.disable();
  63. }
  64. function editState(){
  65. if(editControl._editMode===SuperMap.Plot.EditMode.EDITCIRCUMRECTANGLE){
  66. editControl.setEditMode(SuperMap.Plot.EditMode.ADDCONTROLPOINT);
  67. }else{
  68. editControl.setEditMode(SuperMap.Plot.EditMode.EDITCIRCUMRECTANGLE);
  69. }
  70. }
  71. function selectItem() {
  72. var select = document.getElementById("SLT");
  73. var type;
  74. for (var i = 0; i < select.children.length; i++) {
  75. if (select.children[i].selected) {
  76. type = select.children[i].value;
  77. }
  78. }
  79. if(type ===item[0]){
  80. routeNodeType = SuperMap.Plot.RouteNodeType.AIMING;
  81. }
  82. else if(type ===item[1]){
  83. routeNodeType =SuperMap.Plot.RouteNodeType.COMMONROUTE;
  84. }
  85. else if(type ===item[2]){
  86. routeNodeType = SuperMap.Plot.RouteNodeType.EXPANDING;
  87. }
  88. else if(type ===item[3]){
  89. routeNodeType = SuperMap.Plot.RouteNodeType.INITIAL;
  90. }
  91. else if(type ===item[4]){
  92. routeNodeType = SuperMap.Plot.RouteNodeType.LANCH;
  93. }
  94. else if(type ===item[5]){
  95. routeNodeType = SuperMap.Plot.RouteNodeType.RENDEZVOUS;
  96. }
  97. else if(type ===item[6]){
  98. routeNodeType = SuperMap.Plot.RouteNodeType.STANDBY;
  99. }
  100. else if(type ===item[7]){
  101. routeNodeType = SuperMap.Plot.RouteNodeType.SUPPLY;
  102. }
  103. else if(type ===item[8]){
  104. routeNodeType = SuperMap.Plot.RouteNodeType.TAKEOFF;
  105. }
  106. else if(type ===item[9]){
  107. routeNodeType = SuperMap.Plot.RouteNodeType.TURNING;
  108. }
  109. else if(type ===item[10]){
  110. routeNodeType = SuperMap.Plot.RouteNodeType.VISUALINITAL;
  111. }
  112. else if(type ===item[11]){
  113. routeNodeType = SuperMap.Plot.RouteNodeType.VOLLEY;
  114. }
  115. else if(type ===item[12]){
  116. routeNodeType = SuperMap.Plot.RouteNodeType.WEAPONLAUNCH;
  117. }
  118. else if(type ===item[13]){
  119. routeNodeType = SuperMap.Plot.RouteNodeType.TARGET;
  120. }
  121. else if(type ===item[14]){
  122. routeNodeType = SuperMap.Plot.RouteNodeType.ATTACK;
  123. }
  124. else if(type ===item[15]){
  125. routeNodeType = SuperMap.Plot.RouteNodeType.SUPPRESS;
  126. }
  127. else if(type ===item[16]){
  128. routeNodeType = SuperMap.Plot.RouteNodeType.EIGHTSPIRAL;
  129. }
  130. else if(type ===item[17]){
  131. routeNodeType = SuperMap.Plot.RouteNodeType.HAPPYVALLEY;
  132. }
  133. var obj = new Object();
  134. obj.selectValue = type;
  135. obj.routeNodeType=routeNodeType;
  136. return obj;
  137. }
  138. function setRouteNodeType(){
  139. var obj = selectItem();
  140. if(drawControl.handler.enabled() && drawControl.handler.plotting !== null){
  141. if(drawControl.handler.plotting.symbolType === SuperMap.Plot.SymbolType.AIRROUTE){
  142. drawControl.handler.plotting.setNextRouteNodeType(obj.routeNodeType);
  143. }
  144. }
  145. if(editControl._editMode === SuperMap.Plot.EditMode.ADDCONTROLPOINT && editControl.getSelectedFeatures().length>0){
  146. editControl.getSelectedFeatures()[0].route.setNextRouteNodeType(obj.routeNodeType);
  147. }
  148. }
  149. function deleteRouteNode(){
  150. if(editControl.getSelectedFeatures().length === 0){
  151. return;
  152. }
  153. var routeNodefeature = editControl.getSelectedFeatures()[0];
  154. if(routeNodefeature.symbolType === SuperMap.Plot.SymbolType.ROUTENODE){
  155. routeNodefeature.route.deleteRouteNode(routeNodefeature.routeNode);
  156. }
  157. }
  158. function highlightFlag(){
  159. if(editControl.options.highlightFlag===true){
  160. editControl.options.highlightFlag=false;
  161. }else{
  162. editControl.options.highlightFlag=true;
  163. //editControl.options.highlightStyle={color:"#00ff00"};//高亮色
  164. }
  165. }
  166. function blinkRoute(){
  167. if(editControl.getSelectedFeatures().length>0){
  168. editControl.getSelectedFeatures()[0].route.blinkRoute();
  169. }
  170. }
  171. window.onload = function(){
  172. select = document.getElementById("SLT");
  173. for (var i = 0, len = item.length; i < len; i++) {
  174. var options = document.createElement("option");
  175. options.setAttribute("value", item[i]);
  176. options.innerHTML = item[i];
  177. select.appendChild(options);
  178. }
  179. };
  180. $(document).ready(function(){
  181. $('#panelheading').click(function(){
  182. $('#panelbodycontent').toggle();
  183. });
  184. });
  185. </script>
  186. </body>
  187. </html>