ol-ext 上手实操手册：OpenLayers 地图扩展库核心能力拆解-育师

ol-ext 上手实操手册：OpenLayers 地图扩展库核心能力拆解

【免费下载链接】ol-extCool extensions for Openlayers (ol) - animated clusters, CSS popup, Font Awesome symbol renderer, charts for statistical map (pie/bar), layer switcher, wikipedia layer, animations, canvas filters.项目地址: https://gitcode.com/gh_mirrors/ol/ol-ext

ol-ext 是面向 OpenLayers 的地图扩展库，以 ES 模块方式提供一批即插即用的增强组件：动画集群图层、CSS 弹窗、图层切换器、三维渲染、等高线数据源、Canvas 滤镜和要素动画。本文按"安装 → 场景 → 组合"的使用流程，把其中四个高频场景拆给你看，每个场景都给出对应的源码位置和示例入口。

ol-ext 安装与引入

ol-ext 以 npm 包分发，ol是它的 peerDependency，需要自行安装。两种引入方式：

打包器项目（webpack / rollup）：安装后按模块路径 import；
普通网页：直接引用构建产物dist/ol-ext.js和dist/ol-ext.css，全局暴露ol命名空间扩展。

下面这段 import 完成"装依赖 + 引样式 + 按路径取控件"三件事：

npm install ol ol-ext // ol 是 peerDependency，需要一并安装 import "ol/ol.css" import "ol-ext/dist/ol-ext.css" import LayerSwitcher from "ol-ext/control/LayerSwitcher"

功能场景：从 ol-ext 图层切换器到等高线

场景	关键类	源码入口
ol-ext 图层切换器	`ol.control.LayerSwitcher`	`src/control/LayerSwitcher.js`
ol-ext 集群动画	`ol.layer.AnimatedCluster`	`src/layer/AnimatedCluster.js`
ol-ext 三维地图	`ol.render3D`	`src/layer/Render3D.js`
ol-ext 等高线	`ol.source.Contour`	`src/source/Contour.js`

ol-ext 图层切换器怎么配

什么时候用它：图层超过两三个，用户需要随时开关或调透明度时。它是图层的总开关面板，每个图层一行，带勾选框和透明度滑条。

要点：

图层通过name（或title）属性在面板中显示；
设置displayInLayerSwitcher: false的图层不会出现在面板里；
传extent: true可把图层范围显示进面板，便于管理范围有限的专题层。

下面这段代码完成"创建切换器控件并挂到地图"：

// 图层总开关：按 name/title 生成条目，自带透明度滑条 map.addControl(new ol.control.LayerSwitcher({ extent: true }))

完整用法可看示例examples/layer/map.switcher.html，实现源码在 src/control/LayerSwitcher.js。

ol-ext 集群动画怎么实现

什么时候用它：大量点位在缩放过程中频繁聚散，原生 Cluster 的"跳变"观感差时。AnimatedCluster 让缩放时的聚合与散开走过渡动画，点位像被吸进或弹出圆点。

要点：

它继承ol.layer.Vector，直接接收标准ol.source.Cluster，不用改数据；
animationDuration控制动画时长（毫秒），设为 0 即退化为普通集群层；
超过 1000 个集群时自动跳过动画，源码里已有这层保护（见 src/layer/AnimatedCluster.js）。

下面这段代码完成"带 700ms 过渡的集群层 + 点击展开选中集群"：

var cluster = new ol.source.Cluster({ distance: 40, source: new ol.source.Vector() }) var layer = new ol.layer.AnimatedCluster({ source: cluster, animationDuration: 700, style: getStyle }) map.addLayer(layer) // 点击集群：弹簧式散开，散开后的点可单独选中 map.addInteraction(new ol.interaction.SelectCluster({ pointRadius: 7, animate: true }))

示例见 examples/animation/map.animatedcluster.html。

ol-ext 三维地图怎么搭

什么时候用它：建筑、树冠等面状要素需要立体感时。render3D 不是换引擎，而是给现有矢量图层挂一个 2.5D 后处理渲染器，在postcompose阶段沿屏幕中心外推高度画出"墙体"。

要点：

height支持属性名、固定数值或函数，defaultHeight作为缺省高度；
maxResolution控制从哪个缩放级别开始出三维效果，远处自动变回平面；
调用animate({ height })可以做楼群从地面"生长"出来的动画。

下面这段代码完成"矢量层挂载三维渲染器并播放生长动画"：

var buildings = new ol.layer.Vector({ source: ignfSource, maxResolution: 2 }) map.addLayer(buildings) var r3D = new ol.render3D({ height: "HAUTEUR", // 从要素属性取高度 defaultHeight: 3.5, maxResolution: 0.6 }) buildings.setRender3D(r3D) r3D.animate({ height: "HAUTEUR", duration: 1000 })

示例见 examples/map/map.layer.3D.html，渲染器实现位于 src/layer/Render3D.js。

ol-ext 等高线效果实现

什么时候用它：手里有规则网格数据（DEM、栅格采样值），需要在矢量图层上画等值线或分级填色时。ol.source.Contour 基于 d3-contour 算法，把{x, y, z}网格切成一系列带value属性的多边形要素。

要点：

输入是{x, y, z}三维矩阵，坐标按 EPSG:4326 处理，null视为无数据；
thresholds传等级数，直接透传给 d3-contour，调它即可增减等高线密度；
依赖 d3-contour：模块项目建议 importd3-contour并通过factory传入，浏览器全局环境需先引入 d3。

下面这段代码完成"网格数据 → 等高线数据源 → 分级填色矢量层"：

var source = new ol.source.Contour({ factory: d3.contours, data: grid, // { x: number[][], y: number[][], z: number[][] } thresholds: 6 // 等高线等级数 }) var contourLayer = new ol.layer.Vector({ source: source, style: f => { var v = Number(f.get("value")) return new ol.style.Style({ fill: new ol.style.Fill({ color: v > 12 ? "#67001f" : "#eaf1f5" }) }) } }) map.addLayer(contourLayer)

示例见 examples/layer/map.source.contour.html。

组合示例：历史影像叠加 + 图层切换

把 GeoImage 地理配准、要素动画和图层切换器串起来：一张老航拍图叠在现代底图上，用户可随时开关影像、调整透明度，同时点要素做弹入动画。这段代码完成整个场景的装配：

// 1) 老航拍图地理配准成图层 var photo = new ol.layer.GeoImage({ name: "1976 航拍", opacity: 0.7, source: new ol.source.GeoImage({ url: "photo.jpg", imageCenter: [274764, 6243935], // 中心坐标 imageScale: [0.589, 0.597], // 单位长度 imageRotate: 0.13, // 旋转角（弧度） projection: "EPSG:3857" }) }) // 2) 点要素弹入动画 var dots = new ol.layer.Vector({ source: vectorSource }) dots.addAnimation("Show") // 3) 总开关挂上地图 map.addControl(new ol.control.LayerSwitcher()) map.addLayer(photo) map.addLayer(dots)

三个能力各自独立，组合起来就是一个带历史对比和交互反馈的小应用。

ol-ext 使用建议

性能：集群动画在超过约 1000 个集群时会跳过动画；三维渲染建议设置maxResolution限缩生效范围。
兼容：ol-ext 运行在现代浏览器（支持 HTML5 / ES5+）；旧浏览器需为 OpenLayers 补requestAnimationFrame等 polyfill。
依赖：等高线数据源依赖 d3-contour，模块环境下用factory参数显式传入。
样式：ol-ext.css 类名集中定义，若与全局样式冲突，可在组件className上做局部覆盖。