theme_themeGridRange.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8. <title data-i18n="resources.title_themeGridRange"></title>
  9. <style type="text/css">
  10. .editPane {
  11. position: absolute;
  12. right: 60px;
  13. top: 50px;
  14. text-align: center;
  15. background: #FFF;
  16. z-index: 1000;
  17. }
  18. </style>
  19. </head>
  20. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  21. <div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
  22. <div class='panel-heading'>
  23. <h5 class='panel-title text-center' data-i18n="resources.title_themeGridRange"></h5>
  24. </div>
  25. <div class='panel-body' id='params'>
  26. <p></p>
  27. <div align='right' class='button-group'>
  28. <input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.btn_addThemeLayer" onclick="addThemeGridRange()"/>
  29. <input type='button' id='btn2' class='btn btn-primary' data-i18n="[value]resources.text_input_value_clear" onclick="removeTheme()"/>
  30. </div>
  31. </div>
  32. </div>
  33. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  34. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  35. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  36. <script type="text/javascript">
  37. var map, baseLayer, themeLayer,
  38. host = window.isLocal ? window.server : "https://iserver.supermap.io",
  39. url = host+"/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
  40. map = new SuperMap.Map("map", {
  41. controls: [
  42. new SuperMap.Control.LayerSwitcher(),
  43. new SuperMap.Control.ScaleLine(),
  44. new SuperMap.Control.Zoom(),
  45. new SuperMap.Control.Navigation({
  46. dragPanOptions: {
  47. enableKinetic: true
  48. }
  49. })]
  50. });
  51. baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("Jingjin", url, {
  52. transparent: true,
  53. cacheEnabled: true
  54. }, {maxResolution: "auto"});
  55. baseLayer.events.on({"layerInitialized": addLayer});
  56. function addLayer() {
  57. map.addLayer(baseLayer);
  58. map.setCenter(new SuperMap.LonLat(117, 40), 0);
  59. map.allOverlays = true;
  60. }
  61. function addThemeGridRange() {
  62. removeTheme();
  63. var themeService = new SuperMap.REST.ThemeService(url, {
  64. eventListeners: {
  65. "processCompleted": themeCompleted,
  66. "processFailed": themeFailed
  67. }
  68. }),
  69. color1 = new SuperMap.REST.ServerColor(198, 244, 240),
  70. color2 = new SuperMap.REST.ServerColor(176, 244, 188),
  71. color3 = new SuperMap.REST.ServerColor(218, 251, 178),
  72. color4 = new SuperMap.REST.ServerColor(220, 236, 145),
  73. color5 = new SuperMap.REST.ServerColor(96, 198, 66),
  74. color6 = new SuperMap.REST.ServerColor(20, 142, 53),
  75. color7 = new SuperMap.REST.ServerColor(85, 144, 55),
  76. color8 = new SuperMap.REST.ServerColor(171, 168, 38),
  77. color9 = new SuperMap.REST.ServerColor(235, 165, 9),
  78. color10 = new SuperMap.REST.ServerColor(203, 89, 2),
  79. color11 = new SuperMap.REST.ServerColor(157, 25, 1),
  80. color12 = new SuperMap.REST.ServerColor(118, 15, 3),
  81. color13 = new SuperMap.REST.ServerColor(112, 32, 7),
  82. color14 = new SuperMap.REST.ServerColor(106, 45, 12),
  83. color15 = new SuperMap.REST.ServerColor(129, 80, 50),
  84. color16 = new SuperMap.REST.ServerColor(160, 154, 146),
  85. themeGridRangeIteme1 = new SuperMap.REST.ThemeGridRangeItem({
  86. start: -4,
  87. end: 120,
  88. color: color1
  89. }),
  90. themeGridRangeIteme2 = new SuperMap.REST.ThemeGridRangeItem({
  91. start: 120,
  92. end: 240,
  93. color: color2
  94. }),
  95. themeGridRangeIteme3 = new SuperMap.REST.ThemeGridRangeItem({
  96. start: 240,
  97. end: 360,
  98. color: color3
  99. }),
  100. themeGridRangeIteme4 = new SuperMap.REST.ThemeGridRangeItem({
  101. start: 360,
  102. end: 480,
  103. color: color4
  104. }),
  105. themeGridRangeIteme5 = new SuperMap.REST.ThemeGridRangeItem({
  106. start: 480,
  107. end: 600,
  108. color: color5
  109. }),
  110. themeGridRangeIteme6 = new SuperMap.REST.ThemeGridRangeItem({
  111. start: 600,
  112. end: 720,
  113. color: color6
  114. }),
  115. themeGridRangeIteme7 = new SuperMap.REST.ThemeGridRangeItem({
  116. start: 720,
  117. end: 840,
  118. color: color7
  119. }),
  120. themeGridRangeIteme8 = new SuperMap.REST.ThemeGridRangeItem({
  121. start: 840,
  122. end: 960,
  123. color: color8
  124. }),
  125. themeGridRangeIteme9 = new SuperMap.REST.ThemeGridRangeItem({
  126. start: 960,
  127. end: 1100,
  128. color: color9
  129. }),
  130. themeGridRangeIteme10 = new SuperMap.REST.ThemeGridRangeItem({
  131. start: 1100,
  132. end: 1220,
  133. color: color10
  134. }),
  135. themeGridRangeIteme11 = new SuperMap.REST.ThemeGridRangeItem({
  136. start: 1220,
  137. end: 1340,
  138. color: color11
  139. }),
  140. themeGridRangeIteme12 = new SuperMap.REST.ThemeGridRangeItem({
  141. start: 1340,
  142. end: 1460,
  143. color: color12
  144. }),
  145. themeGridRangeIteme13 = new SuperMap.REST.ThemeGridRangeItem({
  146. start: 1460,
  147. end: 1600,
  148. color: color13
  149. }),
  150. themeGridRangeIteme14 = new SuperMap.REST.ThemeGridRangeItem({
  151. start: 1600,
  152. end: 1800,
  153. color: color14
  154. }),
  155. themeGridRangeIteme15 = new SuperMap.REST.ThemeGridRangeItem({
  156. start: 1800,
  157. end: 2000,
  158. color: color15
  159. }),
  160. themeGridRangeIteme16 = new SuperMap.REST.ThemeGridRangeItem({
  161. start: 2000,
  162. end: 2167,
  163. color: color16
  164. }),
  165. themeGridRange = new SuperMap.REST.ThemeGridRange({
  166. reverseColor: false,
  167. rangeMode: SuperMap.REST.RangeMode.EQUALINTERVAL,
  168. items: [themeGridRangeIteme1,
  169. themeGridRangeIteme2,
  170. themeGridRangeIteme3,
  171. themeGridRangeIteme4,
  172. themeGridRangeIteme5,
  173. themeGridRangeIteme6,
  174. themeGridRangeIteme7,
  175. themeGridRangeIteme8,
  176. themeGridRangeIteme9,
  177. themeGridRangeIteme10,
  178. themeGridRangeIteme11,
  179. themeGridRangeIteme12,
  180. themeGridRangeIteme13,
  181. themeGridRangeIteme14,
  182. themeGridRangeIteme15,
  183. themeGridRangeIteme16
  184. ]
  185. }),
  186. themeParameters = new SuperMap.REST.ThemeParameters({
  187. datasetNames: ["JingjinTerrain"],
  188. dataSourceNames: ["Jingjin"],
  189. joinItems: null,
  190. themes: [themeGridRange],
  191. types: ['GRID']
  192. });
  193. themeService.processAsync(themeParameters);
  194. }
  195. function themeCompleted(themeEventArgs) {
  196. if (themeEventArgs.result.resourceInfo.id) {
  197. themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("京津地形高程分段专题图", url, {
  198. cacheEnabled: true,
  199. transparent: true,
  200. layersID: themeEventArgs.result.resourceInfo.id
  201. }, {"maxResolution": "auto"});
  202. themeLayer.events.on({"layerInitialized": addThemelayer});
  203. }
  204. }
  205. function addThemelayer() {
  206. map.addLayer(themeLayer);
  207. }
  208. function themeFailed(serviceFailedEventArgs) {
  209. //doMapAlert("",serviceFailedEventArgs.error.errorMsg,true);
  210. widgets.alert.showAlert(serviceFailedEventArgs.error.errorMsg,false);
  211. }
  212. function removeTheme() {
  213. if (map.layers.length > 1) {
  214. map.removeLayer(themeLayer, true);
  215. }
  216. }
  217. </script>
  218. </body>
  219. </html>