echartsLinesAirline.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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_linesAirline"></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 tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
  17. map = L.map('map', {
  18. crs: L.CRS.EPSG4326,
  19. center: [0, 0],
  20. maxZoom: 18,
  21. zoom: 2
  22. });
  23. L.supermap.tiledMapLayer(tileURL, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
  24. $.get('../data/flights.json', function (data) {
  25. function getAirportCoord(idx) {
  26. return [data.airports[idx][3], data.airports[idx][4]];
  27. }
  28. var routes = data.routes.map(function (airline) {
  29. return [
  30. getAirportCoord(airline[1]),
  31. getAirportCoord(airline[2])
  32. ];
  33. });
  34. option = {
  35. title: {
  36. text: 'World Flights',
  37. left: 'center',
  38. textStyle: {
  39. color: '#eee'
  40. }
  41. },
  42. tooltip: {
  43. formatter: function (param) {
  44. var route = data.routes[param.dataIndex];
  45. return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
  46. }
  47. },
  48. series: [{
  49. type: 'lines',
  50. coordinateSystem: 'leaflet',
  51. data: routes,
  52. large: true,
  53. largeThreshold: 100,
  54. lineStyle: {
  55. normal: {
  56. opacity: 0.05,
  57. width: 0.5,
  58. curveness: 0.3
  59. }
  60. },
  61. // 设置混合模式为叠加
  62. blendMode: 'lighter'
  63. }]
  64. };
  65. L.supermap.echartsLayer(option).addTo(map);
  66. });
  67. </script>
  68. </body>
  69. </html>