src/assets/3dmap.css | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components.d.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/BaseCard.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/animation/HistoricalTrajectory.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/utils/map/3dLayer.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/utils/map/animation.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/utils/map/util.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/historymode/HistoryMode.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/assets/3dmap.css
@@ -247,6 +247,7 @@ .btn-search { cursor: pointer; padding: 4px 0; } .map-btn-group .btn-search { src/components.d.ts
@@ -12,7 +12,6 @@ CardButton: typeof import('./components/CardButton.vue')['default'] CoreHeader: typeof import('./components/core/CoreHeader.vue')['default'] CoreMenu: typeof import('./components/core/CoreMenu.vue')['default'] DataStatistic: typeof import('./components/monitor/DataStatistic.vue')['default'] DataSummary: typeof import('./components/monitor/DataSummary.vue')['default'] DataTable: typeof import('./components/monitor/DataTable.vue')['default'] ElButton: typeof import('element-plus/es')['ElButton'] @@ -40,6 +39,7 @@ FactorCheckbox: typeof import('./components/monitor/FactorCheckbox.vue')['default'] FactorLegend: typeof import('./components/monitor/FactorLegend.vue')['default'] FactorRadio: typeof import('./components/monitor/FactorRadio.vue')['default'] HistoricalTrajectory: typeof import('./components/animation/HistoricalTrajectory.vue')['default'] LineChart: typeof import('./components/monitor/LineChart.vue')['default'] MapToolbox: typeof import('./components/map/MapToolbox.vue')['default'] OptionDevice: typeof import('./components/search/OptionDevice.vue')['default'] src/components/BaseCard.vue
@@ -9,7 +9,7 @@ <div class="ff-footer"> <slot name="footer"></slot> </div> <div v-if="type == 'content' && size != 'small'" class="ff-triangle"> <div v-if="type == 'content' && size == 'medium'" class="ff-triangle"> <div class="ff-triangle-border"></div> </div> </div> src/components/animation/HistoricalTrajectory.vue
¶Ô±ÈÐÂÎļþ @@ -0,0 +1,86 @@ <template> <BaseCard size="middle-s" direction="up"> <template #content> <el-row align="middle" style="gap: 6px"> <div>åå²è½¨è¿¹</div> <div class="map-btn-group"> <font-awesome-icon :icon="btnStop.icon" :class="'btn-search m-r-2 ' + btnStop.clz" @click="handleStop" /> <font-awesome-icon :icon="btnPlay.icon" class="btn-search" @click="handlePlayOrPause" /> </div> <div class="label-date margin-left-2"> <span class="label-date-title">åé</span> <el-select v-model="speed" size="small" class="w-80"> <el-option label="1.0X" :value="1" /> <el-option label="4.0X" :value="4" /> <el-option label="8.0X" :value="8" /> <el-option label="16X" :value="16" /> </el-select> </div> </el-row> </template> </BaseCard> </template> <script> export default { props: {}, emits: ['change'], data() { return { speed: 1, // å¨ç»ç¶æï¼0ï¼åæ¢ï¼1ï¼ææ¾ï¼2ï¼æå status: 0 }; }, computed: { btnStop() { return { icon: 'fa fa-stop', clz: this.status == 0 ? 'btn-disable' : 'btn-able' }; }, btnPlay() { return { icon: this.status == 1 ? 'fa fa-pause' : 'fa fa-play' }; } }, methods: { handleStop() { if (this.status != 0) { this.status = 0; this.handleChange(); } }, handlePlayOrPause() { if (this.status == 1) { this.status = 2; } else { this.status = 1; } this.handleChange(); }, handleChange() { console.log(this.status); this.$emit('change', this.status); } }, mounted() {} }; </script> <style scoped> .btn-able { color: red; } .btn-disable { color: gray; } </style> src/utils/map/3dLayer.js
@@ -87,11 +87,10 @@ return scale; } export default { /** * ç»å¾ */ drawMesh(fDatas, factor, center, merge) { function drawMesh(fDatas, factor, center, merge) { const lnglats_GD = fDatas.lnglats_GD; const coors = fDatas.coors_GD; const heights = factor.heights; @@ -168,7 +167,10 @@ // }); /**************test ****************/ _cylinder = cylinder; }, } export default { drawMesh: drawMesh, /** * ç»å¶3Dèµ°è¡è·¯çº¿å¾ * @param fDatas 宿´çæµæ°æ® src/utils/map/animation.js
@@ -2,7 +2,10 @@ import calculate from '@/utils/map/calculate'; import Layer from '@/utils/map/3dLayer'; import sector from '@/utils/map/sector'; import map from '@/utils/map/index_old'; import { map } from '@/utils/map/index_old'; import util from "@/utils/map/util"; import car_driving from '@/assets/mipmap/car_driving.png'; import boat_driving from '@/assets/mipmap/boat_driving.png'; function MapAnimation() { // éè¿ç»åæ ç¹æå¤§è·ç¦»(ç±³) @@ -264,16 +267,16 @@ var url; switch (this.vehicleType) { case 0: url = './asset/mipmap/car_driving.png'; url = car_driving; break; case 1: url = './asset/mipmap/car_driving.png'; url = car_driving; break; case 2: url = './asset/mipmap/boat_driving.png'; url = boat_driving; break; default: url = './asset/mipmap/car_driving.png'; url = car_driving; break; } // var url = "./asset/mipmap/car_offline.png"; @@ -292,26 +295,33 @@ // break; // } // eslint-disable-next-line no-undef var icon = new AMap.Icon({ // eslint-disable-next-line no-undef size: new AMap.Size(60, 30), // eslint-disable-next-line no-undef imageSize: new AMap.Size(54, 21), image: url // imageOffset: new AMap.Pixel(-16, -16) // ç¸å¯¹äºåºç¹çåç§»ä½ç½® }); // eslint-disable-next-line no-undef var car = new AMap.Marker({ icon: icon, position: lnglat, // åºç¹ä½ç½® // eslint-disable-next-line no-undef offset: new AMap.Pixel(-20, -15) // ç¸å¯¹äºåºç¹çåç§»ä½ç½® }); MapUtil._map.add(car); map.add(car); this.moveViews['car'] = car; // æ¶é´ // eslint-disable-next-line no-undef var text = new AMap.Text({ text: time, position: lnglat, // eslint-disable-next-line no-undef offset: new AMap.Pixel(5, 20), style: { 'font-size': '13px', @@ -324,10 +334,10 @@ padding: '0 4px' } }); MapUtil._map.add(text); map.add(text); this.moveViews['text'] = text; } else { MapUtil.setCenter(lnglat); util.setCenter(lnglat); this.moveViews['car'].setPosition(lnglat); this.moveViews['text'].setPosition(lnglat); this.moveViews['text'].setText(time); src/utils/map/util.js
¶Ô±ÈÐÂÎļþ @@ -0,0 +1,17 @@ import { map, isDragging } from '@/utils/map/index_old'; export default { setCenter(lnglat) { if (isDragging) { return; } var now = new Date(); if ( this.lasttime == undefined || now.getTime() - this.lasttime.getTime() >= 1000 ) { map.setCenter(lnglat); this.lasttime = now; } } }; src/views/historymode/HistoryMode.vue
@@ -1,6 +1,6 @@ <template> <div class="p-events-none m-t-2"> <el-row justify="center"> <el-row v-show="status == 0" justify="center"> <SearchBar :search-time="searchTime" @search="fetchHistroyData" @@ -32,6 +32,11 @@ :factor-datas="factorDatas" :device-type="deviceType" ></DataSheet> <el-row class="historical" justify="center"> <HistoricalTrajectory @change="(e) => (status = e)" ></HistoricalTrajectory> </el-row> </div> </template> @@ -70,7 +75,9 @@ drawMode: 0, searchTime: [], // å½åéä¸é«äº®çæ°æ®ç¹ç´¢å¼ locateIndex: undefined locateIndex: undefined, // 轨迹å¨ç»ç¶æ status: 0 }; }, watch: { @@ -192,4 +199,11 @@ right: 0; top: 0; } .historical { position: absolute; bottom: 0; left: 0; right: 0; } </style>