analysis_routeCalculateMeasure.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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_routeCalculateMeasure"></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. width: 400px;
  27. text-align: center;
  28. z-index: 100;
  29. border-radius: 4px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id="toolbar" class="panel panel-primary">
  35. <div class='panel-heading'>
  36. <h5 class='panel-title text-center' data-i18n="resources.text_routeCalculateMeasure"></h5></div>
  37. <div class='panel-body content'>
  38. <input type="button" class="btn btn-default" data-i18n="[value]resources.text_queryRoute"
  39. onclick="CreateRouteObj()"/>
  40. <input type="button" class="btn btn-default" data-i18n="[value]resources.text_queryPoint"
  41. onclick="RouteCalculateMeasure()"/>
  42. <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear"
  43. onclick="Remove()"/>
  44. </div>
  45. </div>
  46. <div id="map"></div>
  47. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  48. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  49. <script>
  50. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  51. var map, layer, routeObj, vectorLayer, drawPoint, pointLayer, snap01, modifyFeature,
  52. lineStyle = {
  53. strokeColor: "red",
  54. strokeWidth: 2,
  55. pointRadius: 3,
  56. pointerEvents: "visiblePainted",
  57. fill: false
  58. },
  59. pointStyle = {
  60. fillColor: '#669933',
  61. fillOpacity: 0.8,
  62. pointRadius: 5,
  63. strokeColor: '#aaee77',
  64. strokeWidth: 3
  65. },
  66. url1 = host + "/iserver/services/map-changchun/rest/maps/长春市区图",
  67. url2 = host + "/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
  68. init();
  69. function init() {
  70. layer = new SuperMap.Layer.TiledDynamicRESTLayer("changchun", url1, {
  71. transparent: true,
  72. cacheEnabled: true
  73. }, {maxResolution: "auto"});
  74. vectorLayer = new SuperMap.Layer.Vector("RouteLayer");
  75. pointLayer = new SuperMap.Layer.Vector("pointLayer");
  76. snap01 = new SuperMap.Snap([vectorLayer, pointLayer], 20, 20, {actived: true}); //设置actived为true的时候,捕捉已激活。
  77. drawPoint = new SuperMap.Control.DrawFeature(pointLayer, SuperMap.Handler.Point);
  78. drawPoint.events.on({"featureadded": drawPointCompleted});
  79. drawPoint.snap = snap01;
  80. layer.events.on({"layerInitialized": addLayer});
  81. map = new SuperMap.Map("map", {
  82. allOverlays: true, controls: [
  83. new SuperMap.Control.ScaleLine(),
  84. new SuperMap.Control.Zoom(),
  85. new SuperMap.Control.Navigation({
  86. dragPanOptions: {
  87. enableKinetic: true
  88. }
  89. }), drawPoint]
  90. });
  91. map.addControl(new SuperMap.Control.LayerSwitcher(), new SuperMap.Pixel(42, 80));
  92. }
  93. function addLayer() {
  94. map.addLayers([layer, vectorLayer, pointLayer]);
  95. map.setCenter(new SuperMap.LonLat(4503.6240321526, -3861.911472192499), 1);
  96. }
  97. //通过SQL查询路由对象
  98. function CreateRouteObj() {
  99. widgets.alert.clearAlert();
  100. var queryParam, queryBySQLParams, queryBySQLService;
  101. queryParam = new SuperMap.REST.FilterParameter({
  102. name: "RouteDT_road@Changchun",
  103. attributeFilter: "RouteID=1690"
  104. });
  105. queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
  106. queryParams: [queryParam]
  107. });
  108. queryBySQLService = new SuperMap.REST.QueryBySQLService(url1, {
  109. eventListeners: {
  110. "processCompleted": processCompleted,
  111. "processFailed": processFailed
  112. }
  113. });
  114. queryBySQLService.processAsync(queryBySQLParams);
  115. }
  116. //路由对象查询成功,初始化routeObj的值,同时将查询结果绘制在地图上
  117. function processCompleted(queryEventArgs) {
  118. routeObj = geo = queryEventArgs.result.recordsets[0].features[0].geometry;
  119. var feature = new SuperMap.Feature.Vector();
  120. feature.geometry = geo;
  121. feature.style = lineStyle;
  122. vectorLayer.addFeatures(feature);
  123. widgets.alert.showAlert(resources.msg_querySuccess, true);
  124. }
  125. //路由对象查询失败,显示提示信息
  126. function processFailed() {
  127. widgets.alert.showAlert(resources.msg_queryFailure, false);
  128. }
  129. //激活画点控件,判断routeObj是否为空,如果为空则禁止下一步操作
  130. function RouteCalculateMeasure() {
  131. widgets.alert.clearAlert();
  132. if (!routeObj) {
  133. widgets.alert.showAlert(resources.msg_getRoute, false);
  134. return;
  135. }
  136. drawPoint.activate();
  137. }
  138. //绘制点完成触发事件,先将点绘制在地图上,然后以点的geometry和查询结果
  139. // routeObj为参数初始化"点定里程"的参数类。
  140. function drawPointCompleted(drawGeometryArgs) {
  141. var feature = new SuperMap.Feature.Vector();
  142. var geometry = drawGeometryArgs.feature.geometry
  143. feature.geometry = geometry;
  144. feature.style = pointStyle;
  145. pointLayer.addFeatures(feature);
  146. //创建“点定里程”参数类。
  147. var parameters = new SuperMap.REST.RouteCalculateMeasureParameters({
  148. "sourceRoute": routeObj,
  149. "tolerance": 10,
  150. "point": geometry,
  151. "isIgnoreGap": false
  152. });
  153. //创建“点定里程”服务类。
  154. var routeCalculateMeasureService = new SuperMap.REST.RouteCalculateMeasureService(url2, {
  155. eventListeners: {
  156. "processCompleted": routeCalculateMeasureCompleted,
  157. 'processFailed': routeCalculateMeasureFailed
  158. }
  159. }
  160. );
  161. //执行相关操作
  162. routeCalculateMeasureService.processAsync(parameters);
  163. }
  164. //“点定里程”查询完成,提示返回信息
  165. function routeCalculateMeasureCompleted(e) {
  166. widgets.alert.showAlert(resources.msg_MByQuery + e.result.measure, true);
  167. }
  168. //“点定里程”查询失败,提示服务端返回的信息
  169. function routeCalculateMeasureFailed(e) {
  170. widgets.alert.showAlert(e.error.errorMsg, false);
  171. }
  172. //移除图面要素,并使画点控件失效,同时将路由对象置空,去掉提示信息
  173. function Remove() {
  174. widgets.alert.clearAlert();
  175. vectorLayer.removeAllFeatures();
  176. pointLayer.removeAllFeatures();
  177. drawPoint.deactivate();
  178. routeObj = null;
  179. }
  180. </script>
  181. </body>
  182. </html>