components_graph_theme_layer_react.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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_componentsGraphThemeLayer_React"></title>
  9. <script type="text/javascript" include="react" src="../js/include-web.js"></script>
  10. <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  11. <script type="text/javascript" src="../data/chinaConsumptionLevel.js"></script>
  12. <style>
  13. html,
  14. body {
  15. height: 100%;
  16. margin: 0;
  17. padding: 0;
  18. }
  19. #main,
  20. #map-container {
  21. height: 100%;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div id="main">
  27. <div id="map-container"></div>
  28. <div class="info-container">
  29. <div id="infoBox" class="panel panel-primary infoPane" style="display: none;">
  30. <div class="panel-heading">
  31. <h5 class="panel-title text-center" data-i18n="resources.text_attributeTable"></h5>
  32. </div>
  33. <div id="infoContent" class="panel-body content"></div>
  34. </div>
  35. </div>
  36. </div>
  37. <script type="text/babel">
  38. var SmWebMap = SuperMap.Components.SmWebMap;
  39. var SmGraphThemeLayer = SuperMap.Components.SmGraphThemeLayer;
  40. var features, chartsSettingForPie, themeOptions, popup;
  41. var feas = [];
  42. for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
  43. // 省居民消费水平(单位:元)信息
  44. var provinceInfo = chinaConsumptionLevel[i];
  45. var fea = {
  46. type: 'feature',
  47. geometry: {
  48. type: 'Point',
  49. coordinates: [provinceInfo[1], provinceInfo[2]]
  50. },
  51. properties: {
  52. NAME: provinceInfo[0],
  53. CON2009: provinceInfo[3],
  54. CON2010: provinceInfo[4],
  55. CON2011: provinceInfo[5],
  56. CON2012: provinceInfo[6],
  57. CON2013: provinceInfo[7]
  58. }
  59. };
  60. feas.push(fea);
  61. }
  62. features = {
  63. type: 'FeatureCollection',
  64. features: feas
  65. };
  66. chartsSettingForPie = {
  67. width: 240,
  68. height: 100,
  69. codomain: [0, 40000], // 允许图表展示的值域范围,此范围外的数据将不制作图表
  70. sectorStyle: { fillOpacity: 0.8 }, // 柱状图中柱条的(表示字段值的图形)样式
  71. sectorStyleByFields: [
  72. { fillColor: '#FFB980' },
  73. { fillColor: '#5AB1EF' },
  74. { fillColor: '#B6A2DE' },
  75. { fillColor: '#2EC7C9' },
  76. { fillColor: '#D87A80' }
  77. ],
  78. sectorHoverStyle: { fillOpacity: 1 },
  79. xShapeBlank: [10, 10, 10], // 水平方向上的空白间距参数
  80. axisYLabels: ['4万', '3万', '2万', '1万', '0'], // y 轴标签内容
  81. axisXLabels: ['09年', '10年', '11年', '12年', '13年'], // x 轴标签内容
  82. backgroundStyle: { fillColor: '#CCE8CF' }, // 背景样式
  83. backgroundRadius: [5, 5, 5, 5] // 背景框圆角参数
  84. };
  85. // 设置 graphThemeLayer option 参数
  86. themeOptions = {
  87. attributions: ' ',
  88. themeFields: ['CON2009', 'CON2010', 'CON2011', 'CON2012', 'CON2013'],
  89. opacity: 0.9,
  90. chartsSetting: chartsSettingForPie
  91. };
  92. function handleLayerMousemove(params) {
  93. var e = params.mapboxEvent;
  94. var map = params.map;
  95. var themeLayer = map.getLayer(params.layerId);
  96. if (popup) {
  97. popup.remove();
  98. }
  99. if (e.target && e.target.refDataID && e.target.dataInfo) {
  100. // 获取图形对应的数据 (feature)
  101. var fea = themeLayer.getFeatureById(e.target.refDataID);
  102. var info = e.target.dataInfo;
  103. // 弹窗内容
  104. var contentHTML = "<div style='color: #000; background-color: #fff'>";
  105. contentHTML += resources.text_Name + '<br><strong>' + fea.attributes.NAME + '</strong>';
  106. contentHTML += "<hr style='margin: 3px'>";
  107. switch (info.field) {
  108. case 'CON2009':
  109. contentHTML +=
  110. resources.text_consumptionLevel1 +
  111. '09' +
  112. resources.text_consumptionLevel2 +
  113. '<br/><strong>' +
  114. info.value +
  115. '</strong>(' +
  116. resources.text_yuan +
  117. ')';
  118. break;
  119. case 'CON2010':
  120. contentHTML +=
  121. resources.text_consumptionLevel1 +
  122. '10' +
  123. resources.text_consumptionLevel2 +
  124. '<br/><strong>' +
  125. info.value +
  126. '</strong>(' +
  127. resources.text_yuan +
  128. ')';
  129. break;
  130. case 'CON2011':
  131. contentHTML +=
  132. resources.text_consumptionLevel1 +
  133. '11' +
  134. resources.text_consumptionLevel2 +
  135. '<br/><strong>' +
  136. info.value +
  137. '</strong>(' +
  138. resources.text_yuan +
  139. ')';
  140. break;
  141. case 'CON2012':
  142. contentHTML +=
  143. resources.text_consumptionLevel1 +
  144. '12' +
  145. resources.text_consumptionLevel2 +
  146. ' <br/><strong>' +
  147. info.value +
  148. '</strong>(' +
  149. resources.text_yuan +
  150. ')';
  151. break;
  152. case 'CON2013':
  153. contentHTML +=
  154. resources.text_consumptionLevel1 +
  155. '13' +
  156. resources.text_consumptionLevel2 +
  157. ' <br/><strong>' +
  158. info.value +
  159. '</strong>(' +
  160. resources.text_yuan +
  161. ')';
  162. break;
  163. default:
  164. contentHTML += 'No Data';
  165. }
  166. contentHTML += '</div>';
  167. var tempPoint = map.unproject({ x: e.event.x, y: e.event.y });
  168. popup = new mapboxgl.Popup({ closeOnClick: false })
  169. .setLngLat([tempPoint.lng, tempPoint.lat])
  170. .setHTML(contentHTML)
  171. .addTo(map);
  172. return;
  173. }
  174. if (popup) {
  175. popup.remove();
  176. }
  177. }
  178. ReactDOM.render(
  179. <SmWebMap serverUrl="https://iportal.supermap.io/iportal" mapId="1329428269">
  180. <SmGraphThemeLayer chartsType="Pie" options={themeOptions} data={features} onMousemove={handleLayerMousemove} />
  181. </SmWebMap>,
  182. document.getElementById('map-container')
  183. );
  184. </script>
  185. </body>
  186. </html>