components_time_line_vue.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  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_componentsTimeLine_Vue"></title>
  9. <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
  10. <script
  11. include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
  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. .sm-component-time-line {
  21. position: absolute;
  22. bottom: 20px;
  23. width: 100%;
  24. z-index: 1000;
  25. }
  26. .sm-component-text {
  27. position: absolute;
  28. top: 20px;
  29. display: flex;
  30. width: 100%;
  31. height:40px;
  32. margin: 0 auto;
  33. background: transparent !important;
  34. z-index: 1000;
  35. }
  36. .sm-component-text span {
  37. margin: 0 auto;
  38. }
  39. .chart-wrapper {
  40. position: absolute;
  41. bottom: 100px;
  42. left: 50px;
  43. width:600px;
  44. z-index: 1000;
  45. }
  46. .chart-wrapper .sm-component-text {
  47. position: static;
  48. height: 30px;
  49. }
  50. .sm-component-chart {
  51. width:600px;
  52. height: 300px;
  53. }
  54. .sm-component-chart .sm-component-collapse-card__content {
  55. width:600px;
  56. height: 300px;
  57. }
  58. </style>
  59. </head>
  60. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  61. <div id="main">
  62. <sm-text title="2005到2016地震发生情况" :font-style='{ fontSize: "27px", fontWeight: 700, textAlign: "center"}' text-color="#e9e9e9"></sm-text>
  63. <sm-web-map :map-options="mapOptions">
  64. <sm-heatmap-layer :data="mapData" :layer-style="heatMapStyle" ></sm-heatmap-layer>
  65. </sm-web-map>
  66. <div class="chart-wrapper">
  67. <sm-text :title="chartTitle" :font-style='{ fontSize: "16px", textAlign: "center"}' text-color="#e9e9e9"></sm-text>
  68. <sm-chart icon-class="" v-bind="options" :dataset="dataset" background="rgba(255, 255, 255, 0)"></sm-chart>
  69. </div>
  70. <sm-time-line :data="data" :play-interval="2000" :control-style="controlStyle" :checkpoint-style="controlStyle" :label="controlStyle" @timelinechanged="timelineChanged" background="rgba(255, 255, 255, 0)"></sm-time-line>
  71. </div>
  72. <script>
  73. var heatMapStyle = new SuperMap.Components.commontypes.HeatMapStyle({
  74. "heatmap-weight": [
  75. "interpolate",
  76. ["linear"],
  77. ["get", "value"],
  78. 6, 2,
  79. 9, 18
  80. ],
  81. "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
  82. "heatmap-color": [
  83. "interpolate",
  84. ["linear"],
  85. ["heatmap-density"],
  86. 0,
  87. "rgba(33,102,172,0)",
  88. 0.2,
  89. "#333eb5",
  90. 0.5,
  91. "green",
  92. 0.9,
  93. "yellow",
  94. 1,
  95. "red",
  96. ],
  97. "heatmap-radius": 16,
  98. });
  99. new Vue({
  100. el: '#main',
  101. data() {
  102. var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
  103. var attribution =
  104. "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  105. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  106. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  107. return {
  108. chartTitle: '2005年1-12月地震次数',
  109. options: {
  110. seriesType: 'bar',
  111. datasetOptions: [
  112. {
  113. seriesType: 'bar',
  114. xField: 'date',
  115. yField: 'value',
  116. sort: 'unsort'
  117. }
  118. ],
  119. options: {
  120. yAxis: {
  121. name: '',
  122. axisLine: {
  123. color: '#90979c',
  124. lineStyle: { color: '#90979c' }
  125. },
  126. axisLabel: {
  127. color: '#90979c',
  128. rotate: 0,
  129. fontFamily: 'MicrosoftYaHei'
  130. },
  131. show: true,
  132. splitLine: {
  133. lineStyle: {
  134. width: 0.3,
  135. type: 'solid'
  136. },
  137. show: false
  138. },
  139. splitArea: {
  140. show: false
  141. },
  142. nameGap: 5,
  143. nameLocation: 'end',
  144. type: 'value',
  145. nameTextStyle: {
  146. padding: [0, 0, 5, 0]
  147. }
  148. },
  149. xAxis: {
  150. data: [],
  151. axisLine: {
  152. color: '#90979c',
  153. lineStyle: { color: '#90979c' }
  154. },
  155. axisLabel: {
  156. rotate: 0,
  157. color: '#90979c',
  158. fontFamily: 'MicrosoftYaHei'
  159. },
  160. show: true,
  161. name: '',
  162. axisTick: {
  163. alignWithLabel: true
  164. },
  165. splitLine: {
  166. lineStyle: {
  167. type: 'solid'
  168. },
  169. show: false
  170. },
  171. nameGap: 2,
  172. nameLocation: 'end',
  173. type: 'category'
  174. },
  175. grid: {
  176. left: 50,
  177. right: 50,
  178. top: 10,
  179. bottom: 35
  180. },
  181. series: [
  182. {
  183. name: '次数',
  184. type: 'bar',
  185. itemStyle: {
  186. normal: {
  187. color: new echarts.graphic.LinearGradient(
  188. 0, 0, 0, 1,
  189. [
  190. { offset: 0, color: 'red' },
  191. { offset: 0.5, color: 'yellow' },
  192. { offset: 1, color: 'red' }
  193. ]
  194. ),
  195. barBorderRadius: 15
  196. },
  197. emphasis: {
  198. color: new echarts.graphic.LinearGradient(
  199. 0, 0, 0, 1,
  200. [
  201. { offset: 0, color: 'red' },
  202. { offset: 0.7, color: 'yellow' },
  203. { offset: 1, color: 'red' }
  204. ]
  205. )
  206. },
  207. },
  208. label:{
  209. normal:{
  210. show: true,
  211. position:"top",
  212. smart:false,
  213. textStyle:{
  214. color: '#e9e9e9'
  215. }
  216. }
  217. },
  218. barWidth: 20,
  219. bargap: 5
  220. }
  221. ],
  222. textStyle: {
  223. fontFamily: 'Microsoft YaHei Light'
  224. }
  225. }
  226. },
  227. dataset: {
  228. maxFeatures: 20,
  229. url: '',
  230. type: 'geoJSON',
  231. geoJSON: {
  232. type: 'FeatureCollection',
  233. features: []
  234. }
  235. },
  236. data: [
  237. '2005',
  238. '2006',
  239. '2007',
  240. '2008',
  241. '2009',
  242. '2010',
  243. '2011',
  244. '2012',
  245. '2013',
  246. '2014',
  247. '2015',
  248. '2016'
  249. ],
  250. controlStyle:{color:'#fd381b', borderColor: '#fd381b'},
  251. mapData: {
  252. type: 'FeatureCollection',
  253. features: null
  254. },
  255. heatMapStyle:heatMapStyle,
  256. mapOptions: {
  257. container: 'map',
  258. style: {
  259. version: 8,
  260. sources: {
  261. 'raster-tiles': {
  262. attribution: attribution,
  263. type: 'raster',
  264. tiles: [
  265. host +
  266. '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}'
  267. ],
  268. tileSize: 256
  269. }
  270. },
  271. layers: [
  272. {
  273. id: 'simple-tiles',
  274. type: 'raster',
  275. source: 'raster-tiles',
  276. minzoom: 0,
  277. maxzoom: 22
  278. }
  279. ]
  280. },
  281. center: [ 102.57, 31.71],
  282. zoom: 3.3
  283. }
  284. };
  285. },
  286. created() {
  287. this.requestData();
  288. },
  289. methods: {
  290. requestData() {
  291. var _this = this;
  292. $.get('../data/chinaEarthquake.csv', function(csvstr) {
  293. var result = Papa.parse(csvstr, { skipEmptyLines: true, header: true }).data;
  294. var data = _this.createChartData(result);
  295. _this.chartData = data.chartData;
  296. _this.heatPoints = data.heatPoints;
  297. var year = _this.data[0];
  298. var chartFeatures = _this.crateChartFeatures(_this.chartData, year);
  299. var heatFeatures = _this.createHeatMapFeatures(_this.heatPoints, year);
  300. _this.dataset.geoJSON = {
  301. type: 'FeatureCollection',
  302. features: chartFeatures
  303. };
  304. _this.mapData = {
  305. type: 'FeatureCollection',
  306. features: heatFeatures
  307. };
  308. });
  309. },
  310. createChartData(result) {
  311. var chartData = {};
  312. var heatPoints = [];
  313. for (var i = 0; i < result.length; i++) {
  314. var item = result && result[i];
  315. if (!item || !item.date) {
  316. continue;
  317. }
  318. var date = new Date(item.date);
  319. var year = date.getFullYear();
  320. var month = date.getMonth() + 1;
  321. var point = [parseFloat(item.X), parseFloat(item.Y), parseFloat(item.level)];
  322. //每一年的地震数据
  323. if (heatPoints[year]) {
  324. heatPoints[year].push(point);
  325. } else {
  326. heatPoints[year] = [point];
  327. }
  328. //每年每发生的地震次数
  329. if (!chartData[year]) {
  330. chartData[year] = {};
  331. chartData[year][month] = 1;
  332. } else {
  333. if (!chartData[year][month]) {
  334. chartData[year][month] = 1;
  335. } else {
  336. chartData[year][month]++;
  337. }
  338. }
  339. }
  340. return { chartData: chartData, heatPoints: heatPoints };
  341. },
  342. crateChartFeatures(chartData, year) {
  343. var features = [];
  344. var data = chartData[year];
  345. for (var month in data) {
  346. var date = parseInt(month / 10) === 0 ? '0' + month : month;
  347. var feature = {
  348. type: 'Feature',
  349. properties: { value: data[month], date: date }
  350. };
  351. features.push(feature);
  352. }
  353. return features;
  354. },
  355. createHeatMapFeatures(heatPoints, year) {
  356. var features = [];
  357. var data = heatPoints[year];
  358. for (var i = 0; i < data.length; i++) {
  359. if (data[i] && data[i][1] <= 85) {
  360. var feature = {
  361. type: 'Feature',
  362. geometry: {
  363. coordinates: [parseFloat(data[i][0]), parseFloat(data[i][1])],
  364. type: 'Point'
  365. },
  366. properties: { value: data[i][2], id: i }
  367. };
  368. features.push(feature);
  369. }
  370. }
  371. return features;
  372. },
  373. timelineChanged(val) {
  374. var currentIndex = val.currentIndex;
  375. var year = this.data[currentIndex];
  376. var chartFeatures = this.crateChartFeatures(this.chartData, year);
  377. var heatFeatures = this.createHeatMapFeatures(this.heatPoints, year);
  378. this.dataset.geoJSON = {
  379. type: 'FeatureCollection',
  380. features: chartFeatures
  381. };
  382. this.mapData = {
  383. type: 'FeatureCollection',
  384. features: heatFeatures
  385. };
  386. this.chartTitle = year + '年1-12月地震次数'
  387. }
  388. }
  389. });
  390. </script>
  391. </body>
  392. </html>