From 2a041db0475f9dd50b635057e40623c1b974d160 Mon Sep 17 00:00:00 2001 From: TiaStars Date: Thu, 5 Dec 2024 15:36:13 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BD=A6=E8=BE=86=E8=A1=8C=E7=A8=8B=E8=BD=A8?= =?UTF-8?q?=E8=BF=B9=E4=BD=BF=E7=94=A8=E5=81=87=E6=95=B0=E6=8D=AE=20=20?= =?UTF-8?q?=E8=BD=A6=E8=BE=86=E7=8A=B6=E6=80=81=E7=94=B1=E8=A1=8C=E9=A9=B6?= =?UTF-8?q?=E4=B8=AD=E6=94=B9=E4=B8=BA=E6=9C=AA=E5=90=AF=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/data/carTrack.json | 107 ++++++++++++++++++ src/views/components/personagetrack/index.vue | 81 +++++++------ 2 files changed, 156 insertions(+), 32 deletions(-) create mode 100644 src/utils/data/carTrack.json diff --git a/src/utils/data/carTrack.json b/src/utils/data/carTrack.json new file mode 100644 index 0000000..cfe3661 --- /dev/null +++ b/src/utils/data/carTrack.json @@ -0,0 +1,107 @@ +{ + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "id": 81370, + "properties": { + "_draw_type": "line" + }, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + 118.79807494, + 31.94347206 + ], + [ + 118.79913133, + 31.93427172 + ], + [ + 118.8076934, + 31.93521538 + ], + [ + 118.80850954, + 31.92890365 + ], + [ + 118.81906195, + 31.92842336 + ], + [ + 118.81889553, + 31.93096601 + ], + [ + 118.81876239, + 31.93181355 + ], + [ + 118.81892884, + 31.93232207 + ], + [ + 118.81969448, + 31.93316959 + ], + [ + 118.81956133, + 31.93384761 + ], + [ + 118.81862926, + 31.93429962 + ], + [ + 118.8179635, + 31.93537313 + ], + [ + 118.81788248, + 31.93900338 + ], + [ + 118.81856548, + 31.94062961 + ], + [ + 118.81802194, + 31.94263941 + ], + [ + 118.81879847, + 31.94310067 + ], + [ + 118.82636959, + 31.94316657 + ], + [ + 118.82625314, + 31.94507748 + ], + [ + 118.82128337, + 31.94484686 + ], + [ + 118.8077718, + 31.94405614 + ], + [ + 118.7980264, + 31.94349604 + ] + ] + }, + "bbox": [ + 118.7980264, + 31.92842336, + 118.82636959, + 31.94507748 + ] + } + ] +} \ No newline at end of file diff --git a/src/views/components/personagetrack/index.vue b/src/views/components/personagetrack/index.vue index 2b3cfd6..9184d28 100644 --- a/src/views/components/personagetrack/index.vue +++ b/src/views/components/personagetrack/index.vue @@ -24,7 +24,8 @@
- 当前状态：{{ person ? personItem.status == '1' ? '在线' : personItem.status == '0' ? '离线' : '' : "行驶中" }} + + 当前状态：{{ person ? personItem.status == '1' ? '在线' : personItem.status == '0' ? '离线' : '' : "未启动" }}
@@ -122,6 +123,7 @@ import ThreeGJ02 from "@/utils/mapJson/3GJ02.json"; import FourGJ02 from "@/utils/mapJson/4GJ02.json"; import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json"; import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json"; +import carTrackJson from "@/utils/data/carTrack.json" // import L from "leaflet"; // import "@/utils/lib/leaflet.ChineseTmsProviders.js"; // import "@/utils/lib/leaflet-tilelayer-colorizr.js"; @@ -343,7 +345,6 @@ export default { this.query(); } else { this.carItem = item; - console.log(this.carItem); this.queryTime.fromTime = this.getCurrentTime(); this.queryTime.toTime = this.getCurrentTime(1); this.title = "车辆行程轨迹"; @@ -439,6 +440,7 @@ export default { if(this.map.getAllOverlays('polyline')) { this.map.remove(this.map.getAllOverlays('polyline')); } + console.log(arr,"arr"); this.track = new AMap.Polyline({ path: arr, strokeWeight: 6, @@ -462,37 +464,52 @@ export default { } }) } else { - carTrack({startTime:this.queryTime.fromTime,endTime:this.queryTime.toTime,deviceIndexCode:"b91155244ea245708ed8258dfcc4509a"}).then(res=>{ - // console.log(res,"经纬度"); - this.loading = false; - if(res.code == 200) { - let arr = [] - res.data.records.forEach(element => { - let arrTwo = []; - arrTwo[1] = element.latitude; - arrTwo[0] = element.longitude; - arr.push(arrTwo); - }); - // if(this.track) { - // this.globalMap.removeLayer(this.track); - // } - if(this.map.getAllOverlays('polyline')) { - this.map.remove(this.map.getAllOverlays('polyline')); - } - this.track = new AMap.Polyline({ - path: arr, - strokeColor: '#F44444', - strokeOpacity: 1, - showDir: true, - }) - this.map.add(this.track); - const mapInstance = this.$refs.personMap.$$getInstance(); - // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据 - mapInstance.setFitView(this.track); - } - }).catch(err => { - this.loading = false; + // carTrack({startTime:this.queryTime.fromTime,endTime:this.queryTime.toTime,deviceIndexCode:"b91155244ea245708ed8258dfcc4509a"}).then(res=>{ + // // console.log(res,"经纬度"); + // this.loading = false; + // if(res.code == 200) { + // let arr = [] + // res.data.records.forEach(element => { + // let arrTwo = []; + // arrTwo[1] = element.latitude; + // arrTwo[0] = element.longitude; + // arr.push(arrTwo); + // }); + // // if(this.track) { + // // this.globalMap.removeLayer(this.track); + // // } + // if(this.map.getAllOverlays('polyline')) { + // this.map.remove(this.map.getAllOverlays('polyline')); + // } + // this.track = new AMap.Polyline({ + // path: arr, + // strokeColor: '#F44444', + // strokeOpacity: 1, + // showDir: true, + // }) + // this.map.add(this.track); + // const mapInstance = this.$refs.personMap.$$getInstance(); + // // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据 + // mapInstance.setFitView(this.track); + // } + // }).catch(err => { + // this.loading = false; + // }) + let arr = carTrackJson.features[0].geometry.coordinates; + if(this.map.getAllOverlays('polyline')) { + this.map.remove(this.map.getAllOverlays('polyline')); + } + this.track = new AMap.Polyline({ + path: arr, + strokeColor: '#F44444', + strokeOpacity: 1, + showDir: true, }) + this.map.add(this.track); + const mapInstance = this.$refs.personMap.$$getInstance(); + // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据 + mapInstance.setFitView(this.track); + this.loading = false; } } },