echarts_scatterDrawMillionsNewYorkTaxiPoints.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <html>
  5. <head>
  6. <meta charset='utf-8'/>
  7. <title data-i18n="resources.title_echartsLinesMillions_nyTaxi"></title>
  8. <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
  9. <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
  10. <script type="text/javascript" include="echarts" src="../../dist/leaflet/include-leaflet.js"></script>
  11. <style>
  12. body {
  13. margin: 0;
  14. padding: 0;
  15. }
  16. #map {
  17. position: absolute;
  18. top: 0;
  19. bottom: 0;
  20. width: 100%;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div id='map'></div>
  26. <script type="text/javascript">
  27. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  28. var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
  29. var map = L.map('map', {
  30. center: [40.765654, -73.931577],
  31. maxZoom: 18,
  32. zoom: 12
  33. });
  34. L.supermap.tiledMapLayer(tileURL).addTo(map);
  35. var option = {
  36. title: {
  37. top: '10px',
  38. text: resources.text_echartsLinesMillions_nyTaxi,
  39. subtext: resources.text_echartsLinesMillions_nyTaxi_subtext,
  40. left: 'center',
  41. textStyle: {
  42. color: '#fff'
  43. },
  44. subtextStyle: {
  45. color: '#fff'
  46. }
  47. },
  48. series: [{
  49. type: 'scatter',
  50. progressive: 1e5,
  51. coordinateSystem: 'leaflet',
  52. symbolSize: 0.5,
  53. blendMode: 'lighter',
  54. large: true,
  55. itemStyle: {
  56. color: '#FF3300'
  57. },
  58. postEffect: {
  59. enable: true
  60. },
  61. silent: true,
  62. dimensions: ['lng', 'lat'],
  63. data: new Float32Array()
  64. }]
  65. };
  66. var echartsLayer = L.supermap.echartsLayer(option).addTo(map);
  67. var CHUNK_COUNT = 19;
  68. function fetchData(idx) {
  69. if (idx >= CHUNK_COUNT) {
  70. return;
  71. }
  72. var dataURL = "https://iclient.supermap.io/web/data/bigdata_nytaxi/data_" + idx + ".bin";
  73. var xhr = new XMLHttpRequest();
  74. xhr.open('GET', dataURL, true);
  75. xhr.responseType = 'arraybuffer';
  76. xhr.onload = function (e) {
  77. var rawData = new Float32Array(this.response);
  78. echartsLayer._ec
  79. .appendData({
  80. seriesIndex: 0,
  81. data: rawData
  82. });
  83. fetchData(idx + 1);
  84. };
  85. xhr.send();
  86. }
  87. fetchData(0);
  88. </script>
  89. </body>
  90. </html>