lines-track.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <html>
  2. <head>
  3. <meta charset='utf-8'>
  4. <script src='esl.js'></script>
  5. <script src='config.js'></script>
  6. <script src='lib/jquery.min.js'></script>
  7. <script src='http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM'></script>
  8. <meta name='viewport' content='width=device-width, initial-scale=1' />
  9. </head>
  10. <body>
  11. <style>
  12. html, body, #main {
  13. width: 100%;
  14. height: 100%;
  15. margin: 0;
  16. }
  17. </style>
  18. <div id='main'></div>
  19. <script>
  20. require([
  21. 'echarts',
  22. 'echarts/chart/lines',
  23. 'echarts/component/legend',
  24. 'extension/bmap/bmap'
  25. ], function (echarts) {
  26. var myChart = echarts.init(document.getElementById('main'));
  27. $.get('data/hangzhou-tracks.json', function (data) {
  28. var lines = data.map(function (track) {
  29. return {
  30. coords: track.map(function (seg, idx) {
  31. return seg.coord;
  32. })
  33. };
  34. });
  35. // var lines = [].concat.apply([], data.map(function (track) {
  36. // return track.slice(1).map(function (seg, idx) {
  37. // return [track[idx], track[idx + 1]];
  38. // });
  39. // }));
  40. // lines = lines.concat(lines);
  41. myChart.setOption({
  42. animation: false,
  43. bmap: {
  44. center: [120.13066322374, 30.240018034923],
  45. zoom: 14,
  46. roam: true,
  47. mapStyle: {
  48. styleJson: [
  49. {
  50. 'featureType': 'water',
  51. 'elementType': 'all',
  52. 'stylers': {
  53. 'color': '#d1d1d1'
  54. }
  55. },
  56. {
  57. 'featureType': 'land',
  58. 'elementType': 'all',
  59. 'stylers': {
  60. 'color': '#f3f3f3'
  61. }
  62. },
  63. {
  64. 'featureType': 'railway',
  65. 'elementType': 'all',
  66. 'stylers': {
  67. 'visibility': 'off'
  68. }
  69. },
  70. {
  71. 'featureType': 'highway',
  72. 'elementType': 'all',
  73. 'stylers': {
  74. 'color': '#fdfdfd'
  75. }
  76. },
  77. {
  78. 'featureType': 'highway',
  79. 'elementType': 'labels',
  80. 'stylers': {
  81. 'visibility': 'off'
  82. }
  83. },
  84. {
  85. 'featureType': 'arterial',
  86. 'elementType': 'geometry',
  87. 'stylers': {
  88. 'color': '#fefefe'
  89. }
  90. },
  91. {
  92. 'featureType': 'arterial',
  93. 'elementType': 'geometry.fill',
  94. 'stylers': {
  95. 'color': '#fefefe'
  96. }
  97. },
  98. {
  99. 'featureType': 'poi',
  100. 'elementType': 'all',
  101. 'stylers': {
  102. 'visibility': 'off'
  103. }
  104. },
  105. {
  106. 'featureType': 'green',
  107. 'elementType': 'all',
  108. 'stylers': {
  109. 'visibility': 'off'
  110. }
  111. },
  112. {
  113. 'featureType': 'subway',
  114. 'elementType': 'all',
  115. 'stylers': {
  116. 'visibility': 'off'
  117. }
  118. },
  119. {
  120. 'featureType': 'manmade',
  121. 'elementType': 'all',
  122. 'stylers': {
  123. 'color': '#d1d1d1'
  124. }
  125. },
  126. {
  127. 'featureType': 'local',
  128. 'elementType': 'all',
  129. 'stylers': {
  130. 'color': '#d1d1d1'
  131. }
  132. },
  133. {
  134. 'featureType': 'arterial',
  135. 'elementType': 'labels',
  136. 'stylers': {
  137. 'visibility': 'off'
  138. }
  139. },
  140. {
  141. 'featureType': 'boundary',
  142. 'elementType': 'all',
  143. 'stylers': {
  144. 'color': '#fefefe'
  145. }
  146. },
  147. {
  148. 'featureType': 'building',
  149. 'elementType': 'all',
  150. 'stylers': {
  151. 'color': '#d1d1d1'
  152. }
  153. },
  154. {
  155. 'featureType': 'label',
  156. 'elementType': 'geometry.fill',
  157. 'stylers': {
  158. 'color': '#848484'
  159. }
  160. },
  161. {
  162. 'featureType': 'label',
  163. 'elementType': 'geometry',
  164. 'stylers': {
  165. 'visibility': 'off'
  166. }
  167. }
  168. ]
  169. }
  170. },
  171. series: [{
  172. type: 'lines',
  173. coordinateSystem: 'bmap',
  174. data: lines,
  175. polyline: true,
  176. lineStyle: {
  177. normal: {
  178. color: 'purple',
  179. opacity: 0.4,
  180. width: 1
  181. }
  182. }
  183. }]
  184. });
  185. });
  186. });
  187. </script>
  188. </body>
  189. </html>