首页 / OpenLayers / 使用示例
沿线参数过滤线段
把航线按累计长度切成小段,每一段记录起止参数 m,滑块只保留落在区间内的段,并按 m 值做颜色渐变。
源码与运行效果
说明
官方示例在 WebGL 渲染器里用 M 参数(沿线累计长度)逐像素过滤描边。Canvas 渲染器没有这个
逐像素能力,但可以把折线按等距参数切成小段,每段记录 m0、m1,
只保留与滑块区间相交的段,观感一致。
每段要素写入 m 属性,图层样式函数按 m 计算色相,于是保留部分从蓝色渐变到橙色,
状态栏同时给出保留段数与总段数。
| 操作 | 结果 |
|---|---|
| 拖动起点、终点滑块 | 只渲染区间内的线段 |
| 终点值小于起点值 | 自动交换后渲染,状态栏按小到大显示 |
| 缩放地图 | 线宽固定为屏幕像素,不随比例尺变化 |
WebGL 版本省掉了分段,由 GPU 按 m 过滤;数据量大时优势明显,小数据量下两种做法观感接近。