theme_themeUnique.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  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_themeUnique"></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_themeUnique"></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="addThemeUnique()"/>
  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-china400/rest/maps/China";
  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("China400", 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(10080677, 4591416), 4);
  59. map.allOverlays = true;
  60. }
  61. function addThemeUnique() {
  62. removeTheme();
  63. var themeService = new SuperMap.REST.ThemeService(url, {
  64. eventListeners: {
  65. "processCompleted": themeCompleted,
  66. "processFailed": themeFailed
  67. }
  68. });
  69. var style1, style2, style3, style4, style5, style6;
  70. style1 = new SuperMap.REST.ServerStyle({
  71. fillForeColor: new SuperMap.REST.ServerColor(248, 203, 249),
  72. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  73. lineWidth: 0.1
  74. });
  75. style2 = new SuperMap.REST.ServerStyle({
  76. fillForeColor: new SuperMap.REST.ServerColor(196, 255, 189),
  77. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  78. lineWidth: 0.1
  79. });
  80. style3 = new SuperMap.REST.ServerStyle({
  81. fillForeColor: new SuperMap.REST.ServerColor(255, 173, 173),
  82. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  83. lineWidth: 0.1
  84. });
  85. style4 = new SuperMap.REST.ServerStyle({
  86. fillForeColor: new SuperMap.REST.ServerColor(255, 239, 168),
  87. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  88. lineWidth: 0.1
  89. });
  90. style5 = new SuperMap.REST.ServerStyle({
  91. fillForeColor: new SuperMap.REST.ServerColor(173, 209, 255),
  92. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  93. lineWidth: 0.1
  94. });
  95. style6 = new SuperMap.REST.ServerStyle({
  96. fillForeColor: new SuperMap.REST.ServerColor(132, 164, 232),
  97. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  98. lineWidth: 0.1
  99. });
  100. var themeUniqueIteme1 = new SuperMap.REST.ThemeUniqueItem({
  101. unique: "黑龙江省",
  102. style: style1
  103. }),
  104. themeUniqueIteme2 = new SuperMap.REST.ThemeUniqueItem({
  105. unique: "湖北省",
  106. style: style2
  107. }),
  108. themeUniqueIteme3 = new SuperMap.REST.ThemeUniqueItem({
  109. unique: "吉林省",
  110. style: style3
  111. }),
  112. themeUniqueIteme4 = new SuperMap.REST.ThemeUniqueItem({
  113. unique: "内蒙古自治区",
  114. style: style4
  115. }),
  116. themeUniqueIteme5 = new SuperMap.REST.ThemeUniqueItem({
  117. unique: "青海省",
  118. style: style5
  119. }),
  120. themeUniqueIteme6 = new SuperMap.REST.ThemeUniqueItem({
  121. unique: "新疆维吾尔自治区",
  122. style: style6
  123. }),
  124. themeUniqueIteme7 = new SuperMap.REST.ThemeUniqueItem({
  125. unique: "云南省",
  126. style: style1
  127. }),
  128. themeUniqueIteme8 = new SuperMap.REST.ThemeUniqueItem({
  129. unique: "四川省",
  130. style: style4
  131. }),
  132. themeUniqueIteme9 = new SuperMap.REST.ThemeUniqueItem({
  133. unique: "贵州省",
  134. style: style3
  135. }),
  136. themeUniqueIteme10 = new SuperMap.REST.ThemeUniqueItem({
  137. unique: "甘肃省",
  138. style: style3
  139. }),
  140. themeUniqueIteme11 = new SuperMap.REST.ThemeUniqueItem({
  141. unique: "宁夏回族自治区",
  142. style: style5
  143. }),
  144. themeUniqueIteme12 = new SuperMap.REST.ThemeUniqueItem({
  145. unique: "重庆市",
  146. style: style6
  147. }),
  148. themeUniqueIteme13 = new SuperMap.REST.ThemeUniqueItem({
  149. unique: "山东省",
  150. style: style1
  151. }),
  152. themeUniqueIteme14 = new SuperMap.REST.ThemeUniqueItem({
  153. unique: "安徽省",
  154. style: style2
  155. }),
  156. themeUniqueIteme15 = new SuperMap.REST.ThemeUniqueItem({
  157. unique: "江西省",
  158. style: style3
  159. }),
  160. themeUniqueIteme16 = new SuperMap.REST.ThemeUniqueItem({
  161. unique: "浙江省",
  162. style: style4
  163. }),
  164. themeUniqueIteme17 = new SuperMap.REST.ThemeUniqueItem({
  165. unique: "台湾省",
  166. style: style2
  167. }),
  168. themeUniqueIteme18 = new SuperMap.REST.ThemeUniqueItem({
  169. unique: "江苏省",
  170. style: style6
  171. }),
  172. themeUniqueIteme19 = new SuperMap.REST.ThemeUniqueItem({
  173. unique: "湖南省",
  174. style: style5
  175. }),
  176. themeUniqueIteme20 = new SuperMap.REST.ThemeUniqueItem({
  177. unique: "河南省",
  178. style: style4
  179. }),
  180. themeUniqueIteme21 = new SuperMap.REST.ThemeUniqueItem({
  181. unique: "河北省",
  182. style: style3
  183. }),
  184. themeUniqueIteme22 = new SuperMap.REST.ThemeUniqueItem({
  185. unique: "福建省",
  186. style: style5
  187. }),
  188. themeUniqueIteme23 = new SuperMap.REST.ThemeUniqueItem({
  189. unique: "广西壮族自治区",
  190. style: style6
  191. }),
  192. themeUniqueIteme24 = new SuperMap.REST.ThemeUniqueItem({
  193. unique: "西藏自治区",
  194. style: style2
  195. }),
  196. themeUniqueIteme25 = new SuperMap.REST.ThemeUniqueItem({
  197. unique: "广东省",
  198. style: style4
  199. }),
  200. themeUniqueIteme26 = new SuperMap.REST.ThemeUniqueItem({
  201. unique: "山西省",
  202. style: style2
  203. }),
  204. themeUniqueIteme27 = new SuperMap.REST.ThemeUniqueItem({
  205. unique: "陕西省",
  206. style: style1
  207. }),
  208. themeUniqueIteme28 = new SuperMap.REST.ThemeUniqueItem({
  209. unique: "天津市",
  210. style: style5
  211. }),
  212. themeUniqueIteme29 = new SuperMap.REST.ThemeUniqueItem({
  213. unique: "北京市",
  214. style: style2
  215. }),
  216. themeUniqueIteme30 = new SuperMap.REST.ThemeUniqueItem({
  217. unique: "辽宁省",
  218. style: style1
  219. });
  220. var themeUniqueItemes = [themeUniqueIteme1, themeUniqueIteme2, themeUniqueIteme3, themeUniqueIteme4, themeUniqueIteme5, themeUniqueIteme6, themeUniqueIteme7, themeUniqueIteme8, themeUniqueIteme9, themeUniqueIteme10, themeUniqueIteme11, themeUniqueIteme12, themeUniqueIteme13, themeUniqueIteme14, themeUniqueIteme15, themeUniqueIteme16, themeUniqueIteme17, themeUniqueIteme18, themeUniqueIteme19, themeUniqueIteme20, themeUniqueIteme21, themeUniqueIteme22, themeUniqueIteme23, themeUniqueIteme24, themeUniqueIteme25, themeUniqueIteme26, themeUniqueIteme27, themeUniqueIteme28, themeUniqueIteme29, themeUniqueIteme30];
  221. var themeUnique = new SuperMap.REST.ThemeUnique({
  222. uniqueExpression: "Name",
  223. items: themeUniqueItemes,
  224. defaultStyle: style1
  225. });
  226. themeParameters = new SuperMap.REST.ThemeParameters({
  227. datasetNames: ["China_Province_pg"],
  228. dataSourceNames: ["China"],
  229. themes: [themeUnique],
  230. types: ['REGION']
  231. });
  232. themeService.processAsync(themeParameters);
  233. }
  234. function themeCompleted(themeEventArgs) {
  235. if (themeEventArgs.result.resourceInfo.id) {
  236. themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("中国行政区划_专题图", url, {
  237. cacheEnabled: false,
  238. transparent: true,
  239. layersID: themeEventArgs.result.resourceInfo.id
  240. }, {"maxResolution": "auto"});
  241. themeLayer.events.on({"layerInitialized": addThemeLayer});
  242. }
  243. }
  244. function addThemeLayer() {
  245. map.addLayer(themeLayer);
  246. }
  247. function themeFailed(serviceFailedEventArgs) {
  248. //doMapAlert("",serviceFailedEventArgs.error.errorMsg,true);
  249. widgets.alert.showAlert(serviceFailedEventArgs.error.errorMsg,false);
  250. }
  251. function removeTheme() {
  252. if (map.layers.length > 1) {
  253. map.removeLayer(themeLayer, true);
  254. }
  255. }
  256. </script>
  257. </body>
  258. </html>