03_themeGridUnique.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  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. <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, themeLayer, options,
  16. url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-jingjin/rest/maps/京津地区地图";
  17. new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
  18. var mapJSONObj = serviceResult.result;
  19. map = new ol.Map({
  20. target: 'map',
  21. controls: ol.control.defaults({attributionOptions: {collapsed: false}})
  22. .extend([new ol.supermap.control.Logo()]),
  23. view: new ol.View({
  24. center: [117, 40],
  25. zoom: 7,
  26. projection: "EPSG:4326",
  27. multiWorld: true
  28. })
  29. });
  30. options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
  31. var layer = new ol.layer.Tile({
  32. source: new ol.source.TileSuperMapRest(options)
  33. });
  34. map.addLayer(layer);
  35. createTheme();
  36. });
  37. function setItems() {
  38. var items = [],
  39. color0 = new SuperMap.ServerColor(198, 244, 240),
  40. color1 = new SuperMap.ServerColor(176, 244, 188),
  41. color2 = new SuperMap.ServerColor(218, 251, 178),
  42. color3 = new SuperMap.ServerColor(220, 236, 145),
  43. color4 = new SuperMap.ServerColor(96, 198, 66),
  44. color5 = new SuperMap.ServerColor(20, 142, 53),
  45. color6 = new SuperMap.ServerColor(85, 144, 55),
  46. color7 = new SuperMap.ServerColor(171, 168, 38),
  47. color8 = new SuperMap.ServerColor(235, 165, 9),
  48. color9 = new SuperMap.ServerColor(203, 89, 2),
  49. color10 = new SuperMap.ServerColor(157, 25, 1),
  50. color11 = new SuperMap.ServerColor(118, 15, 3),
  51. color12 = new SuperMap.ServerColor(112, 32, 7),
  52. color13 = new SuperMap.ServerColor(106, 45, 12),
  53. color14 = new SuperMap.ServerColor(129, 80, 50),
  54. color15 = new SuperMap.ServerColor(160, 154, 146);
  55. for (var i = -4; i < 2197; i++) {
  56. var num = parseInt(i / 135);
  57. var item = new SuperMap.ThemeGridUniqueItem();
  58. item.caption = 1;
  59. item.unique = i;
  60. item.visible = true;
  61. switch (num) {
  62. case 0:
  63. item.color = color0;
  64. break;
  65. case 1:
  66. item.color = color1;
  67. break;
  68. case 2:
  69. item.color = color2;
  70. break;
  71. case 3:
  72. item.color = color3;
  73. break;
  74. case 4:
  75. item.color = color4;
  76. break;
  77. case 5:
  78. item.color = color5;
  79. break;
  80. case 6:
  81. item.color = color6;
  82. break;
  83. case 7:
  84. item.color = color7;
  85. break;
  86. case 8:
  87. item.color = color8;
  88. break;
  89. case 9:
  90. item.color = color9;
  91. break;
  92. case 10:
  93. item.color = color10;
  94. break;
  95. case 11:
  96. item.color = color11;
  97. break;
  98. case 12:
  99. item.color = color12;
  100. break;
  101. case 13:
  102. item.color = color13;
  103. break;
  104. case 14:
  105. item.color = color14;
  106. break;
  107. case 15:
  108. item.color = color15;
  109. break;
  110. default:
  111. item.color = color0;
  112. break;
  113. }
  114. items.push(item);
  115. }
  116. return items;
  117. }
  118. function createTheme() {
  119. var themeGridUnique = new SuperMap.ThemeGridUnique({
  120. defaultcolor: new SuperMap.ServerColor(0, 0, 0),
  121. items: setItems()
  122. });
  123. var themeParameters = new SuperMap.ThemeParameters({
  124. datasetNames: ["JingjinTerrain"],
  125. dataSourceNames: ["Jingjin"],
  126. themes: [themeGridUnique]
  127. });
  128. var extent = [114.59, 37.76, 119.51, 42.31];
  129. new ol.supermap.ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
  130. var result = serviceResult.result;
  131. if (result && result.newResourceID) {
  132. themeLayer = new ol.layer.Tile({
  133. source: new ol.source.TileSuperMapRest({
  134. url: url,
  135. noWrap: true,
  136. cacheEnabled: false,
  137. transparent: true,
  138. layersID: result.newResourceID,
  139. tileGrid: new ol.tilegrid.TileGrid({
  140. extent: extent,
  141. resolutions: options.tileGrid.getResolutions()
  142. }),
  143. transparent: true
  144. })
  145. });
  146. map.addLayer(themeLayer);
  147. }
  148. });
  149. }
  150. </script>
  151. </body>
  152. </html>