首页 / OpenLayers / 使用示例
矢量样式化
同一个数据源里混放站点、路线和片区,靠 kind 属性让样式函数各画各的。
比起建三个图层,这种写法少一层图层管理,适合要素数量不多的场景。
源码与运行效果
说明
样式函数收到两个参数:要素和当前分辨率。示例按 kind 分支返回不同结构:
面返回两个 ol.style.Style(填充面和面中心文字),
线返回单个描边样式,点返回圆点加下方标注。
| kind | 几何 | 样式要点 |
|---|---|---|
zone | Polygon | 低透明填充 + 实线边界 + 面内文字 |
route | LineString | 蓝色虚线描边,lineDash: [10, 6] |
site | Point | 红色圆点,白色描边,标注在下方 |
点和面的标注一个在上、一个居中,是为了避免互相遮挡。
文字的可读性主要靠 ol.style.Stroke 描边,
白色描边宽度 3 在深浅底图上都能辨认。
样式函数每次重绘都会执行。如果符号种类固定,
把创建好的 ol.style.Style 存进对象里按 kind 查表,
比每次 new 更快。示例为了可读性保留了即时创建。