const createCurvedLine = (
start: [number, number],
end: [number, number],
options = {
heightFactor: 0.5,
maxHeight: 0.3
}
) => {
// 创建弧线
const midPoint: [number, number] = [
(start[0] + end[0]) / 2 + (end[1] - start[1]) * options.heightFactor,
(start[1] + end[1]) / 2 + (start[0] - end[0]) * options.heightFactor
]
const curve = turf.bezierSpline(turf.lineString([start, midPoint, end]), {
resolution: 100,
sharpness: 1.0
})
// 添加高度
return turf.lineString(
curve.geometry.coordinates.map((coord, index) => {
const progress = index / (curve.geometry.coordinates.length - 1)
const elevation = Math.sin(progress * Math.PI) * options.maxHeight
console.log('elevation', elevation)
return [coord[0], coord[1], elevation]
})
)
}
// 确保图层创建完成后才启动动画
let animationFrameId: number
// 地图加载完成
const mapLoaded = (map: MapboxMap) => {
baseMap.value = map
// 启用3D地形
baseMap.value.addSource('mapbox-dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
tileSize: 512,
maxzoom: 14
})
baseMap.value.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 })
// 创建带高度和弧度的飞线
const flyline = createCurvedLine([55.525149, 24.208433], [54.373326, 24.4888], {
heightFactor: 0.7,
maxHeight: 0.4
})
// 1. 创建飞线数据源（GeoJSON格式）
const flylineData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
type: 0,
distance: turf.distance(
turf.point([55.525149, 24.208433]),
turf.point([54.373326, 24.4888])
),
// startTime: Date.now() // 添加时间戳属性
data: turf.featureCollection([flyline]),
lineMetrics: true
},
geometry: {
type: 'LineString',
coordinates: [
[55.525149, 24.208433], // 起点坐标
[54.373326, 24.4888] // 终点坐标
]
}
}
]
}
// 2. 添加数据源
baseMap.value.addSource('pulse-lines', {
type: 'geojson',
data: flylineData,
// 启用lineMetrics以支持line-gradient
lineMetrics: true
})
// 3. 创建自定义动画图层
try {
baseMap.value.addLayer({
id: 'pulse-lines-layer',
type: 'line',
source: 'pulse-lines',
paint: {
'line-gradient': [
'interpolate',
['linear'],
['line-progress'], // 使用内置变量替代数据字段
0,
'rgba(255, 0, 0, 0.5)', // 起点透明
0.3,
'rgba(255, 0, 0, 0.8)', // 中间亮色
0.7,
'rgba(255, 0, 0, 0.9)', // 中间亮色
1,
'rgba(255, 0, 0, 0.5)' // 终点透明
],
'line-width': [
'interpolate',
['linear'],
['line-progress'],
0,
5, // 起点细
0.5,
6, // 中间粗
1,
5 // 终点细
],
'line-color': 'red',
'line-opacity': 0.9,
'line-blur': 0.3
},
layout: {
'line-cap': 'round',
'line-join': 'round'
}
})
} catch (error) {
console.error('图层创建失败:', error)
return
}
优化线的样式为带有弧度、高度和起始点激光放射效果的飞线
最新发布
本文介绍在Unity中使用自定义ShaderCurve为游戏增添视觉魅力的方法。当选择Custom/curve时，直线转为曲线，创造独特视觉效果。通过调整曲线，开发者能实现更丰富细腻的画面表现。
扫一扫
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
