plot_symbolEditor.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  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.text_editor"></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.text_editor"></h5></div>
  36. <div class='panel-body content'>
  37. <input id="btn_Copy" type="button" class="btn btn-default" data-i18n="[value]resources.btn_copy" onclick="copySymbol()"/>
  38. <input id="btn_Cut" type="button" class="btn btn-default" data-i18n="[value]resources.btn_cut" onclick="cutSymbol()"/>
  39. <input id="btn_Paste" type="button" class="btn btn-default" data-i18n="[value]resources.btn_paste" onclick="pasteSymbol()"/>
  40. <input id="btn_Reset" type="button" class="btn btn-default" data-i18n="[value]resources.btn_reset" onclick="resetSymbol()"/>
  41. </div>
  42. </div>
  43. <div id="map"></div>
  44. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  45. <script type="text/javascript" exclude="iclient-classic" include="iclient8c-plot" src="../../dist/classic/include-classic.js"></script>
  46. <script>
  47. var plottingLayer, plottingEdit, layer;
  48. var drawGraphicObject, map, plotting, editor;
  49. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  50. var mapurl = host + "/iserver/services/map-world/rest/maps/World";
  51. var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
  52. init();
  53. function init() {
  54. map = new SuperMap.Map("map", {
  55. controls: [
  56. new SuperMap.Control.ScaleLine(),
  57. new SuperMap.Control.Zoom(),
  58. new SuperMap.Control.Navigation({
  59. dragPanOptions: {
  60. enableKinetic: true
  61. }
  62. })]
  63. });
  64. map.addControl(new SuperMap.Control.LayerSwitcher(), new SuperMap.Pixel(42, 80));
  65. layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, {
  66. transparent: true,
  67. cacheEnabled: true
  68. }, {maxResolution: "auto"});
  69. layer.events.on({"layerInitialized": addLayer});
  70. plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", serverUrl);
  71. plottingLayer.style = {
  72. fillColor: "#66cccc",
  73. fillOpacity: 0.4,
  74. strokeColor: "#66cccc",
  75. strokeOpacity: 1,
  76. strokeWidth: 3,
  77. pointRadius: 6
  78. };
  79. //态势标绘编辑
  80. plottingEdit = new SuperMap.Control.PlottingEdit();
  81. //添加态势标绘控件
  82. map.addControls([plottingEdit]);
  83. plotting = SuperMap.Plotting.getInstance(map, serverUrl);
  84. editor = plotting.getEditor();
  85. }
  86. function addLayer() {
  87. map.addLayers([layer, plottingLayer]);
  88. map.setCenter(new SuperMap.LonLat(0, 0), 0);
  89. //标绘标号
  90. plotSymbol();
  91. plottingEdit.activate();
  92. }
  93. function plotSymbol() {
  94. //标绘多边形
  95. var polygonPoints = [];
  96. polygonPoints.push(new SuperMap.Geometry.Point(-20, 0));
  97. polygonPoints.push(new SuperMap.Geometry.Point(-10, 20));
  98. polygonPoints.push(new SuperMap.Geometry.Point(-30, 40));
  99. polygonPoints.push(new SuperMap.Geometry.Point(-60, 10));
  100. plottingLayer.createSymbolWC(0, SuperMap.Plot.SymbolType.ARBITRARYPOLYGONSYMBOL, polygonPoints);
  101. //标绘折线
  102. var linePoints = [];
  103. linePoints.push(new SuperMap.Geometry.Point(0, 0));
  104. linePoints.push(new SuperMap.Geometry.Point(0, 20));
  105. linePoints.push(new SuperMap.Geometry.Point(20, 10));
  106. linePoints.push(new SuperMap.Geometry.Point(10, 30));
  107. plottingLayer.createSymbolWC(0, SuperMap.Plot.SymbolType.POLYLINESYMBOL, linePoints);
  108. }
  109. function copySymbol() {
  110. editor.copy();
  111. }
  112. function cutSymbol() {
  113. editor.cut();
  114. }
  115. function pasteSymbol() {
  116. editor.paste();
  117. }
  118. function resetSymbol() {
  119. plottingLayer.removeAllFeatures();
  120. plotSymbol();
  121. }
  122. </script>
  123. </body>
  124. </html>