controler_drawGeometry.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  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_drawGeometry"></title>
  9. <style type="text/css">
  10. .editPane {
  11. position: absolute;
  12. left: 50px;
  13. top: 10px;
  14. text-align: center;
  15. background: #FFF;
  16. z-index: 1000;
  17. }
  18. </style>
  19. </head>
  20. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  21. <div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
  22. <div class='panel-heading'>
  23. <h5 class='panel-title text-center' data-i18n="resources.text_drawGeometry"></h5>
  24. </div>
  25. <div class='panel-body' id='params'>
  26. <p></p>
  27. <div align='right' class='button-group'>
  28. <input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.text_input_value_drawPoint" onclick="draw_point()"/>
  29. <input type='button' id='btn2' class='btn btn-primary' data-i18n="[value]resources.text_input_value_drawLine" onclick="draw_line()"/>
  30. <input type='button' id='btn3' class='btn btn-primary' data-i18n="[value]resources.text_input_value_drawPolygon" onclick="draw_polygon()"/>
  31. <input type='button' id='btn4' class='btn btn-primary' data-i18n="[value]resources.text_input_value_select" onclick="selectFeature()"/>
  32. <input type='button' id='btn5' class='btn btn-primary' data-i18n="[value]resources.text_input_value_modify" onclick="modifyFeature()"/>
  33. <input type='button' id='btn6' class='btn btn-primary' value='Undo' onclick="undo()"/>
  34. <input type='button' id='btn7' class='btn btn-primary' value='Redo' onclick="redo()"/>
  35. <input type='button' id='btn8' class='btn btn-primary' data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
  36. </div>
  37. </div>
  38. </div>
  39. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  40. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  41. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  42. <script type="text/javascript">
  43. var map, layer, drawPoint, drawLine, drawPolygon, vecotrLayer, selectCtrl,
  44. host = window.isLocal ? window.server : "https://iserver.supermap.io";
  45. url = host + "/iserver/services/map-china400/rest/maps/China_4326";
  46. //新建面矢量图层
  47. vecotrLayer = new SuperMap.Layer.Vector("polygonLayer");
  48. drawPoint = new SuperMap.Control.DrawFeature(vecotrLayer, SuperMap.Handler.Point, {multi: true});
  49. drawLine = new SuperMap.Control.DrawFeature(vecotrLayer, SuperMap.Handler.Path, {multi: true});
  50. drawPolygon = new SuperMap.Control.DrawFeature(vecotrLayer, SuperMap.Handler.Polygon);
  51. modifyCtrl = new SuperMap.Control.ModifyFeature(vecotrLayer);
  52. selectCtrl = new SuperMap.Control.SelectFeature(vecotrLayer, {
  53. onSelect: function (feature) {
  54. //选中要素操作
  55. },
  56. onUnselect: function (feature) {
  57. //未选中要素操作
  58. },
  59. callbacks: {
  60. dblclick: function (feature) {
  61. //双击逻辑回调
  62. }
  63. },
  64. hover: false,
  65. repeat: false
  66. });
  67. map = new SuperMap.Map("map", {
  68. controls: [
  69. new SuperMap.Control.Zoom(),
  70. new SuperMap.Control.Navigation(),
  71. new SuperMap.Control.LayerSwitcher()
  72. , drawPoint, drawLine, drawPolygon, selectCtrl, modifyCtrl]
  73. });
  74. layer = new SuperMap.Layer.CloudLayer();
  75. addLayer();
  76. //layer.events.on({"layerInitialized":addLayer});
  77. vecotrLayer.style = {
  78. fillColor: "blue",
  79. fillOpacity: 1,
  80. hoverFillColor: "white",
  81. hoverFillOpacity: 0.8,
  82. strokeColor: "#ee9900",
  83. strokeOpacity: 1,
  84. strokeWidth: 1,
  85. strokeLinecap: "round",
  86. strokeDashstyle: "solid",
  87. hoverStrokeColor: "red",
  88. hoverStrokeOpacity: 1,
  89. hoverStrokeWidth: 0.2,
  90. pointRadius: 6,
  91. hoverPointRadius: 1,
  92. hoverPointUnit: "%",
  93. pointerEvents: "visiblePainted",
  94. cursor: "inherit",
  95. fontColor: "#000000",
  96. labelAlign: "cm",
  97. labelOutlineColor: "white",
  98. labelOutlineWidth: 3
  99. };
  100. function addLayer() {
  101. map.addLayers([layer, vecotrLayer]);
  102. //显示地图范围
  103. map.setCenter(new SuperMap.LonLat(0, 0), 0);
  104. }
  105. function draw_point() {
  106. deactiveAll();
  107. drawPoint.activate();
  108. }
  109. function draw_line() {
  110. deactiveAll();
  111. drawLine.activate();
  112. }
  113. function draw_polygon() {
  114. deactiveAll();
  115. drawPolygon.activate();
  116. }
  117. function deactiveAll() {
  118. drawPoint.deactivate();
  119. drawLine.deactivate();
  120. drawPolygon.deactivate();
  121. selectCtrl.deactivate();
  122. modifyCtrl.deactivate();
  123. }
  124. function selectFeature() {
  125. deactiveAll();
  126. selectCtrl.activate();
  127. }
  128. function modifyFeature() {
  129. deactiveAll();
  130. modifyCtrl.activate();
  131. }
  132. function undo() {
  133. modifyCtrl.undo();
  134. }
  135. function redo() {
  136. modifyCtrl.redo();
  137. }
  138. function clearFeatures() {
  139. deactiveAll();
  140. vecotrLayer.removeAllFeatures();
  141. }
  142. </script>
  143. </body>
  144. </html>