03_themeGridUnique.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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_themeGridUnique"></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. <span id="show"></span>
  15. <script type="text/javascript">
  16. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  17. var 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. var dataUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
  21. var map = new mapboxgl.Map({
  22. container: 'map',
  23. style: {
  24. "version": 8,
  25. "sources": {
  26. "raster-tiles": {
  27. "attribution": attribution,
  28. "type": "raster",
  29. "tiles": [host + '/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
  30. "tileSize": 256,
  31. },
  32. },
  33. "layers": [{
  34. "id": "simple-tiles",
  35. "type": "raster",
  36. "source": "raster-tiles",
  37. "minzoom": 0,
  38. "maxzoom": 22
  39. }]
  40. },
  41. center: [117, 40],
  42. zoom: 6
  43. });
  44. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  45. map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
  46. function setItems() {
  47. var items = [],
  48. color0 = new SuperMap.ServerColor(198, 244, 240),
  49. color1 = new SuperMap.ServerColor(176, 244, 188),
  50. color2 = new SuperMap.ServerColor(218, 251, 178),
  51. color3 = new SuperMap.ServerColor(220, 236, 145),
  52. color4 = new SuperMap.ServerColor(96, 198, 66),
  53. color5 = new SuperMap.ServerColor(20, 142, 53),
  54. color6 = new SuperMap.ServerColor(85, 144, 55),
  55. color7 = new SuperMap.ServerColor(171, 168, 38),
  56. color8 = new SuperMap.ServerColor(235, 165, 9),
  57. color9 = new SuperMap.ServerColor(203, 89, 2),
  58. color10 = new SuperMap.ServerColor(157, 25, 1),
  59. color11 = new SuperMap.ServerColor(118, 15, 3),
  60. color12 = new SuperMap.ServerColor(112, 32, 7),
  61. color13 = new SuperMap.ServerColor(106, 45, 12),
  62. color14 = new SuperMap.ServerColor(129, 80, 50),
  63. color15 = new SuperMap.ServerColor(160, 154, 146);
  64. for (var i = -4; i < 2197; i++) {
  65. var num = parseInt(i / 135);
  66. var item = new SuperMap.ThemeGridUniqueItem();
  67. item.caption = 1;
  68. item.unique = i;
  69. item.visible = true;
  70. switch (num) {
  71. case 0:
  72. item.color = color0;
  73. break;
  74. case 1:
  75. item.color = color1;
  76. break;
  77. case 2:
  78. item.color = color2;
  79. break;
  80. case 3:
  81. item.color = color3;
  82. break;
  83. case 4:
  84. item.color = color4;
  85. break;
  86. case 5:
  87. item.color = color5;
  88. break;
  89. case 6:
  90. item.color = color6;
  91. break;
  92. case 7:
  93. item.color = color7;
  94. break;
  95. case 8:
  96. item.color = color8;
  97. break;
  98. case 9:
  99. item.color = color9;
  100. break;
  101. case 10:
  102. item.color = color10;
  103. break;
  104. case 11:
  105. item.color = color11;
  106. break;
  107. case 12:
  108. item.color = color12;
  109. break;
  110. case 13:
  111. item.color = color13;
  112. break;
  113. case 14:
  114. item.color = color14;
  115. break;
  116. case 15:
  117. item.color = color15;
  118. break;
  119. default:
  120. item.color = color0;
  121. break;
  122. }
  123. items.push(item);
  124. }
  125. return items;
  126. }
  127. function createTheme() {
  128. themeGridUnique = new SuperMap.ThemeGridUnique({
  129. defaultcolor: new SuperMap.ServerColor(0, 0, 0),
  130. items: setItems()
  131. });
  132. themeParameters = new SuperMap.ThemeParameters({
  133. datasetNames: ["JingjinTerrain"],
  134. dataSourceNames: ["Jingjin"],
  135. themes: [themeGridUnique]
  136. });
  137. new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
  138. var result = serviceResult.result;
  139. if (result && result.newResourceID) {
  140. map.addSource("theme", {
  141. "type": 'raster',
  142. "tiles": [host + '/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
  143. "tileSize": 256,
  144. });
  145. map.addLayer({
  146. "id": "themeLayer",
  147. "type": "raster",
  148. "source": "theme",
  149. });
  150. }
  151. })
  152. }
  153. map.on('load', function () {
  154. createTheme();
  155. });
  156. </script>
  157. </body>
  158. </html>