首页 / OpenLayers / 使用示例
WebGL 矢量瓦片
按 z/x/y 生成的瓦片要素合并成 WebGL 矢量图层，颜色、线宽与高亮都由样式表达式控制。
源码与运行效果
说明
完整构建没有可直接实例化的 WebGL 矢量瓦片图层类；示例把页面内生成的瓦片要素解码后交给 ol.layer.WebGLVector，用同一套字面量样式批量绘制，等价于 WebGL 矢量瓦片渲染器的取数与着色流程。要素的 fillColor、strokeColor、strokeWidth 来自瓦片数据，悬停时通过 highlightedId 变量切换描边。
| 操作 | 结果 |
|---|---|
| 悬停到区块上 | 描边变白加粗，顶部显示所属瓦片编号 |
| 缩放地图 | 按新层级重新生成瓦片要素，颜色与线宽保持不变 |
| 拖动地图 | 要素一次性上传 GPU，平移时持续批量绘制 |
要素合并后一次上传 GPU，适合中等规模的瓦片数据；数据量再大时应改用流式矢量瓦片渲染器，按瓦片增量上传。