add Timeline

huiyan-fe · Aug 9, 2024 · 7e1ef79 · 7e1ef79
1 parent b6f13cc
commit 7e1ef79
Show file tree

Hide file tree

Showing 4 changed files with 589 additions and 0 deletions.
diff --git a/Timeline/README.md b/Timeline/README.md
@@ -0,0 +1,59 @@
+## Example
+```javascript
+    const marker = new BMapGL.Marker(new BMapGL.Point(116.404844, 39.921354));
+    map.addOverlay(marker);
+
+    const timeline = new Timeline({
+        map,
+        times: [
+            '2024-01-01',
+            '2024-01-02',
+            '2024-01-03',
+            '2024-01-04',
+        ]
+    });
+
+    const points = [
+        new BMapGL.Point(116.341028,39.94083),
+        new BMapGL.Point(116.308833,39.92224),
+        new BMapGL.Point(116.459461,39.854476),
+        new BMapGL.Point(116.430715,39.932863),
+    ];
+    let index = 0;
+
+    timeline.on('change', e => {
+        console.log(e);
+        marker.setPosition(points[index++]);
+    });
+```
+
+## Options
+| Name | Type  | Description |
+| :------------ |:---------------:| :-----------|
+| times | `string[]` | 时间数组 |
+| map | `BMap.Map` | 地图实例 |
+| customContainer | `HTMLElement` | 自定义容器 |
+| interval | `number` | 间隔时间，单位毫秒 |
+| playButton | `HTMLElement` | 播放按钮 |
+| pauseButton | `HTMLElement` | 暂停按钮 |
+| className | `string` | 自定义类名 |
+| progressButtonStyle | `object` | 进度按钮样式 |
+| scrollStyle | `object` | 滚动条样式 |
+| timeStyle | `object` | 时间样式 |
+| dividerStyle | `object` | 分割线样式 |
+
+## API
+| Name | Type  | Description |
+| :------------ |:---------------:| :-----------|
+| play | `Function` | 播放 |
+| pause | `Function` | 暂停 |
+| on | `Function` | 监听事件 |
+| un | `Function` | 取消监听事件 |
+| destroy | `Function` | 销毁实例 |
+
+## Events
+| Name | Description |
+| :------------ | :-----------|
+| change | 时间改变 |
+| playstart | 播放开始事件 |
+| playend | 播放结束事件 |
diff --git a/Timeline/examples/index.html b/Timeline/examples/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>bmap</title>
+        <link rel="stylesheet" href="../src/Timeline.css" />
+        <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&amp;ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
+        <script src="../src/Timeline.js"></script>
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+            }
+            #map {
+                width: 100%;
+                height: 500px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="map"></div>
+        <script>
+            // 百度地图API功能
+            var map = new BMapGL.Map('map', {
+                enableIconClick: true,
+                preserveDrawingBuffer: true,
+                maxZoom: 20,
+                // showControls: true
+                // mapType: 'B_NONE_MAP'
+                // skyColorStop: [[1, 1, 0, 1],[0, 0, 1, 1], [1, 0, 0, 1]]
+                // tilt: 45
+            }); // 创建Map实例
+
+            // console.log(map);
+            map.centerAndZoom(new BMapGL.Point(116.404844, 39.921354), 11); // 初始化地图,设置中心点坐标和地图级别
+            // map.setTilt(61);
+            // //添加地图类型控件
+            map.enableScrollWheelZoom(true);
+
+            map.addControl(new BMapGL.ZoomControl());
+
+            const marker = new BMapGL.Marker(new BMapGL.Point(116.404844, 39.921354));
+            map.addOverlay(marker);
+
+            const timeline = new Timeline({
+                map,
+                times: [
+                    '2024-01-01',
+                    '2024-01-02',
+                    '2024-01-03',
+                    '2024-01-04',
+                ]
+            });
+
+            const points = [
+                new BMapGL.Point(116.341028,39.94083),
+                new BMapGL.Point(116.308833,39.92224),
+                new BMapGL.Point(116.459461,39.854476),
+                new BMapGL.Point(116.430715,39.932863),
+            ];
+            let index = 0;
+
+            timeline.on('change', e => {
+                console.log(e);
+                marker.setPosition(points[index++]);
+            });
+
+        </script>
+    </body>
+</html>
diff --git a/Timeline/src/Timeline.css b/Timeline/src/Timeline.css
@@ -0,0 +1,80 @@
+.BMapGLLib-timeline {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    z-index: 66;
+    display: flex;
+    align-items: center;
+    height: 70px;
+    border-radius: 5px;
+    background-color: rgba(0, 0, 0, .5);
+    padding: 0 12px;
+    box-shadow: 1px 1px 3px 1px #cbcbcb;
+}
+
+.BMapGLLib-timeline-play {
+    color: #fff;
+    font-size: 16px;
+    margin-right: 8px;
+    cursor: pointer;
+}
+
+.BMapGLLib-timeline-main {
+    /* width: 500px; */
+    position: relative;
+    overflow: hidden;
+}
+
+.BMapGLLib-timeline-main ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    /* height: 40px; */
+}
+
+.BMapGLLib-timeline-main ul li {
+    position: relative;
+    font-size: 14px;
+    color: #fff;
+    text-align: center;
+}
+
+.BMapGLLib-timeline-main ul li span {
+    user-select: none;
+}
+
+.BMapGLLib-timeline-progress {
+    height: 10px;
+    width: 10px;
+    background-color: #fff;
+    border-radius: 5px;
+    cursor: pointer;
+    position: absolute;
+    left: 0;
+    top: 10px;
+}
+
+.BMapGLLib-time-item {
+    height: 10px;
+    margin-top: 10px;
+    background-color: #C1C3C6;
+    box-sizing: content-box;
+}
+
+.BMapGLLib-time-start {
+    border-radius: 5px 0 0 5px;
+}
+
+.BMapGLLib-time-end {
+    border-radius: 0 5px 5px 0;
+}
+
+.BMapGLLib-time-divider {
+    position: absolute;
+    top: 1px;
+    left: 50%;
+    width: 1px;
+    height: 19px;
+    background-color: #fff;
+}