04_bufferAnalystService_geometry.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  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_bufferAnalystServiceGeometry"></title>
  9. <script type="text/javascript" src="../js/include-web.js"></script>
  10. <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
  11. </head>
  12. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
  13. <div id="map" style="width: 100%;height:100%"></div>
  14. <script type="text/javascript">
  15. var map, options,
  16. baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-changchun/rest/maps/长春市区图",
  17. serviceUrl = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
  18. var extent = [48.4, -7668.25, 8958.85, -55.58];
  19. var projection = new ol.proj.Projection({
  20. code:'',
  21. extent: extent,
  22. units: 'm'
  23. });
  24. new ol.supermap.MapService(baseUrl).getMapInfo(function (serviceResult) {
  25. var mapJSONObj = serviceResult.result;
  26. map = new ol.Map({
  27. target: 'map',
  28. controls: ol.control.defaults({attributionOptions: {collapsed: false}})
  29. .extend([new ol.supermap.control.Logo()]),
  30. view: new ol.View({
  31. center: [5100, -3861.911472192499],
  32. zoom: 2,
  33. projection: projection,
  34. multiWorld: true
  35. })
  36. });
  37. options = ol.source.TileSuperMapRest.optionsFromMapJSON(baseUrl, mapJSONObj);
  38. var layer = new ol.layer.Tile({
  39. source: new ol.source.TileSuperMapRest(options)
  40. });
  41. map.addLayer(layer);
  42. geoBufferAnalystProcess();
  43. });
  44. function geoBufferAnalystProcess() {
  45. var pointsList = [
  46. [2823.940, -4690.000],
  47. [3448.940, -4690.301],
  48. [3816.561, -3810.125],
  49. [3917.383, -3609.158],
  50. [3976.983, -3490.291],
  51. [4020.004, -4377.027],
  52. [4076.265, -4382.939],
  53. [4215.049, -4382.333],
  54. [4428.156, -4382.285],
  55. [4647.579, -4383.017],
  56. [4679.707, -4382.898],
  57. [4917.462, -4382.635],
  58. [5074.019, -4381.833],
  59. [5257.042, -4381.031],
  60. [5363.785, -4380.717],
  61. [5671.717, -4378.794],
  62. [5847.521, -4377.970],
  63. [5990.637, -4303.528],
  64. [6055.343, -4270.072],
  65. [6168.913, -4382.389],
  66. [6214.183, -4209.927],
  67. [6377.789, -4209.142],
  68. [6393.692, -4210.142],
  69. [6693.989, -4207.450],
  70. [6788.392, -4208.450],
  71. [6984.304, -4207.210],
  72. [7189.183, -4208.296],
  73. [7300.505, -4208.296],
  74. [7573.056, -4208.803],
  75. [7680.977, -4208.804],
  76. [7850.593, -4208.393],
  77. [8182.656, -4210.533],
  78. [8554.893, -4261.485]
  79. ];
  80. //在所有离散gps信号点添加到地图上
  81. for (i = 0; i < pointsList.length; i++) {
  82. var point = new ol.Feature({
  83. geometry: new ol.geom.Point(pointsList[i])
  84. });
  85. var pointLayer = new ol.layer.Vector({
  86. source: new ol.source.Vector({
  87. features: [point]
  88. }),
  89. style: new ol.style.Style({
  90. image: new ol.style.Circle({
  91. radius: 4,
  92. fill: new ol.style.Fill({
  93. color: 'black'
  94. })
  95. })
  96. })
  97. });
  98. map.addLayer(pointLayer);
  99. }
  100. //将由离散gps信号点生成的线路添加到地图上
  101. var roadLine = new ol.geom.LineString(pointsList);
  102. var roadLineSource = new ol.source.Vector({
  103. features: [new ol.Feature(roadLine)]
  104. });
  105. var roadLineLayer = new ol.layer.Vector({
  106. source: roadLineSource,
  107. style: new ol.style.Style({
  108. stroke: new ol.style.Stroke({
  109. color: 'red',
  110. width: 3
  111. })
  112. })
  113. });
  114. map.addLayer(roadLineLayer);
  115. //创建缓冲区分析服务参数
  116. geoBufferAnalystParams = new SuperMap.GeometryBufferAnalystParameters({
  117. sourceGeometry: roadLine,
  118. bufferSetting: new SuperMap.BufferSetting({
  119. endType: SuperMap.BufferEndType.ROUND,
  120. leftDistance: new SuperMap.BufferDistance({value: 250}),
  121. rightDistance: new SuperMap.BufferDistance({value: 250}),
  122. semicircleLineSegment: 10
  123. })
  124. });
  125. //向iServer发送请求并返回结果
  126. new ol.supermap.SpatialAnalystService(serviceUrl).bufferAnalysis(geoBufferAnalystParams, function (serviceResult) {
  127. var bufferSource = new ol.source.Vector({
  128. features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.resultGeometry)
  129. });
  130. var resultLayer = new ol.layer.Vector({
  131. source: bufferSource,
  132. style: new ol.style.Style({
  133. stroke: new ol.style.Stroke({
  134. color: 'blue',
  135. width: 1
  136. }),
  137. fill: new ol.style.Fill({
  138. color: 'rgba(255, 0, 0, 0.1)'
  139. })
  140. })
  141. });
  142. map.addLayer(resultLayer);
  143. //将组成缓冲区的边界点提出来,为了构造下面查询服务的geometry
  144. var bufferPoints = [];
  145. var coordinate = serviceResult.result.resultGeometry.geometry.coordinates[0][0];
  146. for (var i = 0; i < coordinate.length; i++) {
  147. bufferPoints.push([coordinate[i][0], coordinate[i][1]]);
  148. }
  149. var geometry = new ol.geom.Polygon([bufferPoints]);
  150. queryByGeometryParameters = new SuperMap.QueryByGeometryParameters({
  151. queryParams: [new SuperMap.FilterParameter({name: "Company@Changchun.2"})],
  152. geometry: geometry,
  153. spatialQueryMode: SuperMap.SpatialQueryMode.INTERSECT
  154. });
  155. new ol.supermap.QueryService(baseUrl).queryByGeometry(queryByGeometryParameters, function (serviceResult) {
  156. var features = (new ol.format.GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features);
  157. var iconStyle = new ol.style.Style({
  158. image: new ol.style.Icon(({
  159. anchor: [0.5, 1],
  160. src: '../img/marker-gold.png'
  161. }))
  162. });
  163. for (var i = 0; i < features.length; i++) {
  164. features[i].setStyle(iconStyle);
  165. }
  166. var vectorSource = new ol.source.Vector({
  167. features: features
  168. });
  169. var resultLayer1 = new ol.layer.Vector({
  170. source: vectorSource
  171. });
  172. map.addLayer(resultLayer1);
  173. });
  174. });
  175. }
  176. </script>
  177. </body>
  178. </html>