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

矢量样式化

同一个数据源里混放站点、路线和片区,靠 kind 属性让样式函数各画各的。 比起建三个图层,这种写法少一层图层管理,适合要素数量不多的场景。

OpenLayers 10.3.1 · 更新 2026-10-27
源码与运行效果
运行效果

说明

样式函数收到两个参数:要素和当前分辨率。示例按 kind 分支返回不同结构: 面返回两个 ol.style.Style(填充面和面中心文字), 线返回单个描边样式,点返回圆点加下方标注。

kind几何样式要点
zonePolygon低透明填充 + 实线边界 + 面内文字
routeLineString蓝色虚线描边,lineDash: [10, 6]
sitePoint红色圆点,白色描边,标注在下方

点和面的标注一个在上、一个居中,是为了避免互相遮挡。 文字的可读性主要靠 ol.style.Stroke 描边, 白色描边宽度 3 在深浅底图上都能辨认。

样式函数每次重绘都会执行。如果符号种类固定, 把创建好的 ol.style.Style 存进对象里按 kind 查表, 比每次 new 更快。示例为了可读性保留了即时创建。