theme_themeLabel.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  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_themeLabel"></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_themeLabel"></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="addThemeLabel()"/>
  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, local, baseLayer, layersID, themeLayer,
  38. host = window.isLocal ? window.server : "https://iserver.supermap.io",
  39. url = host + "/iserver/services/map-world/rest/maps/World";
  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("World", 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(0, 0), 0);
  59. map.allOverlays = true;
  60. }
  61. function addThemeLabel() {
  62. removeTheme();
  63. var themeService = new SuperMap.REST.ThemeService(url, {
  64. eventListeners: {
  65. "processCompleted": themeCompleted,
  66. "processFailed": themeFailed
  67. }
  68. }),
  69. style1 = new SuperMap.REST.ServerTextStyle({
  70. fontHeight: 4,
  71. foreColor: new SuperMap.REST.ServerColor(100, 20, 50),
  72. sizeFixed: true,
  73. bold: true
  74. }),
  75. style2 = new SuperMap.REST.ServerTextStyle({
  76. fontHeight: 4,
  77. foreColor: new SuperMap.REST.ServerColor(250, 0, 0),
  78. sizeFixed: true,
  79. bold: true
  80. }),
  81. style3 = new SuperMap.REST.ServerTextStyle({
  82. fontHeight: 4,
  83. foreColor: new SuperMap.REST.ServerColor(93, 95, 255),
  84. sizeFixed: true,
  85. bold: true
  86. }),
  87. themeLabelIteme1 = new SuperMap.REST.ThemeLabelItem({
  88. start: 0.0,
  89. end: 7800000,
  90. style: style1
  91. }),
  92. themeLabelIteme2 = new SuperMap.REST.ThemeLabelItem({
  93. start: 7800000,
  94. end: 15000000,
  95. style: style2
  96. }),
  97. themeLabelIteme3 = new SuperMap.REST.ThemeLabelItem({
  98. start: 15000000,
  99. end: 30000000,
  100. style: style3
  101. }),
  102. themeLabelIteme4 = new SuperMap.REST.ThemeLabelItem({
  103. start: 0.0,
  104. end: 55,
  105. style: style1
  106. }),
  107. themeLabelIteme5 = new SuperMap.REST.ThemeLabelItem({
  108. start: 55,
  109. end: 109,
  110. style: style2
  111. }),
  112. themeLabelIteme6 = new SuperMap.REST.ThemeLabelItem({
  113. start: 109,
  114. end: 300,
  115. style: style3
  116. }),
  117. themeLabelOne = new SuperMap.REST.ThemeLabel({
  118. labelExpression: "CAPITAL",
  119. rangeExpression: "SmID",
  120. numericPrecision: 0,
  121. items: [themeLabelIteme4, themeLabelIteme5, themeLabelIteme6]
  122. }),
  123. themeLabelTwo = new SuperMap.REST.ThemeLabel({
  124. labelExpression: "CAP_POP",
  125. rangeExpression: "CAP_POP",
  126. numericPrecision: 0,
  127. items: [themeLabelIteme1, themeLabelIteme2, themeLabelIteme3]
  128. }),
  129. //创建矩阵标签元素
  130. LabelThemeCellOne = new SuperMap.REST.LabelThemeCell({
  131. themeLabel: themeLabelOne
  132. }),
  133. LabelThemeCellTwo = new SuperMap.REST.LabelThemeCell({
  134. themeLabel: themeLabelTwo
  135. }),
  136. backStyle = new SuperMap.REST.ServerStyle({
  137. fillForeColor: new SuperMap.REST.ServerColor(255, 255, 0),
  138. fillOpaqueRate: 60,
  139. lineWidth: 0.1
  140. }),
  141. //创建矩阵标签专题图
  142. themeLabel = new SuperMap.REST.ThemeLabel({
  143. matrixCells: [[LabelThemeCellOne], [LabelThemeCellTwo]],
  144. background: new SuperMap.REST.ThemeLabelBackground({
  145. backStyle: backStyle,
  146. labelBackShape: "RECT"
  147. })
  148. }),
  149. themeParameters = new SuperMap.REST.ThemeParameters({
  150. themes: [themeLabel],
  151. datasetNames: ["Capitals"],
  152. dataSourceNames: ["World"],
  153. types: ['POINT']
  154. });
  155. themeService.processAsync(themeParameters);
  156. }
  157. function themeCompleted(themeEventArgs) {
  158. if (themeEventArgs.result.resourceInfo.id) {
  159. themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("各国首都矩阵标签专题图", url, {
  160. cacheEnabled: false,
  161. transparent: true,
  162. layersID: themeEventArgs.result.resourceInfo.id
  163. }, {"maxResolution": "auto"});
  164. themeLayer.events.on({"layerInitialized": addThemelayer});
  165. }
  166. }
  167. function addThemelayer() {
  168. map.addLayer(themeLayer);
  169. }
  170. function themeFailed(serviceFailedEventArgs) {
  171. //doMapAlert("",serviceFailedEventArgs.error.errorMsg,true);
  172. widgets.alert.showAlert(serviceFailedEventArgs.error.errorMsg,false);
  173. }
  174. function removeTheme() {
  175. if (map.layers.length > 1) {
  176. map.removeLayer(themeLayer, true);
  177. }
  178. }
  179. </script>
  180. </body>
  181. </html>