23 changed files with 605 additions and 109 deletions
@ -0,0 +1,360 @@ |
|||
<!doctype html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>轨迹点实现</title> |
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css" /> |
|||
<style> |
|||
#map { |
|||
width: 100%; |
|||
height: 500px; |
|||
} |
|||
#controls { |
|||
padding: 10px; |
|||
background: #f5f5f5; |
|||
} |
|||
#info-panel { |
|||
padding: 10px; |
|||
background: white; |
|||
border: 1px solid #ddd; |
|||
} |
|||
.timeline { |
|||
display: flex; |
|||
overflow-x: auto; |
|||
padding: 10px 0; |
|||
} |
|||
.timeline-marker { |
|||
padding: 5px 10px; |
|||
margin: 0 5px; |
|||
background: #1890ff; |
|||
color: white; |
|||
border-radius: 3px; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="controls"> |
|||
<button id="btn-play">播放轨迹</button> |
|||
<button id="btn-pause">暂停</button> |
|||
<div id="info-panel">轨迹信息将显示在这里</div> |
|||
</div> |
|||
<div id="map"></div> |
|||
<div class="timeline" id="timeline"></div> |
|||
<script src="https://unpkg.com/ol@9.2.4/dist/ol.js"></script> |
|||
<script> |
|||
// 轨迹数据（示例数据 - 北京到天津的轨迹） |
|||
const trackData = [ |
|||
{ time: '09:00', lng: 116.404, lat: 39.915, speed: 60, name: '起点' }, |
|||
{ time: '09:15', lng: 116.704, lat: 39.915, speed: 65, name: '大兴区' }, |
|||
{ time: '09:30', lng: 116.904, lat: 39.815, speed: 70, name: '廊坊' }, |
|||
{ time: '09:45', lng: 117.204, lat: 39.715, speed: 75, name: '武清区' }, |
|||
{ time: '10:00', lng: 117.404, lat: 39.615, speed: 80, name: '天津市区' } |
|||
] |
|||
|
|||
// 全局变量 |
|||
let map, trackSource, trackPlayer |
|||
|
|||
// 初始化地图 |
|||
function initMap() { |
|||
const source = new ol.source.XYZ({ |
|||
url: 'http://qtbj.icpcdev.site/roadmap/{z}/{x}/{y}.png', |
|||
maxZoom: 16, |
|||
minZoom: 10 |
|||
}) |
|||
|
|||
map = new ol.Map({ |
|||
target: 'map', |
|||
layers: [ |
|||
new ol.layer.Tile({ |
|||
source: source |
|||
}) |
|||
], |
|||
view: new ol.View({ |
|||
center: ol.proj.fromLonLat([116.404, 39.915]), |
|||
zoom: 10 |
|||
}) |
|||
}) |
|||
|
|||
// 创建轨迹图层 |
|||
trackSource = new ol.source.Vector() |
|||
const trackLayer = new ol.layer.Vector({ |
|||
source: trackSource, |
|||
style: function (feature) { |
|||
const type = feature.get('type') |
|||
if (type === 'track-line') { |
|||
return new ol.style.Style({ |
|||
stroke: new ol.style.Stroke({ |
|||
color: '#1890FF', |
|||
width: 4, |
|||
lineDash: [5, 5] |
|||
}) |
|||
}) |
|||
} else if (type === 'track-point') { |
|||
const speed = feature.get('speed') |
|||
return new ol.style.Style({ |
|||
image: new ol.style.Circle({ |
|||
radius: 6, |
|||
fill: new ol.style.Fill({ |
|||
color: speed > 70 ? '#FF4D4F' : '#52C41A' |
|||
}), |
|||
stroke: new ol.style.Stroke({ |
|||
color: 'white', |
|||
width: 2 |
|||
}) |
|||
}), |
|||
text: new ol.style.Text({ |
|||
text: feature.get('name') || feature.get('time'), |
|||
offsetY: -15, |
|||
fill: new ol.style.Fill({ color: '#000' }), |
|||
stroke: new ol.style.Stroke({ color: '#fff', width: 3 }) |
|||
}) |
|||
}) |
|||
} else if (type === 'moving-point') { |
|||
return new ol.style.Style({ |
|||
image: new ol.style.Circle({ |
|||
radius: 10, |
|||
fill: new ol.style.Fill({ color: '#FAAD14' }), |
|||
stroke: new ol.style.Stroke({ |
|||
color: 'white', |
|||
width: 3 |
|||
}) |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
map.addLayer(trackLayer) |
|||
} |
|||
|
|||
// 轨迹播放器类 |
|||
class TrackPlayer { |
|||
constructor(trackData, source, map) { |
|||
this.trackData = trackData |
|||
this.source = source |
|||
this.map = map |
|||
this.currentIndex = 0 |
|||
this.isPlaying = false |
|||
this.animationId = null |
|||
this.movingPoint = null |
|||
|
|||
this.initMovingPoint() |
|||
this.createTimeline() |
|||
} |
|||
|
|||
// 初始化移动点 |
|||
initMovingPoint() { |
|||
this.movingPoint = new ol.Feature({ |
|||
geometry: new ol.geom.Point( |
|||
ol.proj.fromLonLat([this.trackData[0].lng, this.trackData[0].lat]) |
|||
), |
|||
type: 'moving-point' |
|||
}) |
|||
this.source.addFeature(this.movingPoint) |
|||
} |
|||
|
|||
// 创建时间轴 |
|||
createTimeline() { |
|||
const timeline = document.getElementById('timeline') |
|||
timeline.innerHTML = '' |
|||
|
|||
this.trackData.forEach((point, index) => { |
|||
const pointElement = document.createElement('div') |
|||
pointElement.className = 'timeline-point' |
|||
pointElement.innerHTML = ` |
|||
<div>${point.time}</div> |
|||
<div>${point.name}</div> |
|||
` |
|||
pointElement.addEventListener('click', () => { |
|||
this.jumpToPoint(index) |
|||
}) |
|||
timeline.appendChild(pointElement) |
|||
}) |
|||
} |
|||
|
|||
// 播放轨迹 |
|||
play() { |
|||
if (this.isPlaying) return |
|||
this.isPlaying = true |
|||
this.currentIndex = 0 |
|||
this.updateTimeline() |
|||
this.animate() |
|||
} |
|||
|
|||
// 暂停播放 |
|||
pause() { |
|||
this.isPlaying = false |
|||
if (this.animationId) { |
|||
cancelAnimationFrame(this.animationId) |
|||
} |
|||
} |
|||
|
|||
// 跳转到指定点 |
|||
jumpToPoint(index) { |
|||
this.pause() |
|||
this.currentIndex = Math.max(0, Math.min(index, this.trackData.length - 1)) |
|||
this.updateMovingPoint() |
|||
this.updateTimeline() |
|||
} |
|||
|
|||
// 动画循环 |
|||
animate() { |
|||
if (!this.isPlaying || this.currentIndex >= this.trackData.length - 1) { |
|||
this.isPlaying = false |
|||
this.updateInfo('轨迹播放完成') |
|||
return |
|||
} |
|||
|
|||
const start = this.trackData[this.currentIndex] |
|||
const end = this.trackData[this.currentIndex + 1] |
|||
this.moveToNextPoint(start, end, 0, 1500) // 1.5秒移动到下一点 |
|||
} |
|||
|
|||
// 移动到下一点 |
|||
moveToNextPoint(start, end, progress, duration) { |
|||
if (!this.isPlaying) return |
|||
|
|||
if (progress >= 1) { |
|||
this.currentIndex++ |
|||
this.updateTimeline() |
|||
this.animate() |
|||
return |
|||
} |
|||
|
|||
// 计算插值坐标 |
|||
const lng = start.lng + (end.lng - start.lng) * progress |
|||
const lat = start.lat + (end.lat - start.lat) * progress |
|||
|
|||
// 更新移动点位置 |
|||
this.movingPoint.getGeometry().setCoordinates(ol.proj.fromLonLat([lng, lat])) |
|||
|
|||
// 更新信息面板 |
|||
this.updateInfo(end, progress) |
|||
|
|||
// 平滑跟随移动点 |
|||
if (progress > 0.3) { |
|||
// 延迟一点开始跟随 |
|||
this.map.getView().animate({ |
|||
center: ol.proj.fromLonLat([lng, lat]), |
|||
duration: 200, |
|||
easing: ol.easing.linear |
|||
}) |
|||
} |
|||
|
|||
// 继续动画 |
|||
progress += 16 / duration // 基于60fps |
|||
this.animationId = requestAnimationFrame(() => { |
|||
this.moveToNextPoint(start, end, progress, duration) |
|||
}) |
|||
} |
|||
|
|||
// 更新移动点位置（直接跳转） |
|||
updateMovingPoint() { |
|||
const point = this.trackData[this.currentIndex] |
|||
this.movingPoint.getGeometry().setCoordinates(ol.proj.fromLonLat([point.lng, point.lat])) |
|||
|
|||
this.map.getView().animate({ |
|||
center: ol.proj.fromLonLat([point.lng, point.lat]), |
|||
zoom: 14, |
|||
duration: 500 |
|||
}) |
|||
} |
|||
|
|||
// 更新信息面板 |
|||
updateInfo(point, progress) { |
|||
const progressText = progress ? `进度: ${Math.round(progress * 100)}%` : '' |
|||
document.getElementById('info-panel').innerHTML = ` |
|||
<div><strong>当前位置:</strong> ${point.name}</div> |
|||
<div><strong>时间:</strong> ${point.time}</div> |
|||
<div><strong>速度:</strong> ${point.speed} km/h</div> |
|||
<div><strong>${progressText}</strong></div> |
|||
` |
|||
} |
|||
|
|||
// 更新时间轴高亮 |
|||
updateTimeline() { |
|||
const points = document.querySelectorAll('.timeline-point') |
|||
points.forEach((point, index) => { |
|||
point.classList.toggle('active', index === this.currentIndex) |
|||
}) |
|||
} |
|||
|
|||
// 重置轨迹 |
|||
reset() { |
|||
this.pause() |
|||
this.currentIndex = 0 |
|||
this.updateMovingPoint() |
|||
this.updateTimeline() |
|||
this.updateInfo(this.trackData[0], 0) |
|||
} |
|||
} |
|||
|
|||
// 添加轨迹到地图 |
|||
function addTrackToMap() { |
|||
// 清空现有轨迹 |
|||
trackSource.clear() |
|||
|
|||
// 添加轨迹点 |
|||
trackData.forEach((point, index) => { |
|||
const feature = new ol.Feature({ |
|||
geometry: new ol.geom.Point(ol.proj.fromLonLat([point.lng, point.lat])), |
|||
type: 'track-point', |
|||
time: point.time, |
|||
speed: point.speed, |
|||
name: point.name, |
|||
index: index |
|||
}) |
|||
trackSource.addFeature(feature) |
|||
}) |
|||
|
|||
// 添加轨迹线 |
|||
const lineCoords = trackData.map((p) => ol.proj.fromLonLat([p.lng, p.lat])) |
|||
const lineFeature = new ol.Feature({ |
|||
geometry: new ol.geom.LineString(lineCoords), |
|||
type: 'track-line' |
|||
}) |
|||
trackSource.addFeature(lineFeature) |
|||
|
|||
// 自适应缩放 |
|||
const extent = trackSource.getExtent() |
|||
map.getView().fit(extent, { |
|||
padding: [50, 50, 50, 50], |
|||
duration: 1000 |
|||
}) |
|||
|
|||
// 初始化播放器 |
|||
trackPlayer = new TrackPlayer(trackData, trackSource, map) |
|||
} |
|||
|
|||
// 页面加载完成后初始化 |
|||
document.addEventListener('DOMContentLoaded', function () { |
|||
// 初始化地图 |
|||
initMap() |
|||
|
|||
// 绑定按钮事件 |
|||
// document.getElementById('btn-add-track').addEventListener('click', addTrackToMap); |
|||
document.getElementById('btn-play').addEventListener('click', function () { |
|||
if (trackPlayer) trackPlayer.play() |
|||
}) |
|||
|
|||
// document.getElementById('btn-play') |
|||
// document.getElementById('btn-pause').addEventListener('click', function() { |
|||
// if (trackPlayer) trackPlayer.pause(); |
|||
// }); |
|||
// document.getElementById('btn-reset').addEventListener('click', function() { |
|||
// if (trackPlayer) trackPlayer.reset(); |
|||
// }); |
|||
// document.getElementById('btn-clear').addEventListener('click', function() { |
|||
// trackSource.clear(); |
|||
// document.getElementById('timeline').innerHTML = ''; |
|||
// document.getElementById('info-panel').innerHTML = '轨迹已清空'; |
|||
// }); |
|||
// trackPlayer.play(); |
|||
// 页面加载后自动添加示例轨迹 |
|||
setTimeout(addTrackToMap, 1500) |
|||
}) |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue