echarts_scatterWeibo_4326.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <html>
  5. <head>
  6. <meta charset='utf-8' />
  7. <title data-i18n="resources.title_scatterWeiboWGS84"></title>
  8. <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  9. <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
  10. <style>
  11. body {
  12. margin: 0;
  13. padding: 0;
  14. }
  15. #map {
  16. position: absolute;
  17. top: 0;
  18. bottom: 0;
  19. width: 100%;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id='map'></div>
  25. <script type="text/javascript" include='mapbox-gl-enhance,echarts' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  26. <script type="text/javascript">
  27. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  28. var map = new mapboxgl.Map({
  29. container: 'map',
  30. style: {
  31. "version": 8,
  32. "sources": {
  33. "raster-tiles": {
  34. "type": "raster",
  35. "tiles": [host + '/iserver/services/map-world/rest/maps/World'],
  36. "rasterSource":"iserver",
  37. "tileSize": 256,
  38. },
  39. },
  40. "layers": [{
  41. "id": "simple-tiles",
  42. "type": "raster",
  43. "source": "raster-tiles",
  44. "minzoom": 0,
  45. "maxzoom": 22
  46. }]
  47. },
  48. crs: mapboxgl.CRS.EPSG4326,
  49. center: [112, 37.94],
  50. zoom: 3
  51. });
  52. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  53. $.get('../data/weibo.json', function (weiboData) {
  54. weiboData = weiboData.map(function (serieData, idx) {
  55. var px = serieData[0] / 1000;
  56. var py = serieData[1] / 1000;
  57. var res = [
  58. [px, py]
  59. ];
  60. for (var i = 2; i < serieData.length; i += 2) {
  61. var dx = serieData[i] / 1000;
  62. var dy = serieData[i + 1] / 1000;
  63. var x = px + dx;
  64. var y = py + dy;
  65. res.push([x.toFixed(2), y.toFixed(2), 1]);
  66. px = x;
  67. py = y;
  68. }
  69. return res;
  70. });
  71. var echartslayer = new EchartsLayer(map);
  72. echartslayer.chart.setOption(option = {
  73. GLMap: {
  74. roam: true
  75. },
  76. coordinateSystem: 'GLMap',
  77. tooltip: {},
  78. legend: {
  79. left: 'left',
  80. top: 'bottom',
  81. data: ['强', '中', '弱'],
  82. textStyle: {
  83. color: '#ccc'
  84. }
  85. },
  86. geo: {
  87. name: '强',
  88. type: 'scatter',
  89. map: 'GLMap',
  90. label: {
  91. emphasis: {
  92. show: false
  93. }
  94. },
  95. itemStyle: {
  96. normal: {
  97. areaColor: '#323c48',
  98. borderColor: '#111'
  99. },
  100. emphasis: {
  101. areaColor: '#2a333d'
  102. }
  103. }
  104. },
  105. series: [{
  106. name: '弱',
  107. type: 'scatter',
  108. coordinateSystem: 'GLMap',
  109. symbolSize: 1,
  110. large: true,
  111. itemStyle: {
  112. normal: {
  113. shadowBlur: 2,
  114. shadowColor: 'rgba(37, 140, 249, 0.8)',
  115. color: 'rgba(37, 140, 249, 0.8)'
  116. }
  117. },
  118. data: weiboData[0]
  119. }, {
  120. name: '中',
  121. type: 'scatter',
  122. coordinateSystem: 'GLMap',
  123. symbolSize: 1,
  124. large: true,
  125. itemStyle: {
  126. normal: {
  127. shadowBlur: 2,
  128. shadowColor: 'rgba(14, 241, 242, 0.8)',
  129. color: 'rgba(14, 241, 242, 0.8)'
  130. }
  131. },
  132. data: weiboData[1]
  133. }, {
  134. name: '强',
  135. type: 'scatter',
  136. coordinateSystem: 'GLMap',
  137. symbolSize: 1,
  138. large: true,
  139. itemStyle: {
  140. normal: {
  141. shadowBlur: 2,
  142. shadowColor: 'rgba(255, 255, 255, 0.8)',
  143. color: 'rgba(255, 255, 255, 0.8)'
  144. }
  145. },
  146. data: weiboData[2]
  147. }]
  148. });
  149. });
  150. </script>
  151. </body>
  152. </html>