基于openlayers-timeline实现OpenLayers历史标记时间轴播放功能求助
实现方案
- 不用找旧的示例GeoJSON文件,直接把你现有的标记数据转成标准GeoJSON格式即可使用,转换后的结构参考如下:
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "marker1", "start": "2021-01-10T10:20:00Z", "end": "2021-01-10T10:48:00Z", "label": "Marker description" }, "geometry": { "type": "Point", "coordinates": [174.786132, -41.310110] } } ] }
注意:GeoJSON的点坐标顺序为
[经度, 纬度],不要和你现有数据的Lat/Lng顺序搞反,时间字段统一转成ISO 8601格式方便后续逻辑判断。
- 时间轴功能可以按如下逻辑实现:
- 先提取所有标记的最早开始时间、最晚结束时间作为滑块的默认可选范围,步长默认设置为5分钟,预留参数入口支持自定义调整步长
- 给滑块添加两种控制模式:手动拖拽调节、自动播放,自动播放时按当前设定的步长每次跳转对应时间跨度
- 新增图层过滤逻辑,每次滑块当前时间发生变动时,遍历所有GeoJSON要素,仅渲染满足
开始时间 ≤ 当前滑块时间 ≤ 结束时间的标记,其余时间范围外的标记直接隐藏
- 如果你要复用原时间轴组件,直接把转好的GeoJSON作为数据源传入即可,组件核心逻辑就是基于时间属性过滤要素,只要保证properties内的时间字段名和组件要求的参数对应上就能正常运行。
内容的提问来源于stack exchange,提问作者Supun Silva
相关产品推荐
相关产品推荐

