diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue index 2ed2b08..96e715b 100644 --- a/src/components/MapBox.vue +++ b/src/components/MapBox.vue @@ -1089,6 +1089,65 @@ export default { this.map.resize() }, 200) } + }, + drawTestPoints (positions, center) { + // 清除旧的图层和数据源(可选) + if (this.map.getSource('test-points')) this.map.removeSource('test-points') + if (this.map.getLayer('test-points')) this.map.removeLayer('test-points') + if (this.map.getSource('center-point')) this.map.removeSource('center-point') + if (this.map.getLayer('center-point')) this.map.removeLayer('center-point') + + // 构造蓝色飞机点的 GeoJSON + const features = positions.map(pos => ({ + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [pos[0], pos[1]] + } + })) + + this.map.addSource('test-points', { + type: 'geojson', + data: { + type: 'FeatureCollection', + features: features + } + }) + + this.map.addLayer({ + id: 'test-points', + type: 'circle', + source: 'test-points', + paint: { + 'circle-radius': 6, + 'circle-color': '#3399ff' // 蓝色 + } + }) + + // 添加重心点(红色) + this.map.addSource('center-point', { + type: 'geojson', + data: { + type: 'FeatureCollection', + features: [{ + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [center.lon, center.lat] + } + }] + } + }) + + this.map.addLayer({ + id: 'center-point', + type: 'circle', + source: 'center-point', + paint: { + 'circle-radius': 8, + 'circle-color': '#ff3333' // 红色 + } + }) } }, beforeDestroy () { diff --git a/src/views/layout/components/main/home/index.vue b/src/views/layout/components/main/home/index.vue index 7c54e44..a3ddd24 100644 --- a/src/views/layout/components/main/home/index.vue +++ b/src/views/layout/components/main/home/index.vue @@ -68,6 +68,37 @@ export default { } }, mounted () { + setTimeout(() => { + // 中心点(经纬度) + const centerLng = 100.0000 + const centerLat = 40.0000 + + // 生成随机点数组(10个点) + const testPositions = Array.from({ length: 10 }, () => { + const offsetLng = centerLng + (Math.random() - 0.5) * 0.001 // ±0.0005 + const offsetLat = centerLat + (Math.random() - 0.5) * 0.001 + const alt = 100 + Math.floor(Math.random() * 100) // 高度 100~200 + return [offsetLng, offsetLat, alt] + }) + + // 计算重心点 + const center = testPositions.reduce((acc, pos) => { + acc.lon += pos[0] + acc.lat += pos[1] + acc.alt += pos[2] + return acc + }, { lon: 0, lat: 0, alt: 0 }) + + const count = testPositions.length + const centerPoint = { + lon: center.lon / count, + lat: center.lat / count, + alt: center.alt / count + } + + // 调用 mapbox 地图组件的绘图函数 + this.$refs.mapbox.drawTestPoints(testPositions, centerPoint) + }, 3000) }, watch: { /**