echartsLinesBus.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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_linesBus"></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 busLines = [].concat.apply([], data.map(function (busLine, idx) {
  26. var prevPt;
  27. var points = [];
  28. for (var i = 0; i < busLine.length; i += 2) {
  29. var pt = [busLine[i], busLine[i + 1]];
  30. if (i > 0) {
  31. pt = [
  32. prevPt[0] + pt[0],
  33. prevPt[1] + pt[1]
  34. ];
  35. }
  36. prevPt = pt;
  37. points.push([pt[0] / 1e4, pt[1] / 1e4]);
  38. }
  39. return {
  40. coords: points
  41. };
  42. }));
  43. option = {
  44. series: [{
  45. type: 'lines',
  46. coordinateSystem: 'leaflet',
  47. polyline: true,
  48. data: busLines,
  49. silent: true,
  50. lineStyle: {
  51. normal: {
  52. color: 'rgb(200, 35, 45)',
  53. opacity: 0.2,
  54. width: 1
  55. }
  56. },
  57. progressiveThreshold: 500,
  58. progressive: 200
  59. }]
  60. };
  61. L.supermap.echartsLayer(option).addTo(map);
  62. });
  63. </script>
  64. </body>
  65. </html>