03_themeLabel.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  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_themeLabel"></title>
  9. <script type="text/javascript" src="../js/include-web.js"></script>
  10. </head>
  11. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  12. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  13. <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
  14. <script type="text/javascript">
  15. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  16. var map, themeService, themeLabel, themeParameters, themeLayer,
  17. url = host + "/iserver/services/map-world/rest/maps/World";
  18. map = L.map('map', {
  19. crs: L.CRS.EPSG4326,
  20. center: [0, 0],
  21. maxZoom: 18,
  22. zoom: 1
  23. });
  24. L.supermap.tiledMapLayer(url, {noWrap: true, transparent: true}).addTo(map);
  25. createTheme();
  26. function createTheme() {
  27. themeService = L.supermap.themeService(url);
  28. var style1 = new SuperMap.ServerTextStyle({
  29. fontHeight: 4,
  30. foreColor: new SuperMap.ServerColor(100, 20, 50),
  31. sizeFixed: true,
  32. bold: true
  33. });
  34. var style2 = new SuperMap.ServerTextStyle({
  35. fontHeight: 4,
  36. foreColor: new SuperMap.ServerColor(250, 0, 0),
  37. sizeFixed: true,
  38. bold: true
  39. });
  40. var style3 = new SuperMap.ServerTextStyle({
  41. fontHeight: 4,
  42. foreColor: new SuperMap.ServerColor(93, 95, 255),
  43. sizeFixed: true,
  44. bold: true
  45. });
  46. var themeLabelItem1 = new SuperMap.ThemeLabelItem({
  47. start: 0.0,
  48. end: 7800000,
  49. style: style1
  50. });
  51. var themeLabelItem2 = new SuperMap.ThemeLabelItem({
  52. start: 7800000,
  53. end: 15000000,
  54. style: style2
  55. });
  56. var themeLabelItem3 = new SuperMap.ThemeLabelItem({
  57. start: 15000000,
  58. end: 30000000,
  59. style: style3
  60. });
  61. var themeLabelItem4 = new SuperMap.ThemeLabelItem({
  62. start: 0.0,
  63. end: 55,
  64. style: style1
  65. });
  66. var themeLabelItem5 = new SuperMap.ThemeLabelItem({
  67. start: 55,
  68. end: 109,
  69. style: style2
  70. });
  71. var themeLabelItem6 = new SuperMap.ThemeLabelItem({
  72. start: 109,
  73. end: 300,
  74. style: style3
  75. });
  76. themeLabel = new SuperMap.ThemeLabel({
  77. matrixCells: [
  78. [new SuperMap.LabelThemeCell({
  79. themeLabel: new SuperMap.ThemeLabel({
  80. labelExpression: "CAP_POP",
  81. rangeExpression: "CAP_POP",
  82. numericPrecision: 0,
  83. items: [themeLabelItem1, themeLabelItem2, themeLabelItem3]
  84. })
  85. })],
  86. [new SuperMap.LabelThemeCell({
  87. themeLabel: new SuperMap.ThemeLabel({
  88. labelExpression: "CAPITAL",
  89. rangeExpression: "SmID",
  90. numericPrecision: 0,
  91. items: [themeLabelItem4, themeLabelItem5, themeLabelItem6]
  92. })
  93. })]
  94. ],
  95. background: new SuperMap.ThemeLabelBackground({
  96. backStyle: new SuperMap.ServerStyle({
  97. fillForeColor: new SuperMap.ServerColor(179, 209, 193),
  98. fillOpaqueRate: 60,
  99. lineWidth: 0.1
  100. }),
  101. labelBackShape: "RECT"
  102. })
  103. });
  104. themeParameters = new SuperMap.ThemeParameters({
  105. themes: [themeLabel],
  106. datasetNames: ["Capitals"],
  107. dataSourceNames: ["World"]
  108. });
  109. themeService.getThemeInfo(themeParameters, function (serviceResult) {
  110. var result = serviceResult.result;
  111. if (result && result.newResourceID) {
  112. themeLayer = L.supermap.tiledMapLayer(url, {
  113. noWrap: true,
  114. cacheEnabled: false,
  115. transparent: true,
  116. layersID: result.newResourceID
  117. }).addTo(map);
  118. }
  119. });
  120. }
  121. </script>
  122. </body>
  123. </html>