04_bufferAnalystService.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n="resources.title_bufferAnalystService"></title>
  9. <script type="text/javascript" src="../js/include-web.js"></script>
  10. </head>
  11. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  12. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  13. <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  14. <script type="text/javascript">
  15. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  16. var map,
  17. attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  18. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  19. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
  20. baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
  21. serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
  22. map = new mapboxgl.Map({
  23. container: 'map',
  24. style: {
  25. "version": 8,
  26. "sources": {
  27. "raster-tiles": {
  28. "attribution": attribution,
  29. "type": "raster",
  30. "tiles": [baseUrl],
  31. "tileSize": 256
  32. }
  33. },
  34. "layers": [{
  35. "id": "simple-tiles",
  36. "type": "raster",
  37. "source": "raster-tiles",
  38. "minzoom": 2,
  39. "maxzoom": 18
  40. }]
  41. },
  42. center: [116.28094998209556, 39.897168019388474],
  43. zoom: 12
  44. });
  45. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  46. map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
  47. map.on("load", function () {
  48. bufferAnalystProcess();
  49. });
  50. function bufferAnalystProcess() {
  51. map.addLayer({
  52. "id": "route",
  53. "type": "line",
  54. "source": {
  55. "type": "geojson",
  56. "data": {
  57. "type": "Feature",
  58. "geometry": {
  59. "type": "LineString",
  60. "coordinates": [
  61. [116.2143386597, 39.8959419733],
  62. [116.2156351162, 39.8963250173],
  63. [116.2182280292, 39.8968111885],
  64. [116.2740019864, 39.8970124079],
  65. [116.3103285499, 39.8970574832],
  66. [116.3321510064, 39.8970392162],
  67. [116.3377051439, 39.8973437531],
  68. [116.3463089006, 39.8978391816],
  69. ]
  70. }
  71. }
  72. },
  73. "layout": {
  74. "line-join": "round",
  75. "line-cap": "round"
  76. },
  77. "paint": {
  78. "line-color": "#888",
  79. "line-width": 8
  80. }
  81. });
  82. //缓冲区分析参数
  83. var dsBufferAnalystParameters = new SuperMap.DatasetBufferAnalystParameters({
  84. dataset: "Road_L@Jingjin",
  85. filterQueryParameter: new SuperMap.FilterParameter({
  86. attributeFilter: "NAME='莲花池东路'"
  87. }),
  88. bufferSetting: new SuperMap.BufferSetting({
  89. endType: SuperMap.BufferEndType.ROUND,
  90. leftDistance: {value: 300},
  91. rightDistance: {value: 300},
  92. semicircleLineSegment: 10,
  93. radiusUnit: 'METER'
  94. })
  95. });
  96. //缓冲区分析服务
  97. new mapboxgl.supermap.SpatialAnalystService(serviceUrl).bufferAnalysis(dsBufferAnalystParameters, function (serviceResult) {
  98. map.addLayer({
  99. "id": "queryDatas",
  100. "type": "fill", /* fill类型一般用来表示一个面,一般较大 */
  101. "source": {
  102. "type": "geojson",
  103. "data": serviceResult.result.recordset.features
  104. },
  105. "paint": {
  106. "fill-color": "red", /* 填充的颜色 */
  107. "fill-opacity": 0.4 /* 透明度 */
  108. },
  109. });
  110. })
  111. }
  112. </script>
  113. </body>
  114. </html>