components_echarts_vue.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  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_componentsEcharts_Vue"></title>
  9. <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
  10. <script
  11. include="iclient-mapboxgl-vue,mapbox-gl-enhance,echarts"
  12. src="../../dist/mapboxgl/include-mapboxgl.js"
  13. ></script>
  14. <style>
  15. #main {
  16. margin: 0 auto;
  17. width: 100%;
  18. height: 100%;
  19. }
  20. </style>
  21. </head>
  22. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  23. <div id="main">
  24. <sm-web-map :map-options="mapOptions">
  25. <sm-echarts-layer :options="echartsOptions"></sm-echarts-layer>
  26. </sm-web-map>
  27. </div>
  28. <script>
  29. $.get('../data/changchunBus.json', function(data) {
  30. var echartsOptions = {
  31. animation: false,
  32. GLMap: {
  33. roam: true
  34. },
  35. coordinateSystem: 'GLMap',
  36. geo: {
  37. map: 'GLMap'
  38. },
  39. series: [
  40. {
  41. type: 'lines',
  42. polyline: true,
  43. data: data,
  44. silent: true,
  45. lineStyle: {
  46. normal: {
  47. opacity: 0.2,
  48. width: 1
  49. }
  50. },
  51. progressiveThreshold: 500,
  52. progressive: 100
  53. },
  54. {
  55. type: 'lines',
  56. coordinateSystem: 'GLMap',
  57. polyline: true,
  58. data: data,
  59. lineStyle: {
  60. normal: {
  61. width: 0.2
  62. }
  63. },
  64. effect: {
  65. constantSpeed: 40,
  66. show: true,
  67. trailLength: 0.02,
  68. symbolSize: 2
  69. }
  70. }
  71. ]
  72. };
  73. new Vue({
  74. el: '#main',
  75. data() {
  76. var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
  77. var attribution =
  78. "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  79. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  80. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  81. return {
  82. echartsOptions: echartsOptions,
  83. mapOptions: {
  84. container: 'map', // container id
  85. style: {
  86. version: 8,
  87. sources: {
  88. 'raster-tiles': {
  89. attribution: attribution,
  90. type: 'raster',
  91. tiles: [
  92. host +
  93. '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'
  94. ],
  95. tileSize: 256
  96. }
  97. },
  98. layers: [
  99. {
  100. id: 'simple-tiles',
  101. type: 'raster',
  102. source: 'raster-tiles',
  103. minzoom: 0,
  104. maxzoom: 22
  105. }
  106. ]
  107. },
  108. center: [125.35, 43.86],
  109. zoom: 10
  110. }
  111. };
  112. }
  113. });
  114. });
  115. </script>
  116. </body>
  117. </html>