machinelearning_binaryclassification.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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. <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  9. <title data-i18n="resources.title_binaryclassification"></title>
  10. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  11. <style>
  12. body {
  13. margin: 0;
  14. padding: 0;
  15. }
  16. #map {
  17. position: absolute;
  18. top: 0;
  19. bottom: 0;
  20. width: 100%;
  21. }
  22. .btn {
  23. position: absolute;
  24. left: 60px;
  25. top: 10px;
  26. text-align: center;
  27. background: #fff;
  28. z-index: 1000;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_binaryclassification" onclick="addResultLayer()" />
  34. <div id="map"></div>
  35. <script
  36. type="text/javascript"
  37. exclude="iclient-mapboxgl"
  38. src="../../dist/mapboxgl/include-mapboxgl.js"
  39. ></script>
  40. <script type="text/javascript">
  41. var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
  42. var attribution =
  43. "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  44. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  45. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  46. var map = new mapboxgl.Map({
  47. container: 'map',
  48. style: {
  49. version: 8,
  50. sources: {
  51. 'raster-tiles': {
  52. attribution: attribution,
  53. type: 'raster',
  54. tiles: [
  55. host +
  56. '/iserver/services/map-building/rest/maps/building/zxyTileImage.png?z={z}&x={x}&y={y}'
  57. ],
  58. tileSize: 256
  59. }
  60. },
  61. layers: [
  62. {
  63. id: 'simple-tiles',
  64. type: 'raster',
  65. source: 'raster-tiles',
  66. minzoom: 0,
  67. maxzoom: 22
  68. }
  69. ]
  70. },
  71. center: [13.594505109654733, 7.3413038418022865],
  72. zoom: 17
  73. });
  74. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  75. function addResultLayer() {
  76. if (map.getLayer('result-layer')) {
  77. map.removeLayer('result-layer');
  78. }
  79. if (map.getSource('result-layer')) {
  80. map.removeSource('result-layer');
  81. }
  82. map.addLayer({
  83. id: 'result-layer',
  84. type: 'raster',
  85. source: {
  86. attribution: attribution,
  87. type: 'raster',
  88. tiles: [
  89. host +
  90. '/iserver/services/map-building/rest/maps/result_building/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true'
  91. ],
  92. tileSize: 256
  93. },
  94. minzoom: 0,
  95. maxzoom: 22
  96. });
  97. }
  98. </script>
  99. </body>
  100. </html>