plot_drawRoute.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  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. <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. width: 100%;
  20. height: 100%;
  21. }
  22. #toolbar {
  23. position: absolute;
  24. top: 50px;
  25. right: 10px;
  26. text-align: center;
  27. z-index: 100;
  28. border-radius: 4px;
  29. }
  30. #toolbar .panel-title {
  31. font-size: 16px;
  32. color: white;
  33. }
  34. .input-group {
  35. margin: 10px auto;
  36. }
  37. .panel-title {
  38. color: #ffffff;
  39. font-size: 16px;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div id="toolbar" class="panel panel-primary">
  45. <div class='panel-heading'>
  46. <h5 class='panel-title text-center' data-i18n="resources.title_drawRoute"></h5></div>
  47. <div class='panel-body content'
  48. style="padding: 10px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px">
  49. <div class='input-group'>
  50. <select class="search-query form-control" style="width: 120px;margin-bottom: 0;" id="SLT"
  51. onclick="setRouteNodeType()"></select>
  52. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_drawRoute"
  53. onclick="plotSymbol()"/>&nbsp;&nbsp;
  54. </div>
  55. <div class='input-group'>
  56. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_edit" onclick="editState()"/>&nbsp;&nbsp;
  57. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteNode"
  58. onclick="deleteRouteNode()"/>&nbsp;&nbsp;
  59. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_routeHighlight"
  60. onclick="HighlightFlag()"/>&nbsp;&nbsp;
  61. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_routeFlicker"
  62. onclick="BlinkRoute()"/>&nbsp;&nbsp;
  63. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_cancelPlotting"
  64. onclick="PlottingDrawCancel()"/>&nbsp;&nbsp;
  65. </div>
  66. </div>
  67. </div>
  68. <div id="map"></div>
  69. <script type="text/javascript" include="bootstrap,responsive,sticklr" src="../js/include-web.js"></script>
  70. <script type="text/javascript" exclude="iclient-classic" include="iclient8c-plot,bevInclude,PlottingPanel"
  71. src="../../dist/classic/include-classic.js"></script>
  72. <script>
  73. var map, plottingLayer, layer, menu1, menu2, menu3;
  74. var stylePanel;
  75. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  76. var mapurl = host + "/iserver/services/map-world/rest/maps/World";
  77. var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
  78. var plotting;
  79. var plottingEdits = [];
  80. var drawGraphicObjects = [];
  81. var drawGraphicObject;
  82. var plottingEdit;
  83. var item = ["瞄准点", "普通航路点", "展开点", "初始点", "发射点", "会合点", "待机点",
  84. "补给点", "起飞点", "转弯点", "可视初始点", "齐射点", "武器发射点", "目标点",
  85. "攻击点", "压制点", "八字盘旋点", "跑马圈点"],
  86. select,
  87. routeNodeType;
  88. init();
  89. function init() {
  90. map = new SuperMap.Map("map", {
  91. controls: [
  92. new SuperMap.Control.ScaleLine(),
  93. new SuperMap.Control.Zoom(),
  94. new SuperMap.Control.Navigation({
  95. dragPanOptions: {
  96. enableKinetic: true
  97. }
  98. })]
  99. /*eventListeners:{"movestart":function(){
  100. menu1.style.visibility="hidden";
  101. },
  102. "click":function(){
  103. menu1.style.visibility="hidden";
  104. }}*/
  105. });
  106. map.addControl(new SuperMap.Control.LayerSwitcher(), new SuperMap.Pixel(42, 80));
  107. layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, {
  108. transparent: true,
  109. cacheEnabled: true
  110. }, {maxResolution: "auto"});
  111. layer.events.on({"layerInitialized": addLayer});
  112. map.events.register("mousedown");
  113. //总控类
  114. plotting = SuperMap.Plotting.getInstance(map, serverUrl);
  115. plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", serverUrl);
  116. //空间分析服务地址:目前使用的是服务器默认空间分析地址,可更换成实际使用的空间分析服务地址
  117. //plottingLayer.spatialAnalystUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
  118. plottingLayer.style = {
  119. fillColor: "#66cccc",
  120. fillOpacity: 0.4,
  121. strokeColor: "#66cccc",
  122. strokeOpacity: 1,
  123. strokeWidth: 3,
  124. pointRadius: 6
  125. };
  126. //态势标绘编辑
  127. plottingEdit = new SuperMap.Control.PlottingEdit();
  128. // 绘制标号;
  129. drawGraphicObject = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.GraphicObject);
  130. drawGraphicObjects.push(drawGraphicObject);
  131. //添加态势标绘控件
  132. map.addControls([plottingEdit, drawGraphicObject]);
  133. }
  134. function addLayer() {
  135. map.addLayers([layer, plottingLayer]);
  136. // map.setCenter(new SuperMap.LonLat(104, 35), 3);//定位中国地图
  137. map.setCenter(new SuperMap.LonLat(0, 0), 0);
  138. //创建属性面板
  139. //stylePanel = new SuperMap.Plotting.StylePanel("stylePanel");
  140. //stylePanel.addEditLayer(plottingLayer);
  141. select = document.getElementById("SLT");
  142. for (var i = 0, len = item.length; i < len; i++) {
  143. var options = document.createElement("option");
  144. options.setAttribute("value", item[i]);
  145. options.innerHTML = item[i];
  146. select.appendChild(options);
  147. }
  148. }
  149. function selectItem() {
  150. var select = document.getElementById("SLT");
  151. var type;
  152. for (var i = 0; i < select.children.length; i++) {
  153. if (select.children[i].selected) {
  154. type = select.children[i].value;
  155. }
  156. }
  157. if (type === item[0]) {
  158. routeNodeType = SuperMap.Plot.RouteNodeType.AIMING;
  159. }
  160. else if (type === item[1]) {
  161. routeNodeType = SuperMap.Plot.RouteNodeType.COMMONROUTE;
  162. }
  163. else if (type === item[2]) {
  164. routeNodeType = SuperMap.Plot.RouteNodeType.EXPANDING;
  165. }
  166. else if (type === item[3]) {
  167. routeNodeType = SuperMap.Plot.RouteNodeType.INITIAL;
  168. }
  169. else if (type === item[4]) {
  170. routeNodeType = SuperMap.Plot.RouteNodeType.LANCH;
  171. }
  172. else if (type === item[5]) {
  173. routeNodeType = SuperMap.Plot.RouteNodeType.RENDEZVOUS;
  174. }
  175. else if (type === item[6]) {
  176. routeNodeType = SuperMap.Plot.RouteNodeType.STANDBY;
  177. }
  178. else if (type === item[7]) {
  179. routeNodeType = SuperMap.Plot.RouteNodeType.SUPPLY;
  180. }
  181. else if (type === item[8]) {
  182. routeNodeType = SuperMap.Plot.RouteNodeType.TAKEOFF;
  183. }
  184. else if (type === item[9]) {
  185. routeNodeType = SuperMap.Plot.RouteNodeType.TURNING;
  186. }
  187. else if (type === item[10]) {
  188. routeNodeType = SuperMap.Plot.RouteNodeType.VISUALINITAL;
  189. }
  190. else if (type === item[11]) {
  191. routeNodeType = SuperMap.Plot.RouteNodeType.VOLLEY;
  192. }
  193. else if (type === item[12]) {
  194. routeNodeType = SuperMap.Plot.RouteNodeType.WEAPONLAUNCH;
  195. }
  196. else if (type === item[13]) {
  197. routeNodeType = SuperMap.Plot.RouteNodeType.TARGET;
  198. }
  199. else if (type === item[14]) {
  200. routeNodeType = SuperMap.Plot.RouteNodeType.ATTACK;
  201. }
  202. else if (type === item[15]) {
  203. routeNodeType = SuperMap.Plot.RouteNodeType.SUPPRESS;
  204. }
  205. else if (type === item[16]) {
  206. routeNodeType = SuperMap.Plot.RouteNodeType.EIGHTSPIRAL;
  207. }
  208. else if (type === item[17]) {
  209. routeNodeType = SuperMap.Plot.RouteNodeType.HAPPYVALLEY;
  210. }
  211. var obj = new Object();
  212. obj.selectValue = type;
  213. obj.routeNodeType = routeNodeType;
  214. return obj;
  215. }
  216. //取消标绘与编辑
  217. function plottingAllDeactivate() {
  218. for (var i = 0; i < drawGraphicObjects.length; i++) {
  219. drawGraphicObjects[i].deactivate();
  220. }
  221. plottingEdit.deactivate();
  222. }
  223. //取消标绘,激活标绘编辑控件
  224. function PlottingDrawCancel() {
  225. plottingAllDeactivate();
  226. plottingEdit.activate();
  227. }
  228. //清除feature
  229. function clearFeatures() {
  230. plottingLayer.removeAllFeatures();
  231. }
  232. //编辑状态
  233. function editState() {
  234. if (plottingEdit.editMode === SuperMap.Plot.EditMode.EDITCIRCUMRECTANGLE) {
  235. plottingEdit.setEditMode(SuperMap.Plot.EditMode.ADDCONTROLPOINT);
  236. } else {
  237. plottingEdit.setEditMode(SuperMap.Plot.EditMode.EDITCIRCUMRECTANGLE);
  238. }
  239. }
  240. //删除航线节点
  241. function deleteRouteNode() {
  242. if (plottingLayer.selectedFeatures.length === 0) {
  243. return;
  244. }
  245. var routeNodefeature = plottingLayer.selectedFeatures[0];
  246. if (routeNodefeature.geometry instanceof SuperMap.Geometry.GeoRouteNode) {
  247. plottingLayer.features[0].geometry.deleteRouteNode(routeNodefeature.geometry.routeNode);
  248. plottingLayer.drawFeatures([plottingLayer.features[0]]);
  249. }
  250. }
  251. //航线高亮
  252. function HighlightFlag() {
  253. if (plottingEdit.highlightFlag === true) {
  254. plottingEdit.highlightFlag = false;
  255. } else {
  256. plottingEdit.highlightFlag = true;
  257. // plottingEdit.highlightStyle={strokeColor:"#808080"};
  258. }
  259. }
  260. //航线闪烁
  261. function BlinkRoute() {
  262. plottingLayer.features[0].geometry.blinkRoute();
  263. }
  264. //设置航线节点类型
  265. function setRouteNodeType() {
  266. var obj = selectItem();
  267. if (drawGraphicObjects[0].active && drawGraphicObjects[0].handler instanceof SuperMap.Handler.GraphicObject) {
  268. if (drawGraphicObjects[0].handler.plotting.geometry instanceof SuperMap.Geometry.Route) {
  269. drawGraphicObjects[0].handler.plotting.geometry.setNextRouteNodeType(obj.routeNodeType);
  270. }
  271. }
  272. if (plottingEdit.active && plottingEdit.features.length > 0) {
  273. plottingEdit.features[0].geometry.route.setNextRouteNodeType(obj.routeNodeType);
  274. }
  275. }
  276. function plotSymbol() {
  277. drawGraphicObject.handler.libID = 0;
  278. drawGraphicObject.handler.symbolCode = 1005;
  279. drawGraphicObject.handler.serverUrl = serverUrl;
  280. drawGraphicObject.deactivate();
  281. drawGraphicObject.activate();
  282. }
  283. document.onmouseup = function (evt) {
  284. var evt = evt || window.event;
  285. if (evt.button === 2) {
  286. PlottingDrawCancel();
  287. return false;
  288. }
  289. evt.stopPropagation();
  290. }
  291. </script>
  292. </body>
  293. </html>