04_thiessenAnalystService_geometry.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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_thiessenAnalystGeometry"></title>
  9. <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
  10. <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.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="margin:0 auto;width: 100%;height: 100%"></div>
  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. }]
  39. },
  40. center: [116.2740019864, 39.8970124079],
  41. zoom: 8
  42. });
  43. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  44. map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
  45. map.on("load", function () {
  46. thiessenAnalystProcess();
  47. });
  48. function thiessenAnalystProcess() {
  49. //创建几何泰森多边形参数
  50. var pointsList = [{
  51. "type": "Feature",
  52. "geometry": {
  53. "type": "Point",
  54. "coordinates": [116.1916654036, 39.8888542507]
  55. }
  56. },{
  57. "type": "Feature",
  58. "geometry": {
  59. "type": "Point",
  60. "coordinates": [116.7031567225, 40.0118542507]
  61. }
  62. },{
  63. "type": "Feature",
  64. "geometry": {
  65. "type": "Point",
  66. "coordinates": [116.2156351162, 39.8963250173]
  67. }
  68. },{
  69. "type": "Feature",
  70. "geometry": {
  71. "type": "Point",
  72. "coordinates": [116.2740019864, 40.0000124079]
  73. }
  74. },{
  75. "type": "Feature",
  76. "geometry": {
  77. "type": "Point",
  78. "coordinates": [116.6003285499, 39.8970574832]
  79. }
  80. },{
  81. "type": "Feature",
  82. "geometry": {
  83. "type": "Point",
  84. "coordinates": [116.3321510064, 39.7970392162]
  85. }
  86. },{
  87. "type": "Feature",
  88. "geometry": {
  89. "type": "Point",
  90. "coordinates": [116.3377051439, 39.8973437531]
  91. }
  92. },{
  93. "type": "Feature",
  94. "geometry": {
  95. "type": "Point",
  96. "coordinates": [116.3463089006, 39.8978391816]
  97. }
  98. }];
  99. var gThiessenAnalystParameters = new SuperMap.GeometryThiessenAnalystParameters({
  100. points: pointsList
  101. });
  102. //创建泰森多边形服务实例
  103. new mapboxgl.supermap.SpatialAnalystService(serviceUrl).thiessenAnalysis(gThiessenAnalystParameters, function (serviceResult) {
  104. map.addSource("analystDatas", {
  105. "type": "geojson",
  106. "data": serviceResult.result.regions
  107. });
  108. map.addLayer({
  109. "id": "analystLayer",
  110. "type": "fill",
  111. "source": "analystDatas",
  112. "paint": {
  113. "fill-color": "rgba(255, 0, 0, 0.2)",
  114. "fill-outline-color": "blue"
  115. },
  116. });
  117. })
  118. }
  119. </script>
  120. </body>
  121. </html>