| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title data-i18n="resources.title_componentsTimeLineTracklayer_Vue"></title>
- <script type="text/javascript" include="vue,jquery,papaparse" src="../js/include-web.js"></script>
- <script
- include="lodash,moment,three92,LoaderSupport,OBJLoader2,echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
- src="../../dist/mapboxgl/include-mapboxgl.js"
- ></script>
- <style>
- #main {
- position: relative;
- margin: 0 auto;
- width: 100%;
- height: 100%;
- }
- .sm-left-part {
- position: absolute;
- width: 270px;
- height: 100%;
- z-index: 1000;
- background: rgba(0, 0, 0, 0.73);
- }
- .sm-chart-wrapper .sm-component-chart {
- display: flex;
- }
- .sm-component-time-slider {
- position: absolute;
- left: 270px;
- bottom: 0px;
- width: calc(100% - 270px);
- z-index: 1000;
- }
- .sm-component-web-map {
- position: absolute;
- width: 100%;
- height: 100%;
- }
- .sm-gauge-wrapper {
- position: absolute;
- bottom: 0px;
- width: 100%;
- margin: 0 auto;
- }
- .sm-gauge-item {
- position: relative;
- }
- .sm-component-text {
- position: absolute;
- bottom: 0;
- width: 100%;
- }
- .sm-component-text span {
- margin: 0 auto;
- }
- .sm-chart-wrapper .sm-component-chart,
- .sm-chart-wrapper .sm-component-chart .sm-component-collapse-card__content {
- width: 270px;
- height: 160px;
- }
- .sm-gauge-wrapper .sm-component-chart,
- .sm-gauge-wrapper .sm-component-chart .sm-component-collapse-card__content {
- width: 130px;
- height: 100px;
- }
- </style>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id="main">
- <sm-web-map :map-options="mapOptions" :tianditu-key="tiandituKey">
- <sm-track-layer v-bind="trackLayers" :position="position"></sm-track-layer>
- </sm-web-map>
- <div class="sm-left-part">
- <div class="sm-chart-wrapper">
- <sm-chart icon-class="" v-bind="chart" :dataset="dataset"></sm-chart>
- <sm-chart icon-class="" v-bind="chart1" :dataset="dataset"></sm-chart>
- <sm-chart icon-class="" v-bind="chart2" :dataset="dataset"></sm-chart>
- </div>
- <div class="sm-gauge-wrapper">
- <div class="sm-gauge-item" style="width:100%">
- <sm-chart
- icon-class=""
- v-bind="gauge"
- :dataset="gaugeDataset"
- style="margin: 0 auto"
- ></sm-chart>
- <sm-text title="速度"></sm-text>
- </div>
- <div class="sm-gauge-item" style="display: inline-block;width:49%">
- <sm-chart icon-class="" v-bind="gauge1" :dataset="gaugeDataset"></sm-chart>
- <sm-text title="加速度"></sm-text>
- </div>
- <div class="sm-gauge-item" style="display: inline-block;width:49%">
- <sm-chart icon-class="" v-bind="gauge2" :dataset="gaugeDataset"></sm-chart>
- <sm-text title="方位角"></sm-text>
- </div>
- </div>
- </div>
- <sm-time-slider
- :data="data"
- :play-interval="2000"
- :theme-style="themeStyle"
- :checkpoint-style="checkpointStyle"
- :label="themeStyle"
- :line-style="lineStyle"
- @timeplayerchanged="timeplayerchanged"
- background="rgba(0, 0, 0, 0.73)"
- ></sm-time-slider>
- </div>
- <script>
- new Vue({
- el: '#main',
- data() {
- var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
- var attribution =
- "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
- " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
- " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
- return {
- tiandituKey: 'f16b023603de8ae8fdd09a2c0feb1ec2',
- dataset: {
- maxFeatures: '',
- type: 'geoJSON',
- geoJSON: {
- type: 'FeatureCollection',
- features: []
- }
- },
- chart: {
- datasetOptions: [
- {
- seriesType: 'line',
- isStastic: false,
- isStack: false,
- xField: 'timestamp',
- yField: 'speed',
- sort: 'unsort'
- }
- ],
- options: {
- series: [
- {
- data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
- name: 'Y1',
- emphasis: { itemStyle: {} },
- stack: 0,
- type: 'line',
- smooth: true,
- animationEasing: 'quadraticIn',
- animationEasingUpdate: 'quadraticIn',
- label: {
- normal: {
- position: 'top',
- show: false,
- textStyle: { fontSize: 12 },
- smart: false
- }
- },
- showAllSymbol: 'auto',
- symbol: 'emptyCircle',
- symbolSize: 4,
- itemStyle: { borderWidth: 2, color: '#F2F5F8', borderColor: '#F2F5F8' },
- lineStyle: { color: '#F2F5F8' }
- }
- ],
- yAxis: {
- axisLabel: {
- rotate: 0,
- fontFamily: 'MicrosoftYaHei',
- show: true,
- color: '#fff',
- fontSize: 12,
- align: 'right',
- margin: 8
- },
- axisLine: { lineStyle: { color: '#fff' }, show: true },
- name: '速度',
- show: true,
- splitLine: {
- lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
- show: true
- },
- splitArea: { show: false },
- nameGap: 5,
- nameLocation: 'end',
- type: 'value',
- nameTextStyle: { padding: [0, 0, 5, 0] },
- axisTick: { show: false }
- },
- xAxis: {
- axisLabel: {
- rotate: 0,
- fontFamily: 'MicrosoftYaHei',
- show: false,
- color: '#fff',
- fontSize: 12,
- align: 'center',
- margin: 8
- },
- data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
- axisLine: { lineStyle: { color: '#fff' }, show: false },
- show: true,
- name: '',
- axisTick: { alignWithLabel: true, show: false },
- splitLine: {
- lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
- show: false
- },
- nameGap: 2,
- nameLocation: 'end',
- type: 'category',
- boundaryGap: true
- },
- grid: { top: 35, left: 36, bottom: 35, right: 20 },
- legend: {
- data: ['speed'],
- show: false,
- textStyle: { color: '#fff', fontSize: 12 },
- type: 'scroll',
- top: 'top',
- left: 'center'
- },
- tooltip: {
- axisPointer: { shadowStyle: {}, type: 'line' },
- trigger: 'axis',
- textStyle: { align: 'left' }
- },
- textStyle: { fontFamily: 'Microsoft YaHei Light' },
- title: {
- padding: [5, 0, 0, 20],
- x: 'left',
- text: '',
- textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
- },
- dataZoom: []
- }
- },
- chart1: {
- datasetOptions: [
- {
- seriesType: 'line',
- isStastic: false,
- isStack: false,
- xField: 'timestamp',
- yField: 'acceleration',
- sort: 'unsort'
- }
- ],
- options: {
- series: [
- {
- data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
- name: 'Y1',
- emphasis: { itemStyle: {} },
- stack: 0,
- type: 'line',
- smooth: true,
- animationEasing: 'quadraticIn',
- animationEasingUpdate: 'quadraticIn',
- label: {
- normal: {
- position: 'top',
- show: false,
- textStyle: { fontSize: 12 },
- smart: false
- }
- },
- showAllSymbol: 'auto',
- symbol: 'emptyCircle',
- symbolSize: 4,
- itemStyle: { borderWidth: 2, color: '#F2F5F8', borderColor: '#F2F5F8' },
- lineStyle: { color: '#F2F5F8' }
- }
- ],
- yAxis: {
- axisLabel: {
- rotate: 0,
- fontFamily: 'MicrosoftYaHei',
- show: true,
- color: '#fff',
- fontSize: 12,
- align: 'right',
- margin: 8
- },
- axisLine: { lineStyle: { color: '#fff' }, show: true },
- name: '加速度',
- show: true,
- splitLine: {
- lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
- show: true
- },
- splitArea: { show: false },
- nameGap: 5,
- nameLocation: 'end',
- type: 'value',
- nameTextStyle: { padding: [0, 0, 5, 0] },
- axisTick: { show: false }
- },
- xAxis: {
- axisLabel: {
- rotate: 0,
- fontFamily: 'MicrosoftYaHei',
- show: false,
- color: '#fff',
- fontSize: 12,
- align: 'center',
- margin: 8
- },
- data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
- axisLine: { lineStyle: { color: '#fff' }, show: false },
- show: true,
- name: '',
- axisTick: { alignWithLabel: true, show: false },
- splitLine: {
- lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
- show: false
- },
- nameGap: 2,
- nameLocation: 'end',
- type: 'category',
- boundaryGap: true
- },
- grid: { top: 35, left: 36, bottom: 35, right: 20 },
- legend: {
- data: ['acceleration'],
- show: false,
- textStyle: { color: '#fff', fontSize: 12 },
- type: 'scroll',
- top: 'top',
- left: 'center'
- },
- tooltip: {
- axisPointer: { shadowStyle: {}, type: 'line' },
- trigger: 'axis',
- textStyle: { align: 'left' }
- },
- textStyle: { fontFamily: 'Microsoft YaHei Light' },
- title: {
- padding: [5, 0, 0, 20],
- x: 'left',
- text: '',
- textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
- },
- dataZoom: []
- }
- },
- chart2: {
- datasetOptions: [
- {
- seriesType: 'line',
- isStastic: false,
- isStack: false,
- xField: 'timestamp',
- yField: 'wheel_angle',
- sort: 'unsort'
- }
- ],
- options: {
- series: [
- {
- data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
- name: 'Y1',
- emphasis: { itemStyle: {} },
- stack: 0,
- type: 'line',
- smooth: true,
- animationEasing: 'quadraticIn',
- animationEasingUpdate: 'quadraticIn',
- label: {
- normal: {
- position: 'top',
- show: false,
- textStyle: { fontSize: 12 },
- smart: false
- }
- },
- showAllSymbol: 'auto',
- symbol: 'emptyCircle',
- symbolSize: 4,
- itemStyle: { borderWidth: 2, color: '#F2F5F8', borderColor: '#F2F5F8' },
- lineStyle: { color: '#F2F5F8' }
- }
- ],
- yAxis: {
- axisLabel: {
- rotate: 0,
- fontFamily: 'MicrosoftYaHei',
- show: true,
- color: '#fff',
- fontSize: 12,
- align: 'right',
- margin: 8
- },
- axisLine: { lineStyle: { color: '#fff' }, show: true },
- name: '方位角',
- show: true,
- splitLine: {
- lineStyle: { width: 0.3, type: 'solid', color: '#ccc', opacity: 1 },
- show: true
- },
- splitArea: { show: false },
- nameGap: 5,
- nameLocation: 'end',
- type: 'value',
- nameTextStyle: { padding: [0, 0, 5, 0] },
- axisTick: { show: false }
- },
- xAxis: {
- axisLabel: {
- rotate: 0,
- fontFamily: 'MicrosoftYaHei',
- show: false,
- color: '#fff',
- fontSize: 12,
- align: 'center',
- margin: 8
- },
- data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
- axisLine: { lineStyle: { color: '#fff' }, show: false },
- show: true,
- name: '',
- axisTick: { alignWithLabel: true, show: false },
- splitLine: {
- lineStyle: { type: 'solid', color: '#ccc', opacity: 1, width: 0.3 },
- show: false
- },
- nameGap: 2,
- nameLocation: 'end',
- type: 'category',
- boundaryGap: true
- },
- grid: { top: 35, left: 36, bottom: 35, right: 20 },
- legend: {
- data: ['wheel_angle'],
- show: false,
- textStyle: { color: '#fff', fontSize: 12 },
- type: 'scroll',
- top: 'top',
- left: 'center'
- },
- tooltip: {
- axisPointer: { shadowStyle: {}, type: 'line' },
- trigger: 'axis',
- textStyle: { align: 'left' }
- },
- textStyle: { fontFamily: 'Microsoft YaHei Light' },
- title: {
- padding: [5, 0, 0, 20],
- x: 'left',
- text: '',
- textStyle: { fontFamily: 'Microsoft YaHei Light', fontWeight: '100' }
- },
- dataZoom: []
- }
- },
- gaugeDataset: { maxFeatures: 20, url: '', type: '', withCredentials: false },
- gauge: {
- datasetOptions: [{ seriesType: 'gauge' }],
- options: {
- series: [
- {
- name: 'inLoop',
- type: 'gauge',
- min: -15,
- max: 15,
- center: ['50%', '50%'],
- startAngle: 180,
- endAngle: 0,
- splitNumber: 10,
- radius: '70%',
- data: [{ value: 0, name: '完成率' }],
- title: { show: false, textStyle: { fontSize: 14, color: '#ffffff' } },
- detail: { show: true, textStyle: { fontSize: 15, color: '#ffffff' } },
- axisTick: { show: false, length: 13, lineStyle: { width: 1, color: '#fff' } },
- splitLine: { show: false, length: 20, lineStyle: { width: 2, color: '#fff' } },
- axisLabel: {
- show: false,
- fontSize: 12,
- fontWeight: 'normal',
- distance: 16,
- color: '#fff'
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: [
- [0.36, '#F2F5F8'],
- [1, '#D3DDE8']
- ],
- width: 8
- }
- },
- pointer: { show: true, length: '66%', width: 2 },
- itemStyle: { show: false, color: 'auto' }
- },
- {
- name: 'outLoop',
- type: 'gauge',
- min: -15,
- max: 15,
- center: ['50%', '50%'],
- startAngle: 225,
- endAngle: -45,
- splitNumber: 10,
- radius: '75%',
- title: { show: false },
- detail: { show: false },
- axisTick: {
- show: false,
- length: -8,
- lineStyle: { width: 1, color: '#F2F5F8' },
- splitNumber: 7
- },
- splitLine: {
- show: false,
- length: -20,
- lineStyle: { width: 2, color: '#D3DDE8' }
- },
- axisLabel: { show: false, fontSize: 12, fontWeight: 'normal', distance: 25 },
- axisLine: { show: false },
- pointer: { show: false },
- itemStyle: { show: true, color: '' }
- }
- ]
- }
- },
- gauge1: {
- datasetOptions: [{ seriesType: 'gauge' }],
- options: {
- series: [
- {
- name: 'inLoop',
- type: 'gauge',
- min: -0.6,
- max: 1.2,
- center: ['50%', '50%'],
- startAngle: 180,
- endAngle: 0,
- splitNumber: 10,
- radius: '70%',
- data: [{ value: 0, name: '完成率' }],
- title: { show: false, textStyle: { fontSize: 14, color: '#ffffff' } },
- detail: { show: true, textStyle: { fontSize: 15, color: '#ffffff' } },
- axisTick: { show: false, length: 13, lineStyle: { width: 1, color: '#fff' } },
- splitLine: { show: false, length: 20, lineStyle: { width: 2, color: '#fff' } },
- axisLabel: {
- show: false,
- fontSize: 12,
- fontWeight: 'normal',
- distance: 16,
- color: '#fff'
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: [
- [0.36, '#F2F5F8'],
- [1, '#D3DDE8']
- ],
- width: 8
- }
- },
- pointer: { show: true, length: '66%', width: 2 },
- itemStyle: { show: false, color: 'auto' }
- },
- {
- name: 'outLoop',
- type: 'gauge',
- min: -0.6,
- max: 1.2,
- center: ['50%', '50%'],
- startAngle: 225,
- endAngle: -45,
- splitNumber: 10,
- radius: '75%',
- title: { show: false },
- detail: { show: false },
- axisTick: {
- show: false,
- length: -8,
- lineStyle: { width: 1, color: '#F2F5F8' },
- splitNumber: 7
- },
- splitLine: {
- show: false,
- length: -20,
- lineStyle: { width: 2, color: '#D3DDE8' }
- },
- axisLabel: { show: false, fontSize: 12, fontWeight: 'normal', distance: 25 },
- axisLine: { show: false },
- pointer: { show: false },
- itemStyle: { show: true, color: '' }
- }
- ]
- }
- },
- gauge2: {
- datasetOptions: [{ seriesType: 'gauge' }],
- options: {
- series: [
- {
- name: 'inLoop',
- type: 'gauge',
- min: 0,
- max: 7,
- center: ['50%', '50%'],
- startAngle: 180,
- endAngle: 0,
- splitNumber: 10,
- radius: '70%',
- data: [{ value: 0, name: '完成率' }],
- title: { show: false, textStyle: { fontSize: 14, color: '#ffffff' } },
- detail: { show: true, textStyle: { fontSize: 15, color: '#ffffff' } },
- axisTick: { show: false, length: 13, lineStyle: { width: 1, color: '#fff' } },
- splitLine: { show: false, length: 20, lineStyle: { width: 2, color: '#fff' } },
- axisLabel: {
- show: false,
- fontSize: 12,
- fontWeight: 'normal',
- distance: 16,
- color: '#fff'
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: [
- [0.36, '#F2F5F8'],
- [1, '#D3DDE8']
- ],
- width: 8
- }
- },
- pointer: { show: true, length: '66%', width: 2 },
- itemStyle: { show: false, color: 'auto' }
- },
- {
- name: 'outLoop',
- type: 'gauge',
- min: 0,
- max: 7,
- center: ['50%', '50%'],
- startAngle: 225,
- endAngle: -45,
- splitNumber: 10,
- radius: '75%',
- title: { show: false },
- detail: { show: false },
- axisTick: {
- show: false,
- length: -8,
- lineStyle: { width: 1, color: '#F2F5F8' },
- splitNumber: 7
- },
- splitLine: {
- show: false,
- length: -20,
- lineStyle: { width: 2, color: '#D3DDE8' }
- },
- axisLabel: { show: false, fontSize: 12, fontWeight: 'normal', distance: 25 },
- axisLine: { show: false },
- pointer: { show: false },
- itemStyle: { show: true, color: '' }
- }
- ]
- }
- },
- data: [],
- checkpointStyle: { color: '#F2F5F8', background: '#F2F5F8' },
- themeStyle: { color: '#F2F5F8', borderColor: '#F2F5F8' },
- lineStyle: { background: '#515659', height: '5px', type: 'solid' },
- mapOptions: {
- pitch: 60,
- container: 'map',
- style: {
- version: 8,
- sources: {
- buildings: {
- type: 'geojson',
- data: 'https://iclient.supermap.io/examples/data/buildings.json'
- },
- baseLayer: {
- type: 'raster',
- tiles: [
- 'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
- 'https://t1.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
- 'https://t2.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
- 'https://t3.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
- 'https://t4.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
- 'https://t5.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
- 'https://t6.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}',
- 'https://t7.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}'
- ],
- tileSize: 256
- }
- },
- layers: [
- { id: 'baseLayer', type: 'raster', source: 'baseLayer' },
- {
- id: '3d-buildings',
- source: 'buildings',
- type: 'fill-extrusion',
- paint: {
- 'fill-extrusion-color': '#484646',
- 'fill-extrusion-height': ['*', ['get', 'height'], 5],
- 'fill-extrusion-opacity': 1
- }
- }
- ]
- },
- center: [116.4553, 39.9313],
- zoom: 16.51,
- maxZoom: 17,
- bearing: 180,
- rasterTileSize: 256
- },
- trackLayers: {
- loaderType: 'OBJ2',
- url: '../data/track-layer/car.obj',
- obj2Url: '../data/track-layer/car.obj',
- gltfUrl: '',
- imgUrl: '',
- displayLine: 'All',
- layerStyle: {
- line: {
- paint: { 'line-color': '#13FF13', 'line-width': 20, 'line-opacity': 0.8 }
- }
- },
- direction: { front: 'x', bottom: '-z' },
- unit: 'millimeter',
- scale: 5,
- followCamera: true,
- trackPoints: []
- },
- position: {
- prevTimestamp: null,
- currentTimestamp: 1599810915000,
- nextTimestamp: 1599810920000,
- step: 3000
- }
- };
- },
- created() {
- SuperMap.Components.setTheme({ textColor: '#fff', background: 'rgb(0,0,0,0)' });
- this.requestData();
- },
- methods: {
- requestData() {
- var _this = this;
- $.get('../data/track-layer/outTime.json', function(res) {
- _this.timeData = res;
- _this.setData(res);
- _this.trackLayers.trackPoints = _this.getAllDataFeatures(res);
- _this.timeplayerchanged({ currentTimestamp: 1599810915000, lastIndex: 0, nextIndex: 1 });
- });
- },
- setData(data) {
- var keys = [];
- for (var key in data) {
- keys.push(Number(key));
- }
- this.data = keys;
- },
- timeplayerchanged(val) {
- var currentIndex = val.lastIndex;
- var nextIndex = val.nextIndex;
- var currentTimeStamp = val.currentTimeStamp;
- if (currentIndex === -1) {
- return;
- }
- var timestamp = this.data[currentIndex] + '';
- var data = this.timeData[timestamp];
- this.gauge.options.series[0].data[0].value = data.properties.speed;
- this.gauge1.options.series[0].data[0].value = data.properties.acceleration;
- this.gauge2.options.series[0].data[0].value = data.properties.wheel_angle;
- var chartData = this.getDataByDates(this.timeData, Number(this.data[0]), Number(timestamp));
- var chartFeatures = this.createChartFeatures(chartData, [
- 'speed',
- 'acceleration',
- 'wheel_angle'
- ]);
- this.dataset.geoJSON = {
- type: 'FeatureCollection',
- features: chartFeatures
- };
- this.position = {
- prevTimestamp: Number(this.data[currentIndex] + '000'),
- currentTimestamp: Number(currentTimeStamp),
- nextTimestamp: Number(this.data[nextIndex] + '000'),
- step: 3000
- };
- },
- getAllDataFeatures(data) {
- var features = [];
- for (var key in data) {
- data[key].properties.timestamp = Number(key + '000');
- features.push(data[key]);
- }
- return features;
- },
- createChartFeatures(data, yFields) {
- var results = [];
- for (var timestamp in data) {
- var result = {};
- result['timestamp'] = this.timestamp2Date(timestamp);
- var datas = data[timestamp];
- yFields.forEach(yField => {
- result[yField] = datas.properties[yField];
- });
- results.push(result);
- }
- results = results.map(val => {
- var feature = {};
- feature.properties = val;
- return feature;
- });
- return results;
- },
- getDataByDates(data, start, end) {
- var newdata = {};
- if (data && start && end) {
- if (start === end) {
- var timestamp = this.getNearestDataIndex(this.data, start);
- newdata[start] = data[timestamp + ''];
- }
- for (var timestamp in data) {
- if (timestamp >= start && timestamp <= end) {
- newdata[timestamp] = data[timestamp + ''];
- }
- }
- }
- return newdata;
- },
- getNearestDataIndex(data, timestamp) {
- var keys = data;
- var index = _.findLastIndex(keys, function(val) {
- return val <= timestamp;
- });
- return keys[index];
- },
- timestamp2Date(timestamp) {
- return timestamp ? moment(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss') : '';
- }
- }
- });
- </script>
- </body>
- </html>
|
