plot_symbolAvoid.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  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_symbolAvoid"></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. </style>
  31. </head>
  32. <body>
  33. <div id="toolbar" class="panel panel-primary">
  34. <div class='panel-heading'>
  35. <h5 class='panel-title text-center' data-i18n="resources.title_symbolAvoid"></h5></div>
  36. <div class='panel-body content'>
  37. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_avoidEdit"
  38. onclick="drawAvoidRegion()"/>
  39. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_cancelAvoidEdit"
  40. onclick="doneAvoidEdit()"/>
  41. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteAvoid"
  42. onclick="deleteAvoidEdit()"/>
  43. <span id="txt" style="color: red; margin-left: 20px; font-size:1em;"></span>
  44. </div>
  45. </div>
  46. <div id="map"></div>
  47. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  48. <script type="text/javascript" exclude="iclient-classic" include="iclient8c-plot" src="../../dist/classic/include-classic.js"></script>
  49. <script>
  50. var plottingLayer, plottingEdit, layer;
  51. var drawGraphicObject, map, plotting, symbolLibManager;
  52. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  53. var mapurl = host + "/iserver/services/map-world/rest/maps/World";
  54. var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
  55. init();
  56. function init() {
  57. map = new SuperMap.Map("map", {
  58. controls: [
  59. new SuperMap.Control.ScaleLine(),
  60. new SuperMap.Control.Zoom(),
  61. new SuperMap.Control.Navigation({
  62. dragPanOptions: {
  63. enableKinetic: true
  64. }
  65. })]
  66. });
  67. map.addControl(new SuperMap.Control.LayerSwitcher(), new SuperMap.Pixel(42, 80));
  68. layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, {
  69. transparent: true,
  70. cacheEnabled: true
  71. }, {maxResolution: "auto"});
  72. layer.events.on({"layerInitialized": addLayer});
  73. plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", serverUrl);
  74. plottingLayer.style = {
  75. fillColor: "#66cccc",
  76. fillOpacity: 0.4,
  77. strokeColor: "#66cccc",
  78. strokeOpacity: 1,
  79. strokeWidth: 3,
  80. pointRadius: 6
  81. };
  82. //态势标绘编辑
  83. plottingEdit = new SuperMap.Control.PlottingEdit();
  84. drawGraphicObject = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.GraphicObject);
  85. //添加态势标绘控件
  86. map.addControls([plottingEdit, drawGraphicObject]);
  87. plotting = SuperMap.Plotting.getInstance(map, serverUrl);
  88. }
  89. function addLayer() {
  90. map.addLayers([layer, plottingLayer]);
  91. map.setCenter(new SuperMap.LonLat(114.8225, 34.91), 4);
  92. map.moveTo = function () {
  93. };
  94. plottingEdit.activate();
  95. loadSymbolLib();
  96. }
  97. function loadSymbolLib() {
  98. symbolLibManager = plotting.getSymbolLibManager();
  99. symbolLibManager.libIDs = [421];
  100. symbolLibManager.events.on({"initializeCompleted": initializeCompleted});
  101. symbolLibManager.initializeAsync();
  102. }
  103. function initializeCompleted() {
  104. plotSymbol();
  105. }
  106. //取消标绘与编辑
  107. function plottingAllDeactivate() {
  108. doneAvoidEdit();
  109. drawGraphicObject.deactivate();
  110. plottingEdit.deactivate();
  111. }
  112. //取消标绘,激活标绘编辑控件
  113. function PlottingDrawCancel() {
  114. plottingAllDeactivate();
  115. plottingEdit.activate();
  116. }
  117. function plotSymbol() {
  118. var symbolLib = symbolLibManager.getSymbolLibByIndex(0);
  119. var libID = symbolLib.libID;
  120. var locationPointWCs = [];
  121. locationPointWCs.push(new SuperMap.Geometry.Point(107.02625, 35.7875));
  122. locationPointWCs.push(new SuperMap.Geometry.Point(112.67375, 33.65));
  123. locationPointWCs.push(new SuperMap.Geometry.Point(114.81125, 36.575));
  124. plottingLayer.createSymbolWC(0, 390, locationPointWCs);
  125. plottingLayer.createSymbolWC(libID, 9, [new SuperMap.Geometry.Point(107.02625, 35.2925)]);
  126. plottingLayer.createSymbolWC(libID, 80102, [new SuperMap.Geometry.Point(110.78375, 36.08)]);
  127. plottingLayer.createSymbolWC(libID, 80105, [new SuperMap.Geometry.Point(114.87875, 35.8775)]);
  128. }
  129. //绘制避让区域
  130. function drawAvoidRegion() {
  131. if (plottingLayer.selectedFeatures.length === 0) {
  132. var txt = document.getElementById('txt');
  133. txt.innerHTML = resources.msg_selectSymbol;
  134. return;
  135. }
  136. plottingEdit.avoidEdit(true);
  137. }
  138. //退出避让编辑
  139. function doneAvoidEdit() {
  140. plottingEdit.avoidEdit(false);
  141. }
  142. //删除避让编辑
  143. function deleteAvoidEdit() {
  144. if (plottingEdit.avoidEditing === false) {
  145. var txt = document.getElementById('txt');
  146. txt.innerHTML = resources.msg_enterAvoidEdit;
  147. }
  148. plottingEdit.removeAllAvoidRegion();
  149. plottingEdit.avoidEdit(false);
  150. }
  151. document.onmouseup = function (evt) {
  152. var evt = evt || window.event;
  153. if (evt.button === 2) {
  154. PlottingDrawCancel();
  155. return false;
  156. }
  157. evt.stopPropagation();
  158. }
  159. </script>
  160. </body>
  161. </html>