echarts_ChangchunPublicTransportNetwork.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <html>
  5. <head>
  6. <meta charset='utf-8'/>
  7. <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
  8. <title data-i18n="resources.title_ChangchunPublicTransportNetwork"></title>
  9. <style>
  10. body {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. #map {
  15. position: absolute;
  16. top: 0;
  17. bottom: 0;
  18. width: 100%;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div id='map'></div>
  24. <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
  25. <script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  26. <script type="text/javascript">
  27. var data;
  28. var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  29. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  30. " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
  31. " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts</a>";
  32. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  33. var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
  34. var map = new mapboxgl.Map({
  35. container: 'map',
  36. style: {
  37. "version": 8,
  38. "sources": {
  39. "raster-tiles": {
  40. "attribution": attribution,
  41. "type": "raster",
  42. "tiles": [tileURL],
  43. "tileSize": 256,
  44. },
  45. },
  46. "layers": [{
  47. "id": "simple-tiles",
  48. "type": "raster",
  49. "source": "raster-tiles",
  50. "minzoom": 0,
  51. "maxzoom": 22
  52. }]
  53. },
  54. center: [125.35, 43.86],
  55. zoom: 10
  56. });
  57. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  58. var uploadedDataURL = "../data/changchunBus.json";
  59. $.get(uploadedDataURL, function (data) {
  60. option = {
  61. animation: false,
  62. GLMap: {
  63. roam: true
  64. },
  65. coordinateSystem: 'GLMap',
  66. geo: {
  67. map: 'GLMap',
  68. },
  69. series: [{
  70. type: 'lines',
  71. polyline: true,
  72. data: data,
  73. silent: true,
  74. lineStyle: {
  75. normal: {
  76. opacity: 0.2,
  77. width: 1
  78. }
  79. },
  80. progressiveThreshold: 500,
  81. progressive: 100,
  82. }, {
  83. type: 'lines',
  84. coordinateSystem: 'GLMap',
  85. polyline: true,
  86. data: data,
  87. lineStyle: {
  88. normal: {
  89. width: 0.2
  90. }
  91. },
  92. effect: {
  93. constantSpeed: 40,
  94. show: true,
  95. trailLength: 0.02,
  96. symbolSize: 2
  97. },
  98. }]
  99. };
  100. var echartslayer = new EchartsLayer(map);
  101. echartslayer.chart.setOption(option);
  102. });
  103. </script>
  104. </body>
  105. </html>