|
|
@@ -0,0 +1,212 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ title="巡检任务轨迹"
|
|
|
+ :visible.sync="centerDialogVisible"
|
|
|
+ width="70vw"
|
|
|
+ @closed="onDialogClose"
|
|
|
+ >
|
|
|
+ <div v-if="!destroyed" class="trail-dialog-content" style="width: 100%;height: 70vh;">
|
|
|
+ <bd-map :loaded="loaded" map-id="room-map"/>
|
|
|
+ <div class="map-ctrl">
|
|
|
+ <el-button type="primary" @click="trailPlay">轨迹播放</el-button>
|
|
|
+ <el-button type="primary" @click="showTrailTime">轨迹时间</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import BdMap from '@/views/bd/map/index.vue';
|
|
|
+import maphandle from '@/views/bd/map/maphandle';
|
|
|
+import position from '@/views/bd/realtimeLocation/icon/position.png';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+// import {uuid} from "@/utils";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'trail-dialog',
|
|
|
+ mixins: [maphandle],
|
|
|
+ components: {
|
|
|
+ BdMap
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ centerDialogVisible: false,
|
|
|
+ locationMarkers: {},
|
|
|
+ mapIns: null,
|
|
|
+ fencePolyLayer: null,
|
|
|
+ trail: {},
|
|
|
+ destroyed: false,
|
|
|
+ playLine: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 组件卸载前清空图层信息
|
|
|
+ beforeDestroy() {
|
|
|
+ this.markLayer && this.mapIns.removeLayersById('markerLayer');
|
|
|
+ this.fencePolyLayer && this.fencePolyLayer.cust.clearLayer()
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dayjs,
|
|
|
+ onDialogClose() {
|
|
|
+ this.markLayer = null;
|
|
|
+ this.destroyed = true;
|
|
|
+ },
|
|
|
+ loaded(map) {
|
|
|
+ this.markLayer = new BDLayers.Lib.Layer.CBVectorLayer('markerLayer', true);
|
|
|
+ map.addCustomLayers(this.markLayer, 99);
|
|
|
+ this.mapIns = map;
|
|
|
+ map.setPitch(0);
|
|
|
+ map.setCenter([118.86895, 32.01326]);
|
|
|
+ this.fencePolyLayer = this.createLayer(map);
|
|
|
+ this.addTrail()
|
|
|
+ },
|
|
|
+ show(data) {
|
|
|
+ this.trail = data;
|
|
|
+ this.destroyed = false;
|
|
|
+ this.centerDialogVisible = true;
|
|
|
+ },
|
|
|
+ addTrail(data) {
|
|
|
+ const coordinates = [
|
|
|
+ [118.868474555524, 32.013913750075],
|
|
|
+ [118.868459917135, 32.0138560330253],
|
|
|
+ [118.868460650064, 32.0137600494265],
|
|
|
+ [118.868469791963, 32.0135491295906],
|
|
|
+ [118.868450597046, 32.0135969285238],
|
|
|
+ [118.868451821878, 32.0134372342673],
|
|
|
+ [118.868369085172, 32.0134271059761],
|
|
|
+ [118.868229813542, 32.0134261784667],
|
|
|
+ [118.868037844538, 32.0134249000077],
|
|
|
+ [118.867988911263, 32.013424574126],
|
|
|
+ [118.867990212059, 32.0132809893746],
|
|
|
+ [118.867986825628, 32.0132395072755],
|
|
|
+ [118.867987028075, 32.0132171885197],
|
|
|
+ [118.867987432888, 32.0131725599655],
|
|
|
+ [118.867984539806, 32.0130769425047],
|
|
|
+ [118.867977454441, 32.0130291167663],
|
|
|
+ [118.86797791828, 32.0129781711549],
|
|
|
+ [118.867978150146, 32.0129527041872],
|
|
|
+ [118.867974855578, 32.0129017568948],
|
|
|
+ [118.868046176274, 32.0129117791912],
|
|
|
+ [118.868121507934, 32.0128931867922],
|
|
|
+ [118.868117943319, 32.0128708893801],
|
|
|
+ [118.868126616248, 32.012737367597],
|
|
|
+ [118.868127634971, 32.0126197858525],
|
|
|
+ [118.868127662494, 32.0126166091195],
|
|
|
+ [118.868165320753, 32.0126041528561],
|
|
|
+ [118.868173101262, 32.0125724412675],
|
|
|
+ [118.868240681514, 32.0125728913369],
|
|
|
+ [118.868308235972, 32.0125765173023],
|
|
|
+ [118.868334874981, 32.0125322352762],
|
|
|
+ [118.868324305199, 32.012446455205],
|
|
|
+ [118.868361835438, 32.0124467051483],
|
|
|
+ [118.868364679658, 32.0125610134717],
|
|
|
+ [118.868492254263, 32.0125713907483],
|
|
|
+ [118.868541014618, 32.0125780675563],
|
|
|
+ [118.868732580782, 32.012566639437],
|
|
|
+ [118.868841456955, 32.0125673645282],
|
|
|
+ [118.868976574771, 32.0125746162152],
|
|
|
+ [118.869070453844, 32.0125720654824],
|
|
|
+ [118.869096734551, 32.0125722405062],
|
|
|
+ [118.869156822422, 32.0125694647922],
|
|
|
+ [118.869179313588, 32.0125759664106],
|
|
|
+ [118.869201684821, 32.0126047016424],
|
|
|
+ [118.869186178487, 32.0126935647542],
|
|
|
+ [118.869193065594, 32.0128080658432],
|
|
|
+ [118.869192510216, 32.0129098661745],
|
|
|
+ [118.86919198924, 32.0130053604978],
|
|
|
+ [118.869179854563, 32.0131613771548],
|
|
|
+ [118.869190250492, 32.0133240705021],
|
|
|
+ [118.869185964264, 32.0134197772962],
|
|
|
+ [118.86917071489, 32.0134547924615],
|
|
|
+ [118.869159014503, 32.0135281642937],
|
|
|
+ [118.869166174307, 32.0135953030259],
|
|
|
+ [118.869165521059, 32.0137135723353],
|
|
|
+ [118.869187426642, 32.0138416759025],
|
|
|
+ [118.869153188005, 32.0138990608231],
|
|
|
+ [118.868990969654, 32.0139203908971],
|
|
|
+ [118.868768561862, 32.0139189097324],
|
|
|
+ [118.868572541435, 32.0139176042992],
|
|
|
+ [118.868557462941, 32.0139175038812],
|
|
|
+ ];
|
|
|
+ // 19FB03
|
|
|
+ this.playLine = bdmap.comp.Trajectory.loadTrajectory({
|
|
|
+ mapView: this.mapIns,
|
|
|
+ latlons: coordinates,
|
|
|
+ unitTime: 500,
|
|
|
+ speedValue: 1,
|
|
|
+ mapToCenter: false,
|
|
|
+ });
|
|
|
+ bdmap.comp.Trajectory.trajectoryPlay(this.playLine);
|
|
|
+ },
|
|
|
+ showTrailTime(data) {
|
|
|
+ let location = [
|
|
|
+ {
|
|
|
+ lnglat: [118.868240681514, 32.0125728913369],
|
|
|
+ date: '2024-12-11 06:10:00',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lnglat: [118.869096734551, 32.0125722405062],
|
|
|
+ date: '2024-12-11 06:13:00',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lnglat: [118.869179854563, 32.0131613771548],
|
|
|
+ date: '2024-12-11 06:15:30',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ lnglat: [118.868768561862, 32.0139189097324],
|
|
|
+ date: '2024-12-11 06:25:33',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.markLayer && this.markLayer.removeAll();
|
|
|
+ location.forEach((item, i) => {
|
|
|
+ const {
|
|
|
+ lnglat,
|
|
|
+ date,
|
|
|
+ } = item;
|
|
|
+ this.markLayer.addMarker(new BDLayers.Lib.Overlays.MarkerImg(
|
|
|
+ `marker${date + i}`,
|
|
|
+ lnglat,
|
|
|
+ {
|
|
|
+ imgurl: position,
|
|
|
+ iconSize: [25, 30],
|
|
|
+ labelText: `${date}`,
|
|
|
+ labelTextColor: '#fff',
|
|
|
+ labelTextSize: 10,
|
|
|
+ },
|
|
|
+ ));
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ trailPlay() {
|
|
|
+ bdmap.comp.Trajectory.trajectoryCancel(this.playLine);
|
|
|
+ bdmap.comp.Trajectory.trajectoryPlay(this.playLine);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.trail-dialog-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .map-ctrl {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-left: 20px;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
