首页 / OpenLayers / API 文档

VectorLayer

先看结论

矢量图层。用 Canvas 渲染点、线、面要素，样式可以是常量，也可以按要素属性动态计算。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.layer.Vector(options)

构造参数

参数	说明
`source`	`ol.source.Vector` 实例
`style`	样式对象或样式函数，函数签名 `(feature, resolution)`
`declutter`	是否自动避让文字与图标，默认 false
`renderBuffer`	渲染缓冲区像素，默认 100，减少拖动时的边缘缺失
`renderOrder`	要素绘制顺序，默认按加入顺序
`updateWhileAnimating`	动画期间是否重绘，开启更流畅但更耗性能
`updateWhileInteracting`	拖动期间是否重绘
`opacity` / `visible` / `zIndex`	与其他图层一致

常用方法

方法	说明
`getSource()` / `setSource(s)`	读写矢量数据源
`getStyle()` / `setStyle(style)`	读写图层样式
`changed()`	手动触发重绘，样式依赖的属性变化后调用
`setOpacity(o)`	整层透明度
`setVisible(v)`	显示与隐藏
`getFeatures(pixel)`	命中测试，返回像素附近的要素数组

var layer = new ol.layer.Vector({
  source: new ol.source.Vector({ features: features }),
  style: function (feature, resolution) {
    return new ol.style.Style({
      image: new ol.style.Circle({
        radius: 6,
        fill: new ol.style.Fill({ color: '#1f5fd0' })
      })
    });
  },
  declutter: true
});

样式优先级

同一个要素可能同时受到三层样式影响，优先级从高到低是：要素自身的 feature.setStyle()、图层构造参数里的 style、数据源上的 style。前面的命中后，后面的不再生效。

要素数量超过几千个时，Canvas 矢量图层的重绘会成为瓶颈。优先考虑 ol.layer.Heatmap、ol.source.Cluster，或改用 WebGL 渲染；确实要保留逐个要素样式时，减少样式函数的对象创建次数。

样式函数里的分辨率

第二个参数是当前分辨率，用来做分级显示。注意它在地图缩放过程中会连续变化，不是离散的缩放级别：

var styleFunction = function (feature, resolution) {
  var showLabel = resolution < 15;   // 约 14 级以上才显示标注
  return new ol.style.Style({
    image: new ol.style.Circle({ radius: 5 }),
    text: showLabel ? new ol.style.Text({ text: feature.get('name') }) : undefined
  });
};

引用本文

经纬志（2026）。《VectorLayer》。https://www.jingweizhi.com/openlayers/api/vector-layer.html（访问日期 2026-11-03）。