经纬志
首页 / OpenLayers / 使用示例

沿线参数过滤线段

把航线按累计长度切成小段,每一段记录起止参数 m,滑块只保留落在区间内的段,并按 m 值做颜色渐变。

OpenLayers 10.3.1 · 对应官方 filter-webgl-line.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

官方示例在 WebGL 渲染器里用 M 参数(沿线累计长度)逐像素过滤描边。Canvas 渲染器没有这个 逐像素能力,但可以把折线按等距参数切成小段,每段记录 m0、m1, 只保留与滑块区间相交的段,观感一致。

每段要素写入 m 属性,图层样式函数按 m 计算色相,于是保留部分从蓝色渐变到橙色, 状态栏同时给出保留段数与总段数。

操作结果
拖动起点、终点滑块只渲染区间内的线段
终点值小于起点值自动交换后渲染,状态栏按小到大显示
缩放地图线宽固定为屏幕像素,不随比例尺变化

WebGL 版本省掉了分段,由 GPU 按 m 过滤;数据量大时优势明显,小数据量下两种做法观感接近。