echartsLinesEffect.html 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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_linesEffect"></title>
  9. <script type="text/javascript" include="jquery" 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" include="echarts" 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, url = host + "/iserver/services/map-world/rest/maps/世界地图_Gray";
  17. map = L.map('map', {
  18. crs: L.CRS.EPSG4326,
  19. center: [39.8, 116.5],
  20. maxZoom: 18,
  21. zoom: 9
  22. });
  23. L.supermap.tiledMapLayer(url).addTo(map);
  24. $.get('../data/lines-bus.json', function (data) {
  25. var hStep = 300 / (data.length - 1);
  26. var busLines = [].concat.apply([], data.map(function (busLine, idx) {
  27. var prevPt;
  28. var points = [];
  29. for (var i = 0; i < busLine.length; i += 2) {
  30. var pt = [busLine[i], busLine[i + 1]];
  31. if (i > 0) {
  32. pt = [
  33. prevPt[0] + pt[0],
  34. prevPt[1] + pt[1]
  35. ];
  36. }
  37. prevPt = pt;
  38. points.push([pt[0] / 1e4, pt[1] / 1e4]);
  39. }
  40. return {
  41. coords: points,
  42. lineStyle: {
  43. normal: {
  44. color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
  45. }
  46. }
  47. };
  48. }));
  49. option = {
  50. series: [
  51. {
  52. type: 'lines',
  53. coordinateSystem: 'leaflet',
  54. polyline: true,
  55. data: busLines,
  56. silent: true,
  57. lineStyle: {
  58. normal: {
  59. opacity: 0.2,
  60. width: 1
  61. }
  62. },
  63. progressiveThreshold: 500,
  64. progressive: 200,
  65. zlevel: 2
  66. },
  67. {
  68. type: 'lines',
  69. coordinateSystem: 'leaflet',
  70. polyline: true,
  71. data: busLines,
  72. lineStyle: {
  73. normal: {
  74. width: 0
  75. }
  76. },
  77. effect: {
  78. constantSpeed: 20,
  79. show: true,
  80. trailLength: 0.1,
  81. symbolSize: 1.5
  82. },
  83. zlevel: 1
  84. }]
  85. };
  86. L.supermap.echartsLayer(option).addTo(map);
  87. });
  88. </script>
  89. </body>
  90. </html>