Skip to content

新增Swipe/Timeline/TrackAnimation #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Junior2Ran merged 3 commits into from
Apr 10, 2026
Merged

新增Swipe/Timeline/TrackAnimation #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2035750
新增Swipe/Timeline/TrackAnimation
Apr 9, 2026
bad0915
更新README
Apr 9, 2026
e4df4fb
更新README
Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,3 +238,54 @@
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/'>类参考</a>
</td>
</table>


轨迹动画（TrackAnimation）
---------
<table>
<tr>
<td width='250'>
<img src='./images/TrackAnimation.png' width='250' />
</td>
<td width = '600'>
　　TrackAnimation类提供视角轨迹动画展示效果。<br/><br/>
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/demo/TrackAnimation/TrackAnimation.html'>轨迹动画示例</a><br/>
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/src/TrackAnimation/TrackAnimation.js'>源码</a>　　
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/src/TrackAnimation/TrackAnimation.min.js'>压缩源码</a>　　
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/'>类参考</a>
</td>
</table>

时间轴（Timeline）
---------
<table>
<tr>
<td width='250'>
<img src='./images/Timeline.png' width='250' />
</td>
<td width = '600'>
　　Timeline 提供时间轴控件能力，可播放/暂停，方便结合地图做时序数据展示。<br/><br/>
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/demo/Timeline/Timeline.html'>时间轴示例</a><br/>
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/src/Timeline/Timeline.js'>源码</a>　　
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/src/Timeline/Timeline.min.js'>压缩源码</a>　　
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/src/Timeline/Timeline.css'>样式</a>　　
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/'>类参考</a>
</td>
</table>

卷帘对比（Swipe）
---------
<table>
<tr>
<td width='250'>
<img src='./images/Swipe.png' width='250' />
</td>
<td width = '600'>
　　Swipe 用于叠加两张地图并通过拖拽中线实现左右卷帘对比。<br/><br/>
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/demo/Swipe/Swipe.html'>卷帘对比示例</a><br/>
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/src/Swipe/Swipe.js'>源码</a>　
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/src/Swipe/Swipe.min.js'>压缩源码</a>　　
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/src/Swipe/Swipe.css'>样式</a>
<a target = '_blank' href = 'http://huiyan-fe.github.io/BMap-JavaScript-library/'>类参考</a>
</td>
</table>
71 changes: 71 additions & 0 deletions demo/Swipe/Swipe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Swipe</title>
<!-- 引入样式配置文件 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<link rel="stylesheet" href="../../src/Swipe/Swipe.css" />
<script src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script src="../../src/Swipe/Swipe.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#wrapper {
position: relative;
width: 100%;
height: 100%;
}

/* 两张地图必须叠放在同一容器内 */
#map,
#map2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="map"></div>
<div id="map2"></div>
</div>
<script>
var map = new BMap.Map('map', {
enableIconClick: true,
preserveDrawingBuffer: true,
maxZoom: 20,
});
map.enableScrollWheelZoom(true);
map.centerAndZoom(new BMap.Point(116.404844, 39.921354), 11);

var map2 = new BMap.Map('map2', {
enableIconClick: true,
preserveDrawingBuffer: true,
maxZoom: 20,
});
map2.enableScrollWheelZoom(true);
map2.centerAndZoom(new BMap.Point(116.404844, 39.921354), 11);
map2.setMapStyleV2({
styleJson: darkStyle
});

new BMapLib.Swipe(map, map2, document.getElementById('wrapper'));
</script>
</body>
</html>

67 changes: 67 additions & 0 deletions demo/Timeline/Timeline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Timeline</title>
<link rel="stylesheet" href="../../src/Timeline/Timeline.css" />
<script src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script src="../../src/Timeline/Timeline.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>

<body>
<div id="map"></div>
<script>
var map = new BMap.Map('map', {
enableIconClick: true,
preserveDrawingBuffer: true,
maxZoom: 20,
});
map.centerAndZoom(new BMap.Point(116.404844, 39.921354), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);

const marker = new BMap.Marker(new BMap.Point(116.404844, 39.921354));
map.addOverlay(marker);

const times = [
'2024-01-01',
'2024-01-02',
'2024-01-03',
'2024-01-04',
];
const timeline = new BMapLib.Timeline({
map,
times,
});

const points = [
new BMap.Point(116.341028,39.94083),
new BMap.Point(116.308833,39.92224),
new BMap.Point(116.459461,39.854476),
new BMap.Point(116.430715,39.932863),
];
timeline.on('change', function (e) {
const idx = times.indexOf(e.time);
const point = points[idx];
if (point) {
marker.setPosition(point);
}
});

</script>
</body>
</html>
65 changes: 65 additions & 0 deletions demo/TrackAnimation/TrackAnimation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轨迹播放</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script type="text/javascript" src="../../src/TrackAnimation/TrackAnimation.js"></script>
<style>
body { font-family: Arial, "Microsoft YaHei"; }
#container { width: 680px; height: 420px; border: 1px solid #cfcfcf; }
.bar { margin-top: 10px; }
.bar button { margin-right: 8px; }
.bar input { width: 70px; }
.hint { color: #666; font-size: 12px; margin-left: 6px; }
</style>
</head>
<body>
<div id="container"></div>
<div class="bar">
<button onclick="ta.start()">开始</button>
<button onclick="ta.pause()">暂停</button>
<button onclick="ta.continue()">继续</button>
<button onclick="ta.cancel()">取消</button>
<span style="margin-left: 10px;">速度：</span>
<button onclick="setSpeed(0.5)">0.5x</button>
<button onclick="setSpeed(1)">1x</button>
<button onclick="setSpeed(2)">2x</button>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
map.enableScrollWheelZoom();

// 示例路径（北京附近折线）
var path = [
new BMap.Point(116.404, 39.915),
new BMap.Point(116.414, 39.920),
new BMap.Point(116.424, 39.912),
new BMap.Point(116.436, 39.905),
new BMap.Point(116.450, 39.910)
];

var polyline = new BMap.Polyline(path, {strokeColor: "#1a73e8", strokeWeight: 4, strokeOpacity: 0.9});
map.addOverlay(polyline);
map.setViewport(path);

var ta = new BMapLib.TrackAnimation(map, polyline, {
duration: 8000, // 动画总时长（ms）：轨迹从起点“画到终点”耗时
delay: 0, // 延迟开始（ms）
followView: true, // 播放中是否跟随当前轨迹点移动视口
followViewSmoothing: 1, // 跟随平滑系数（0~1）
followViewEdgePadding: 0.3, // 触发跟随的留白比例（0~1）
overallView: true, // 播放结束后是否 setViewport 展示整条轨迹（播放中不做总览）
onAnimateEnd: function() {
console.log("end");
}
});

function setSpeed(x) {
ta.setSpeed(x);
}
</script>

Binary file added images/Swipe.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/Timeline.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/TrackAnimation.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions src/Swipe/Swipe.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading