03_themeUnique.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  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_themeUnique"></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-china400/rest/maps/China";
  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: [12406035, 4304933],
  25. zoom: 4,
  26. projection: "EPSG:3857",
  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 createTheme() {
  38. var style1, style2, style3, style4, style5, style6;
  39. style1 = new SuperMap.ServerStyle({
  40. fillForeColor: new SuperMap.ServerColor(248, 203, 249),
  41. lineColor: new SuperMap.ServerColor(255, 255, 255),
  42. lineWidth: 0.1
  43. });
  44. style2 = new SuperMap.ServerStyle({
  45. fillForeColor: new SuperMap.ServerColor(196, 255, 189),
  46. lineColor: new SuperMap.ServerColor(255, 255, 255),
  47. lineWidth: 0.1
  48. });
  49. style3 = new SuperMap.ServerStyle({
  50. fillForeColor: new SuperMap.ServerColor(255, 173, 173),
  51. lineColor: new SuperMap.ServerColor(255, 255, 255),
  52. lineWidth: 0.1
  53. });
  54. style4 = new SuperMap.ServerStyle({
  55. fillForeColor: new SuperMap.ServerColor(255, 239, 168),
  56. lineColor: new SuperMap.ServerColor(255, 255, 255),
  57. lineWidth: 0.1
  58. });
  59. style5 = new SuperMap.ServerStyle({
  60. fillForeColor: new SuperMap.ServerColor(173, 209, 255),
  61. lineColor: new SuperMap.ServerColor(255, 255, 255),
  62. lineWidth: 0.1
  63. });
  64. style6 = new SuperMap.ServerStyle({
  65. fillForeColor: new SuperMap.ServerColor(132, 164, 232),
  66. lineColor: new SuperMap.ServerColor(255, 255, 255),
  67. lineWidth: 0.1
  68. });
  69. var themeUniqueIteme1 = new SuperMap.ThemeUniqueItem({
  70. unique: "黑龙江省",
  71. style: style1
  72. }),
  73. themeUniqueIteme2 = new SuperMap.ThemeUniqueItem({
  74. unique: "湖北省",
  75. style: style2
  76. }),
  77. themeUniqueIteme3 = new SuperMap.ThemeUniqueItem({
  78. unique: "吉林省",
  79. style: style3
  80. }),
  81. themeUniqueIteme4 = new SuperMap.ThemeUniqueItem({
  82. unique: "内蒙古自治区",
  83. style: style4
  84. }),
  85. themeUniqueIteme5 = new SuperMap.ThemeUniqueItem({
  86. unique: "青海省",
  87. style: style5
  88. }),
  89. themeUniqueIteme6 = new SuperMap.ThemeUniqueItem({
  90. unique: "新疆维吾尔自治区",
  91. style: style6
  92. }),
  93. themeUniqueIteme7 = new SuperMap.ThemeUniqueItem({
  94. unique: "云南省",
  95. style: style1
  96. }),
  97. themeUniqueIteme8 = new SuperMap.ThemeUniqueItem({
  98. unique: "四川省",
  99. style: style4
  100. }),
  101. themeUniqueIteme9 = new SuperMap.ThemeUniqueItem({
  102. unique: "贵州省",
  103. style: style3
  104. }),
  105. themeUniqueIteme10 = new SuperMap.ThemeUniqueItem({
  106. unique: "甘肃省",
  107. style: style3
  108. }),
  109. themeUniqueIteme11 = new SuperMap.ThemeUniqueItem({
  110. unique: "宁夏回族自治区",
  111. style: style5
  112. }),
  113. themeUniqueIteme12 = new SuperMap.ThemeUniqueItem({
  114. unique: "重庆市",
  115. style: style6
  116. }),
  117. themeUniqueIteme13 = new SuperMap.ThemeUniqueItem({
  118. unique: "山东省",
  119. style: style1
  120. }),
  121. themeUniqueIteme14 = new SuperMap.ThemeUniqueItem({
  122. unique: "安徽省",
  123. style: style2
  124. }),
  125. themeUniqueIteme15 = new SuperMap.ThemeUniqueItem({
  126. unique: "江西省",
  127. style: style3
  128. }),
  129. themeUniqueIteme16 = new SuperMap.ThemeUniqueItem({
  130. unique: "浙江省",
  131. style: style4
  132. }),
  133. themeUniqueIteme17 = new SuperMap.ThemeUniqueItem({
  134. unique: "台湾省",
  135. style: style2
  136. }),
  137. themeUniqueIteme18 = new SuperMap.ThemeUniqueItem({
  138. unique: "江苏省",
  139. style: style6
  140. }),
  141. themeUniqueIteme19 = new SuperMap.ThemeUniqueItem({
  142. unique: "湖南省",
  143. style: style5
  144. }),
  145. themeUniqueIteme20 = new SuperMap.ThemeUniqueItem({
  146. unique: "河南省",
  147. style: style4
  148. }),
  149. themeUniqueIteme21 = new SuperMap.ThemeUniqueItem({
  150. unique: "河北省",
  151. style: style3
  152. }),
  153. themeUniqueIteme22 = new SuperMap.ThemeUniqueItem({
  154. unique: "福建省",
  155. style: style5
  156. }),
  157. themeUniqueIteme23 = new SuperMap.ThemeUniqueItem({
  158. unique: "广西壮族自治区",
  159. style: style6
  160. }),
  161. themeUniqueIteme24 = new SuperMap.ThemeUniqueItem({
  162. unique: "西藏自治区",
  163. style: style2
  164. }),
  165. themeUniqueIteme25 = new SuperMap.ThemeUniqueItem({
  166. unique: "广东省",
  167. style: style4
  168. }),
  169. themeUniqueIteme26 = new SuperMap.ThemeUniqueItem({
  170. unique: "山西省",
  171. style: style2
  172. }),
  173. themeUniqueIteme27 = new SuperMap.ThemeUniqueItem({
  174. unique: "陕西省",
  175. style: style1
  176. }),
  177. themeUniqueIteme28 = new SuperMap.ThemeUniqueItem({
  178. unique: "天津市",
  179. style: style5
  180. }),
  181. themeUniqueIteme29 = new SuperMap.ThemeUniqueItem({
  182. unique: "北京市",
  183. style: style2
  184. }),
  185. themeUniqueIteme30 = new SuperMap.ThemeUniqueItem({
  186. unique: "辽宁省",
  187. style: style1
  188. });
  189. var themeUniqueItemes = [
  190. themeUniqueIteme1, themeUniqueIteme2, themeUniqueIteme3, themeUniqueIteme4, themeUniqueIteme5,
  191. themeUniqueIteme6, themeUniqueIteme7, themeUniqueIteme8, themeUniqueIteme9, themeUniqueIteme10,
  192. themeUniqueIteme11, themeUniqueIteme12, themeUniqueIteme13, themeUniqueIteme14, themeUniqueIteme15,
  193. themeUniqueIteme16, themeUniqueIteme17, themeUniqueIteme18, themeUniqueIteme19, themeUniqueIteme20,
  194. themeUniqueIteme21, themeUniqueIteme22, themeUniqueIteme23, themeUniqueIteme24, themeUniqueIteme25,
  195. themeUniqueIteme26, themeUniqueIteme27, themeUniqueIteme28, themeUniqueIteme29, themeUniqueIteme30
  196. ];
  197. var themeUnique = new SuperMap.ThemeUnique({
  198. uniqueExpression: "Name",
  199. items: themeUniqueItemes,
  200. defaultStyle: style1
  201. });
  202. var themeParameters = new SuperMap.ThemeParameters({
  203. datasetNames: ["China_Province_pg"],
  204. dataSourceNames: ["China"],
  205. themes: [themeUnique]
  206. });
  207. new ol.supermap.ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
  208. var result = serviceResult.result;
  209. if (result && result.newResourceID) {
  210. themeLayer = new ol.layer.Tile({
  211. source: new ol.source.TileSuperMapRest({
  212. url: url,
  213. noWrap: true,
  214. cacheEnabled: false,
  215. transparent: true,
  216. layersID: result.newResourceID,
  217. transparent: true
  218. })
  219. });
  220. map.addLayer(themeLayer);
  221. }
  222. });
  223. }
  224. </script>
  225. </body>
  226. </html>