diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue index e3ea6b4..34329a1 100644 --- a/src/components/MapBox.vue +++ b/src/components/MapBox.vue @@ -177,6 +177,7 @@ export default { this.init().then(() => { // 地图初始化之后 this.map.on('load', () => { + this.$emit('map-ready') // 外部组件回调 触发地图加载完成事件 传到外部组件调用 以确保执行时地图已经加载完成 /* 更新样式,添加自定义 sprite */ // 星空背景 大气层 @@ -355,6 +356,26 @@ export default { }), 'top-left') } }, + /** + * @description 通用地图图层和数据源清除方法 + * @param {Array} layerIds - 要清除的图层ID数组 + * @param {Array} sourceIds - 要清除的数据源ID数组 + */ + clearMapElements (layerIds = [], sourceIds = []) { + // 先移除图层(必须先删图层,再删数据源) + layerIds.forEach(id => { + if (this.map.getLayer(id)) { + this.map.removeLayer(id) + } + }) + + // 再移除数据源 + sourceIds.forEach(id => { + if (this.map.getSource(id)) { + this.map.removeSource(id) + } + }) + }, /** * @description: 清除地图上的航线 */ @@ -625,49 +646,6 @@ export default { this.guidedMarker = null // 清除当前标记 } }, - /** - * @description 简单画线(飞机轨迹),忽略高度,仅绘制经纬度路径 - * @param {Array} coordinatesArray - 坐标数组,每项为 [lng, lat, alt] - */ - drawSimplePath (coordinatesArray) { - const coords2D = coordinatesArray.map(coord => [coord[0], coord[1]]) - - const geojson = { - type: 'Feature', - geometry: { - type: 'LineString', - coordinates: coords2D - } - } - - // 如果已有旧图层,先移除(防止报错) - if (this.map.getLayer('path')) { - this.map.removeLayer('path') - } - if (this.map.getSource('path')) { - this.map.removeSource('path') - } - - // 添加 source 和 layer - this.map.addSource('path', { - type: 'geojson', - data: geojson - }) - - this.map.addLayer({ - id: 'path', - type: 'line', - source: 'path', - layout: { - 'line-cap': 'round', - 'line-join': 'round' - }, - paint: { - 'line-color': 'blue', - 'line-width': 3 - } - }) - }, /** * @description: 创建飞机轨迹 ps:原理删除之前的轨迹 重新绘制 * @param {arr} coordinatesArray 飞机经纬高度数组 @@ -772,9 +750,10 @@ export default { * @description: 镜头跳转 * @param {obj} lonLat {lon:lon,lat:lat} 经纬度 */ - goto (lonLat) { + goto (lonLat, zoom = 18) { this.map.flyTo({ center: lonLat, + zoom: zoom, speed: 2, curve: 1, easing (t) { diff --git a/src/views/layout/components/main/register/flyData.vue b/src/views/layout/components/main/register/flyData.vue index 756c6be..66e16a0 100644 --- a/src/views/layout/components/main/register/flyData.vue +++ b/src/views/layout/components/main/register/flyData.vue @@ -13,7 +13,7 @@
- +
暂无数据
@@ -90,12 +90,14 @@ export default { const keyMap = { 飞行时长: (item) => { if (!item.start_time || !item.end_time) return 0 - return (item.end_time - item.start_time) / 60 + return Math.round((item.end_time - item.start_time) / 60) }, 飞行距离: (item) => Number(item.distance || 0), 消耗电量: (item) => Number(item.power_used || 0) } + if (this.radioClass === '飞行轨迹') return []// 不处理轨迹数据 + this.flyDataList.forEach(item => { const planeName = item.plane_name const date = new Date(item.start_time * 1000) @@ -164,16 +166,12 @@ export default { } // 多个飞机轨迹全部绘制 if (!this.boxShow && newVal.length) { - this.$nextTick(() => { - this.drawAllPathsOnMap() - }) + this.onMapReady() } }, - boxShow (newVal) { - if (!newVal) { // boxShow 为 false,显示地图时重新绘制轨迹 - this.$nextTick(() => { - this.drawAllPathsOnMap() - }) + boxshow (val) { + if (!val) { + this.onMapReady() } }, dateRange: { @@ -183,7 +181,7 @@ export default { immediate: true }, source (newVal) { - if (newVal.length > 1) { + if (Array.isArray(newVal) && newVal.length > 1) { this.initChart() } }, @@ -199,20 +197,42 @@ export default { } }, methods: { + // 地图组件回调地图加载完成后 执行 + onMapReady () { + this.drawAllPathsOnMap() + }, // 地图轨迹绘制 drawAllPathsOnMap () { if (!this.$refs.mapbox) return - if (!this.flyDataList.length) return - // 清理旧轨迹(如果你的mapbox组件支持) - this.$refs.mapbox.clearPaths && this.$refs.mapbox.clearPaths() + // 清理旧轨迹 + this.$refs.mapbox.clearMapElements(['path'], ['path']) + // 遍历所有飞行数据,绘制轨迹 this.flyDataList.forEach(item => { - if (item.gps_path) { + if (!item.gps_path) return + try { const pathArray = JSON.parse(item.gps_path) - this.$refs.mapbox.createPathWithArray(pathArray) + if (Array.isArray(pathArray) && pathArray.length > 0) { + this.$refs.mapbox.createPathWithArray(pathArray) + } + } catch (e) { + console.warn('gps_path 解析失败', item.gps_path) } }) + + // 跳转到第一个轨迹的起点(经纬度) + if (this.flyDataList.length > 0 && this.flyDataList[0].gps_path) { + try { + const firstPath = JSON.parse(this.flyDataList[0].gps_path) + if (Array.isArray(firstPath) && firstPath.length > 0) { + const [lon, lat] = firstPath[0] + this.$refs.mapbox.goto({ lon, lat }) + } + } catch (e) { + // 解析失败不跳转 + } + } }, // 获取飞行数据 async loadFlyData () { @@ -260,7 +280,7 @@ export default { xAxis: { type: 'category' }, yAxis: { gridIndex: 0, - name: this.radioClass === '飞行时长' ? '分钟' : this.radioClass === '飞行距离' ? '米' : 'mAh' + name: this.radioClass === '飞行时长' ? '分钟' : this.radioClass === '飞行距离' ? '米' : '毫安' }, grid: { top: '55%' }, series: [