controler_featureSnap.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8. <title data-i18n="resources.title_featureSnap"></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_featureSnap"></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='switchSnap' class='btn btn-primary' data-i18n="[value]resources.text_input_value_closeSnap" onclick="switch_snap()"/>
  29. <input type='button' id='btn2' class='btn btn-primary' data-i18n="[value]resources.text_input_value_addData" onclick="addData()"/>
  30. <input type='button' id='btn3' class='btn btn-primary' data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
  31. </div>
  32. </div>
  33. </div>
  34. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  35. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  36. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  37. <script type="text/javascript">
  38. host = window.isLocal ? window.server : "https://iserver.supermap.io";
  39. var map, layer, vector, modifyFeature, snapState = true, dataAdded = false,
  40. switchSnap,
  41. snap01,
  42. url = host + "/iserver/services/map-world/rest/maps/World";
  43. //新建矢量图层
  44. vector = new SuperMap.Layer.Vector("vectorLayer");
  45. //创建捕捉对象,第一个参数指的是需要进行捕捉的要素图层,后面两个参数分别是点要素和线要素的捕捉容限,第四个参数是附加参数
  46. snap01 = new SuperMap.Snap([vector], 10, 10, {actived: true});
  47. //矢量要素编辑控件
  48. modifyFeature = new SuperMap.Control.ModifyFeature(vector);
  49. modifyFeature.snap = snap01;
  50. //定义layer图层,TiledDynamicRESTLayer:分块动态 REST 图层
  51. layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {
  52. transparent: true,
  53. cacheEnabled: true
  54. }, {maxResolution: "auto"});
  55. switchSnap = document.getElementById("switchSnap");
  56. //为图层初始化完毕添加addLayer()事件
  57. layer.events.on({"layerInitialized": addLayer});
  58. map = new SuperMap.Map("map", {
  59. controls: [
  60. new SuperMap.Control.LayerSwitcher(),
  61. new SuperMap.Control.ScaleLine(),
  62. new SuperMap.Control.Zoom(),
  63. new SuperMap.Control.Navigation({
  64. dragPanOptions: {
  65. enableKinetic: true
  66. }
  67. }),
  68. modifyFeature]
  69. });
  70. addData();
  71. function addLayer() {
  72. map.addLayers([layer, vector]);
  73. map.setCenter(new SuperMap.LonLat(0, 0), 1);
  74. }
  75. function edit_feature() {
  76. deactiveAll();
  77. modifyFeature.activate();
  78. snap01.on();
  79. snapState = true;
  80. }
  81. function deactivate_snap_all() {
  82. snapState = false;
  83. snap01.off();
  84. }
  85. function activate_snap_all() {
  86. snapState = true;
  87. snap01.on();
  88. }
  89. function switch_snap() {
  90. snapState ? switchSnap.value = resources.text_input_value_openSnap : switchSnap.value = resources.text_input_value_closeSnap;
  91. snapState ? deactivate_snap_all() : activate_snap_all();
  92. }
  93. function deactiveAll() {
  94. modifyFeature.deactivate();
  95. deactivate_snap_all();
  96. }
  97. //移除图层要素
  98. function clearFeatures() {
  99. deactiveAll();
  100. widgets.alert.clearAlert();
  101. dataAdded = false;
  102. vector.removeAllFeatures();
  103. }
  104. function addData() {
  105. if (!dataAdded) {
  106. //点数据
  107. var point_data = [[-55, 34], [-90, -45], [44, -50], [100, 33], [94, 57]];
  108. var point_features = [];
  109. for (var i = 0, len = point_data.length; i < len; i++) {
  110. var point = new SuperMap.Geometry.Point(point_data[i][0], point_data[i][1]);
  111. var feature = new SuperMap.Feature.Vector(point);
  112. point_features.push(feature);
  113. }
  114. //线数据
  115. var line_data = [[113, 19], [107, -2], [92, 13], [90, 21], [82, 12], [74, 3], [64, 22], [52, 8], [71, 0], [91, 3]];
  116. var points = [];
  117. for (var i = 0, len = line_data.length; i < len; i++) {
  118. var point = new SuperMap.Geometry.Point(line_data[i][0], line_data[i][1]);
  119. points.push(point);
  120. }
  121. var line = new SuperMap.Geometry.LineString(points);
  122. var line_feature = new SuperMap.Feature.Vector(line);
  123. //面数据
  124. var polygon_data = [[-16, 30], [-16, 0], [50, 0], [50, 30]];
  125. var points = [];
  126. for (var i = 0, len = polygon_data.length; i < len; i++) {
  127. var point = new SuperMap.Geometry.Point(polygon_data[i][0], polygon_data[i][1]);
  128. points.push(point);
  129. }
  130. var linearRing = new SuperMap.Geometry.LinearRing(points);
  131. var polygon = new SuperMap.Geometry.Polygon([linearRing]);
  132. var polygon_feature = new SuperMap.Feature.Vector(polygon);
  133. point_features.push(line_feature);
  134. point_features.push(polygon_feature);
  135. vector.addFeatures(point_features);
  136. dataAdded = true;
  137. } else {
  138. widgets.alert.showAlert(resources.msg_loadedData, true, 220);
  139. }
  140. edit_feature();
  141. }
  142. </script>
  143. </body>
  144. </html>