OpenLayers

无障碍地图

地图容器可以获得键盘焦点，方向键平移、加减号缩放，视图变化通过 aria-live 区域播报，读屏软件能够读出当前中…

查看示例

逐帧动画图标

用 canvas 生成 8 帧光点图标，定时替换要素样式形成循环动画，图标保持屏幕像素尺寸，缩放地图不影响节奏。

查看示例

视图动画

从北京飞到上海，中间抬起高度再落下，比直线平移更有空间感。 view.animate 接受多段配置，按顺序播放。

查看示例

影像服务图层

一张带图廓、图例与比例尺的成品图，用 Image 图层叠在底图上并按透明度配准。

查看示例

瓦片网格与 ArcGIS REST

按 z/x/y 定位瓦片，理解瓦片网格是怎么把一张张图片拼成地图的。

查看示例

面积测量

平面几何面积在 3857 下会随纬度放大，用 ol.sphere.getArea 才能贴近真实面积。

查看示例

数据源版权标注

底图数据都有署名要求，attributions 参数配合版权控件，把来源信息固定在地图角落。

查看示例

版权信息与自动折叠

数据源与图层各自声明版权文字，Attribution 控件合并显示，并随地图宽度自动收起或展开。

查看示例

订阅式商业底图接入

用 URL 模板加参数的方式封装 ol.source.XYZ，切换叠加层与透明度，同一结构可直接替换成 Azure…

查看示例

带图层的二维地图

瓦片底图叠一个矢量图层，可以单独开关矢量层，点击地图实时读出经纬度。

查看示例

Bing 影像集与 quadkey

Bing 的瓦片用 quadkey 寻址，把 z/x/y 按位交织成一个只含 0~3 的字符串。

查看示例

框选要素

按住 Shift 拉一个矩形，范围内所有点位一次性选中并变色，比逐个点击高效。

查看示例

框选要素

按住 Shift 拖出矩形，DragBox 的结束事件拿到范围，再用要素源的 getFeaturesInExtent…

查看示例

控件按钮提示文本

改写缩放按钮的 title 与 aria-label，再挂一层自定义悬浮提示，鼠标停靠与键盘聚焦都能看到说明。

查看示例

Canvas 渐变与图案填充

填充色不必是纯色，渐变对象和平铺图案都能直接交给样式使用。

查看示例

Canvas 瓦片

用 TileImage 的 tileUrlFunction 现场生成 256 × 256 的 canvas，把瓦片级…

查看示例

TMS 瓦片编号

同一个瓦片网格分别以上下两种原点建立，切换后可以看到 y 的行号方向相反，编号直接画在瓦片上。

查看示例

替换底图瓦片源

两个 XYZ 瓦片源共用同一套 OSM 瓦片地址，用图层 className 加 CSS 滤镜做出灰度底图，单选切换…

查看示例

把要素固定在指定像素位置

把中心点计算转换为「要素坐标 + 像素偏移 × 分辨率」，选中的城市会被钉在十字圈所在的像素上。

查看示例

Chaikin 曲线平滑

把折线的每个折角切掉一点，重复几次就得到顺滑曲线。

查看示例

点聚合

300 个点位在低缩放级别下会互相压盖。聚合把屏幕距离相近的点合并成一个圆， 圆上的数字就是被合并的数量，点进去还能…

查看示例

分级聚合

聚合点不只是把数字加起来，簇内要素数量可以驱动半径与配色，让密集程度一眼可见。

查看示例

动态聚合

聚合距离随缩放与滑块变化，点击聚合点放大到其覆盖范围。

查看示例

分层瓦片影像

把一张 1024 × 1024 的影像按金字塔切分：z0 一块顶层瓦片，z4 共 16 块，tileUrlFunct…

查看示例

从 Blob 挂载影像

用 canvas 生成 PNG 并转成 Blob，再通过 objectURL 交给 ImageStatic；释放 B…

查看示例

栅格颜色表映射

单波段数据本身只有灰度，颜色表决定它在屏幕上呈现的样子。

查看示例

自定义瓦片加载函数

接管 tileLoadFunction，自己决定何时把图片地址塞给瓦片，并统计请求次数、完成数量与平均耗时。

查看示例

栅格数学运算

逐像元做伽马校正与阈值分割，实时看到参数对画面影响。

查看示例

多源栅格运算

一个栅格源可以同时读多份数据，按波段做归一化植被指数。

查看示例

仿射参数与图像旋转

两个滑块对应仿射矩阵的 A、B 分量，图像按 atan2(B, A) 旋转、按向量长度缩放，同时画出变换后的覆盖范围…

查看示例

带概览层的影像

概览层常驻，全分辨率层在缩放到位后接入，形成先粗后细的加载顺序。

查看示例

影像投影识别

同一张影像分别按 EPSG:3857 与 EPSG:4326 计算范围并挂载，视图投影切换后仍落在同一片区域。

查看示例

影像金字塔

同一景影像准备三级分辨率，按分辨率区间自动切换，缩放时不再出现糊图。

查看示例

波段对比度拉伸

页面内生成 512 × 512 单波段数据，两个滑块控制最小值与最大值，拉伸后按灰度重新绘制影像。

查看示例

瓦片图层样式切换

同一份页面内生成的单波段数据，用灰度、伪彩、分级三种映射重绘，切换时替换 ImageStatic 的源。

查看示例

像素级颜色运算

取出影像的像素数组，按亮度、对比度、饱和度做矩阵运算，再写回 canvas 生成新的图层源。

查看示例

DEM 等高线渲染

灰度高程换算成海拔，按等高距分层设色，并在分层边界画出深色线。

查看示例

坐标系转换

瓦片用墨卡托、业务数据常用经纬度，转换函数必须成对使用；点击地图可同时看到四种结果。

查看示例

自定义符号渲染

不用 Circle 样式，改在 postrender 里按要素的像素位置画星形、六边形与齿轮，形状由单选切换。

查看示例

自定义控件

内置控件不够用时，继承 ol.control.Control 传入自己的 DOM 元素，即可得到一个随地图布局的按钮…

查看示例

自定义地图控件

继承 ol.control.Control，把显示缩放与中心坐标的面板挂到地图右上角，随视图变化更新。

查看示例

自定义命中检测

不依赖默认的几何命中，改用像素距离判定：移动鼠标时找最近的点，距离小于阈值就高亮，阈值用滑块调整。

查看示例

自定义交互

用 ol.interaction.Pointer 的三个回调实现「按住标记拖动」：按下时选中要素，拖动时改坐标，松开…

查看示例

图表与地图联动

下方用 canvas 画柱状图，悬停柱子高亮对应城市，点击柱子把地图动画到该城市，相当于图表与地图的双向联动。

查看示例

虚线样式

规划线路、临时边界常用虚线表达；lineDash 数组控制实线段与间隔的像素长度。

查看示例

从零生成数据瓦片

把一块范围均分成网格，每个格子生成一个数值并画成矢量瓦片，颜色由数值决定，层级滑块改变格子密度。

查看示例

符号与标签避让

密集点位同时显示符号和文字，开启 declutter 后重叠的标签自动隐藏，关闭后全部绘制、允许压盖。

查看示例

删除要素

编辑场景少不了删除：Select 收集选中要素，再逐个交给 source.removeFeature() 即可。

查看示例

设备方向与地图旋转

监听 deviceorientation 的 alpha 方位角，把地图旋转成朝向一致的方向；没有传感器时用滑块模拟…

查看示例

双击拖拽缩放

双击后不松手直接上下拖动，一个手势完成连续缩放。

查看示例

拖放加载数据

把本地 GeoJSON 文件拖进地图直接渲染，示例同时提供页面内生成的数据。

查看示例

拖放载入数据文件

DragAndDrop 交互挂上 GeoJSON 与 KML 两个解析器，拖入文件即上图并自动缩放到数据范围，另配内…

查看示例

拖放数据的瓦片预览

拖入数据后不仅上图，还按 z9 计算它覆盖的瓦片矩形，把瓦片编号标在图上，模拟矢量瓦片预览。

查看示例

拖放影像矢量渲染

拖入的要素放进影像矢量图层，要素多时用一次栅格化渲染换取流畅度。

查看示例

拖拽旋转并缩放

一个自定义交互同时承担旋转与缩放：横向拖动改变分辨率，纵向拖动改变地图角度。

查看示例

拖拽旋转缩放

按住修饰键拖拽，一次手势同时完成旋转与缩放，适合快速摆正倾斜的航拍底图方向。

查看示例

矩形缩放

拉一个矩形框，视图直接放大到框内范围；DragZoom 把拉框动作与缩放动画封装在一起。

查看示例

绘制交互

下拉框切换点、线、面三种绘制类型，勾选后可以拖动已有顶点修改形状。 绘制完成后状态栏会给出几何类型和顶点数量。

查看示例

绘制与修改要素

先画多边形，再用修改交互拖动折点，绘制与编辑共用同一个矢量源。

查看示例

绘制与修改大地圆

画圆时按球面公式重建外环，得到不受墨卡托形变影响的等距圆。

查看示例

绘制圆

以门店为中心画服务半径，用 Circle 类型拖拽即可，半径可直接从几何读取。

查看示例

绘制要素

切换点、线、面、圆四种绘制类型，所有几何写进同一个矢量源。

查看示例

绘制样式配置

绘制中的预览线与定稿后的样式分开配置，两套主题实时切换。

查看示例

自由手绘

指针移动即追加顶点，抬手结束整条线或整个面，不用逐点单击。

查看示例

绘制、追踪与吸附

沿已有边界描线并自动吸附折点，绘制、修改、捕捉三个交互协同工作。

查看示例

绘制规则图形

用 geometryFunction 把拖动半径转成正方形或正三角形，一次手势画出规则图形。

查看示例

动态数据

定时推进车辆位置并原地更新几何，观察矢量源在数据变化时的渲染行为。

查看示例

地震点聚合

把四百个震中按震级着色，聚合后按数量放大圆点并显示计数。

查看示例

自定义地震符号

用 Canvas 画出带十字准星的同心圆符号，按震级换色与尺寸。

查看示例

地理坐标编辑

在内置坐标下绘制与修改多边形，同时用经纬度列出每个顶点。

查看示例

EPSG:4326 视口

让视图直接以经纬度为单位工作，中心点与要素坐标都不再转换成米。

查看示例

EPSG:4326 视图

视图投影可以显式指定为 EPSG:4326，此时中心坐标直接写经纬度，不再需要 fromLonLat。

查看示例

Equal Earth 投影

用解析公式自建投影，GeoJSON 按经纬度读入后转入该投影，底图随视口重投影。

查看示例

自定义地图元素

把地图封装成自定义元素 ol-map-view，元素挂载时创建地图、卸载时释放 target，页面里只留一个标签。

查看示例

可聚焦的自定义地图元素

自定义元素加 tabindex 与 aria-label，进入页面即可用键盘平移缩放，并在状态区播报视图变化。

查看示例

导出图片

把当前视野连同矢量标注一起导出成 PNG。瓦片和要素分别渲染在不同的画布上， 需要按图层顺序合成到一张新画布。

查看示例

地图导出为 PDF

等所有瓦片画完再合成画布，加上标题条，交给浏览器打印成单页 PDF。

查看示例

受限地图范围

给 View 设置 extent 后，平移与缩放都会被夹在范围内；切到自由模式再飞出范围，对比两种行为。

查看示例

范围适配

加载业务数据后常要把视野对准数据范围，view.fit() 一步完成居中与缩放，还能留出内边距。

查看示例

范围交互

在地图上拖出一个矩形范围，实时读出它的经纬度边界。

查看示例

独立窗口地图

把同一个地图实例的目标容器换到新窗口，主窗口与之共享视图状态。

查看示例

自定义要素动画

在 requestAnimationFrame 循环里更新点与面的几何：标记绕中心画圆，面按同一角度旋转。

查看示例

要素增删事件

数据源是要素的容器，要素进出都会触发事件；监听它们就能把地图状态同步到列表或计数器。

查看示例

要素位移动画

让点要素沿路线移动，用线要素长度把进度换算成真实距离。

查看示例

按属性过滤点要素

用分组与数值条件筛选大量点位，只绘制命中的要素。

查看示例

沿线参数过滤线段

把航线按累计长度切成小段，每一段记录起止参数 m，滑块只保留落在区间内的段，并按 m 值做颜色渐变。

查看示例

飞行动画

飞机沿航线推进，视图跟随并留下逐渐延伸的尾迹。

查看示例

分段飞行动画

单段动画跨省移动会一路糊过去；拆成拉远、横移、放大三段，镜头节奏更接近地图应用的飞行效果。

查看示例

分形栅格渲染

在 Canvas 上算出曼德博集合，再作为单张影像源叠加到地图上。

查看示例

自由手绘

巡检轨迹、随手勾画不需要逐点点击；freehand 模式按住鼠标移动即可连续生成节点。

查看示例

全屏

右上角加一个全屏按钮，点击后地图铺满显示器。 进出全屏都会改变容器尺寸，状态栏会实时显示重算后的画布宽高。

查看示例

全屏控件

标准全屏控件与自定义按钮双向同步，地图容器随窗口尺寸重新布局。

查看示例

全屏拖拽旋转缩放

一次拖拽同时完成旋转与缩放，配合全屏控件做沉浸式查看。

查看示例

全屏指定元素

让全屏控件作用于整个工作区，而不只是地图画布，工具栏一起进入全屏。

查看示例

地理坐标显示

底图仍是墨卡托，但经纬网与鼠标位置统一按经纬度展示。

查看示例

GeoJSON 数据

一份内联 GeoJSON 同时包含点、线、面，按几何类型分派样式，点击弹出属性。

查看示例

GeoJSON 数据源标注

GeoJSON 里的经纬度直接喂给矢量源会错位，先交给 ol.format.GeoJSON 并指定目标投影，再交给…

查看示例

GeoJSON 矢量切片

三千多个格网要素按分辨率重绘，用分层配色模拟切片后的分级出图。

查看示例

浏览器定位

ol.Geolocation 封装了定位 API，位置变化事件可直接驱动地图标记与精度圈。

查看示例

定位与朝向

读取浏览器定位与设备朝向，把当前位置画成带方向箭头的标记。

查看示例

逐波段统计拉伸

三个波段各按自己的上下限做线性拉伸，滑块调整上限即可看清对比度变化。

查看示例

栅格重投影

影像声明为经纬度投影，在墨卡托视口下逐像素重采样，范围框显示形变方向。

查看示例

GeoZarr 指数图

三通道反射率现场合成归一化植被指数，按色带映射成连续的面状分布。

查看示例

GeoZarr 数据立方

同一块数据立方按波段切换渲染，不重新生成影像，只换读取通道与色带。

查看示例

GeoZarr 时间维度

滑块切换月份，按物候参数重建该期影像，色带固定便于横向对比。

查看示例

GeoZarr 多组数据

同一份数据挂两个图层，一组出真彩，一组只留云像元，开关组合出不同视图。

查看示例

稀疏观测与重采样

原始观测带条纹空洞，补齐数据连续出图，切换即可对比两种重采样结果。

查看示例

GeoZarr 事件叙事

同一区域三幅淹没范围不同的影像按事件阶段切换，配文字卡片说明。

查看示例

波段选择与对比度拉伸

页面内生成三个不同频率的标量场当作三个波段，下拉框切换真彩色、单波段与归一化差异三种显示方式。

查看示例

影像图层取值查询

影像没有属性表，点击取值靠坐标反算格网行列号。

查看示例

多图层像元查询

一次点击读回所有可见图层在同一位置的数值。

查看示例

瓦片像元查询

瓦片层的查询要先把坐标换成瓦片坐标，再换成瓦片内像素。

查看示例

另类瓦片源

用 XYZ 源完整展示地址模板、版权、跨域与加载函数四个参数，指向 OSM 瓦片。

查看示例

GPX 轨迹

解析页面内的 GPX 轨迹，画出路线、途经点并自动缩放到轨迹范围。

查看示例

经纬网格

在大范围地图上加经纬网，帮助定位经纬度区间。 网格间隔不是固定的，缩放时会按屏幕像素自动选择整度数。

查看示例

热力图

上千个点直接画成圆点会糊成一片，热力图按点密度着色，一眼看出聚集区域。 示例生成 1200 个带权重的采样点，两个滑…

查看示例

地震热力图

按震级加权生成热力层，模糊半径与影响半径都可以实时调节。

查看示例

热力渐变色

热力图默认从蓝过渡到红，往往和深色底图冲突；gradient 数组可以从头定义整条色带。

查看示例

热力图权重

每个点的强度不应相同：weight 函数读取属性，把业务数值映射成热力浓度。

查看示例

矢量命中检测

判断光标下有没有要素，容差决定小目标的命中难度。

查看示例

命中容差

把点击命中范围从精确像素放宽到十几像素，小目标也点得中。

查看示例

悬浮提示

ol.Overlay 把普通 DOM 挂在坐标上，鼠标划过的要素信息可以实时显示成气泡，不必点击。

查看示例

图标符号

用图标标注点位，锚点决定图标的哪一部分对准坐标。

查看示例

Canvas 图标符号

没有切图资源时，用 Canvas 画一个标记形状，导出成 data URL 即可作为图标样式使用。

查看示例

图标着色

同一套几何用色相滑块重新生成彩色图标，不依赖多张图片。

查看示例

图标反色处理

读取图标的像素数据逐通道取反，生成反色版本并即时替换。

查看示例

图标与文字缩放

一个缩放滑块同时控制图标与标注，对比不同比例下的可读性。

查看示例

精灵图标

三个符号排在一张 96×32 的贴图上，三千个点共用，靠 offset 与 size 取子图。

查看示例

图标尺寸控制

用 width 与 height 选项调整图标输出尺寸，锚点仍按比例对齐。

查看示例

IGC 飞行轨迹

解析滑翔伞日志里的 IGC 记录，得到一条带时间的飞行轨迹。

查看示例

IIIF 图像

把扫描件的像素范围对齐到地图坐标，放大到能看清竖排文字与朱印。

查看示例

影像滤镜

用 Canvas 2D 的 filter 与像素运算给影像换滤镜，叠加在地图上看效果。

查看示例

影像加载事件

监听影像源的开始、完成与失败事件，做一个可视化的加载状态条。

查看示例

影像与矢量叠加

一张静态影像加上矢量标注，范围对齐就能严丝合缝。

查看示例

立即渲染（地理坐标）

在 postrender 里直接拿渲染上下文画脉冲圆环，不经过图层与要素。

查看示例

几何缓冲

对多边形顶点做圆周采样再求凸包，得到向外扩张的缓冲区几何。

查看示例

键盘平移

无鼠标场景下靠方向键浏览地图，KeyboardPan 的 pixelDelta 决定每次按键移动的距离。

查看示例

KML 面状要素

解析内联 KML 中的园区边界与巡护路线，按几何类型分别着色。

查看示例

KML 地震数据

用 KML 格式解析内联的震中数据，坐标自动从经纬度转成墨卡托。

查看示例

KML 时区多边形

内联 KML 也能直接读，属性还能驱动着色。

查看示例

标注避让

点位密集时标注会互相压字，declutter: true 让渲染器自动丢弃重叠的文字，只保留可读的部分。

查看示例

图层裁剪

在渲染前给画布加一个圆形裁剪路径，让影像只显示指定区域。

查看示例

矢量图层裁剪

用画布路径保住一块区域，其余部分在绘制时被裁掉。

查看示例

限制图层范围

只渲染指定区域，范围外的数据即使存在也不绘制，虚线框标出当前边界。

查看示例

图层组批量控制

业务图层往往成组出现，把同一类图层收进数组，一次循环就能整体显隐，不必逐层去点复选框。

查看示例

图层透明度

两个配色不同的底图叠在一起，调上层透明度就是在两者之间做交叉溶解。 也可用来把专题图压暗，让下层的路网透出来。

查看示例

图层放大镜

在指针周围开一个圆窗，透过它看另一套配色的图层。

查看示例

图层卷帘对比

用一条分割线控制两套配色各显示一半，拖动滑块即可对比。

查看示例

图层切换

三套底图用单选按钮互斥切换，站点标注作为独立图层单独开关。 底图全部预加载在图层数组里，切换只改可见性，不销毁重建。

查看示例

图层叠放次序

三个交叉叠放的面图层，用下拉框改 zIndex，遮挡关系立即变化。

查看示例

图层缩放范围

区域、环路、城区三层各有一段可见级别，缩放时自动切换显示。

查看示例

延迟设置数据源

图层先挂到地图上，数据源在点击后才挂载，未挂载时图层不画任何内容。

查看示例

线段箭头

样式函数按线段中点生成三角符号，旋转角取该段方向，与线样式一起返回。

查看示例

线样式

七条折线并排，逐条更换宽度、端点、拐角与虚线数组，差异一眼可见。

查看示例

地图状态链接

把缩放与中心写进 URL 哈希，打开链接即可还原视角。

查看示例

加载事件与进度

瓦片与矢量源共用一个计数器和转圈指示器，在途请求一目了然。

查看示例

自定义 OSM 源

覆盖地址模板、版权、跨域与级别上限，把版权提示改为页面自绘。

查看示例

指针放大镜

独立小地图跟随指针，同步中心并把级别加三，局部细节即时放大。

查看示例

Mapbox 样式图层

把样式 JSON 里的图层数组编译成 OpenLayers 的图层与样式。

查看示例

样式表达式

interpolate 按属性插值颜色，step 按缩放级别分段换线宽。

查看示例

矢量瓦片图层

矢量瓦片的要素数组由加载函数给出，样式随便定。

查看示例

矢量瓦片分层渲染

一份瓦片源挂多个图层，各自决定显示范围与画法。

查看示例

自定义瓦片网格的矢量瓦片

瓦片网格由原点、分辨率序列与瓦片尺寸决定；把范围收窄到中国后，同一套 {z}/{x}/{y} 地址只会请求范围内的瓦…

查看示例

整幅影像图层

不走瓦片金字塔，一次取回整张图，缩放时由渲染器拉伸。

查看示例

标记脉冲动画

实时标记常用扩散光圈提示位置；每帧修改圆形样式的半径，就能得到呼吸般的脉冲。

查看示例

测量距离

沿着道路单击落点，鼠标旁的数字随移动实时变化，双击结束并给出总长度。 长度用球面公式计算，不受墨卡托投影在高纬度放大…

查看示例

测量样式

把长度和面积直接写进标注，绘制过程中实时更新。

查看示例

图层分辨率范围

按分辨率阈值自动显隐图层，放大出现细节、缩小只剩概览。

查看示例

最小缩放级别

视图边界会夹住所有来源的缩放请求，代码设置也不能越界。

查看示例

移动端全屏

地图铺满可视区域，用按钮进入系统全屏，去掉多余控件后触控区域更大。

查看示例

修改要素

拖动顶点改形状，拖动边中点插入新顶点。

查看示例

图标位置修改

用修改交互拖动图标，松手后读出新的经纬度并按朝向旋转图标。

查看示例

修改要素

已绘制或已加载的要素需要调整边界时，Modify 交互让顶点可拖拽，无需重新绘制整个面。

查看示例

要素缩放与旋转

几何自带 scale 与 rotate，锚点选对就不会跑位。

查看示例

修改交互反馈

编辑过程也有事件，可以用来做统计、校验和复位。

查看示例

坐标显示

鼠标移动时同时给出三种坐标：六位小数的经纬度、视图投影下的米制值、 以及度分秒格式。坐标系换算是这里唯一容易出错的地…

查看示例

视图移动结束

平移、缩放、旋转落定后都会触发一次，是最稳的读状态时机。

查看示例

多图层叠加

一张地图上同时放瓦片底图、矢量面和矢量点，按需开关叠加层。 这是大多数业务地图的起点：底图负责地理背景，叠加层负责业…

查看示例

多期栅格叠加

每期数据一个栅格源，各自着色后按顺序叠放。

查看示例

自定义导航控件

不继承也能加控件，一个 div 加几个按钮就够。

查看示例

数值数组瓦片

瓦片里装的不一定是图片，也可以是一段二进制数组。

查看示例

离屏画布图标

图标先在离屏画布画好，再转成位图交给样式使用。

查看示例

512 像素瓦片网格

瓦片边长改大，请求数变少但单次要传的内容更多。

查看示例

度制瓦片网格

以度为单位切块，网格原点和分辨率都和墨卡托不一样。

查看示例

OGC 矢量瓦片

矢量瓦片的关键是瓦片里装了要素，格式可以自己定。

查看示例

度制矢量瓦片网格

先按经纬度切块分配要素，再换算到视图投影渲染。

查看示例

OSM 矢量瓦片

同一份矢量数据可以渲染成任意风格，这是矢量瓦片的核心。

查看示例

浮层标记

DOM 元素钉在地图坐标上，视图一动它自己跟着走。

查看示例

鹰眼图

缩略图里画出当前视野框，点一下就能跳过去。

查看示例

鹰眼图

主图缩放到街区级别后，用户容易失去方位感。右上角的鹰眼图始终显示更大范围， 红框标出当前视野，拖动红框就能平移主图。

查看示例

自定义鹰眼图

OverviewMap 控件使用独立的图层实例、自定义标签与折叠按钮，与主图保持比例联动。

查看示例

页面滚动中的地图

地图别抢页面的滚轮，按住修饰键才缩放。

查看示例

平移动画

view.animate() 把中心点和层级变化交给缓动函数处理，跳转不再生硬。

查看示例

视图状态链接

把中心与级别写进地址栏，链接发出去就能还原视野。

查看示例

双指缩放

触屏手势由独立交互处理，可以单独取下再挂回。

查看示例

PMTiles 高程瓦片

高程数据不必整块下载：按当前视野逐像素取值着色，鼠标位置再反算一次海拔即可。

查看示例

PMTiles 影像瓦片

只要 tileUrlFunction 能按 z/x/y 返回一个图片地址，瓦片源就不关心数据来自归档还是即时绘制。

查看示例

面纹理填充

规划用地常用斜纹、网格区分性质；把 Canvas 图案塞进 ol.style.Fill，就能代替纯色色块。

查看示例

多边形与顶点样式

一个样式函数返回两个 Style：一个画面，另一个用 MultiPoint 几何单独画每个顶点。

查看示例

人口聚集地标注

点密度一高标注就会互相压盖，先按重要度分级，再交给 declutter 处理重叠。

查看示例

点击弹出信息框

弹出框不是地图元素，而是挂在 ol.Overlay 上的普通 DOM，位置跟着坐标走。

查看示例

瓦片预加载

preload 决定视野外提前准备几圈瓦片，值越大越顺滑，请求也越多。

查看示例

按比例尺出图

打印要求固定比例尺，先由比例尺算出 resolution，地图视野随之锁定。

查看示例

投影与比例

同一份数据在不同投影下，分辨率与单位的含义完全不同，先认清投影再谈比例。

查看示例

栅格影像运算

栅格运算的本质是同一位置上逐像素做代数，归一化差值最能直观看出差异。

查看示例

矩形框选

DragBox 交互负责拉框，框选结束后自己判断哪些要素落在范围里。

查看示例

区域生长

区域生长从一个种子出发，把数值相近的相邻像素并进来，直到边界明显变化为止。

查看示例

规则图形符号

点符号不必都画成圆：RegularShape 调几个参数就能得到成套图形符号。

查看示例

几何图形渲染

ol.render.toContext 把 OpenLayers 的绘制能力搬到任意 canvas 上，不经过地图也…

查看示例

GeoJSON 重投影

GeoJSON 存的是经纬度，地图用的是投影坐标，featureProjection 就是两者之间的桥。

查看示例

代码注册投影

没有现成的投影定义时，自己写正反算函数注册进 ol.proj，转换即可复用。

查看示例

单幅影像重投影

全球栅格在两种视口投影间切换，直观看到高纬度拉伸与格网弯曲。

查看示例

WGS84 视图

视图投影换成 EPSG:4326 后，视图中心就是经纬度，瓦片重投影交给渲染层。

查看示例

分辨率与缩放

层级只是分辨率的另一种写法；getResolutionForZoom 与 getZoomForResolution…

查看示例

复用数据源

源是数据，图层是画法，同一份源可以喂给多个图层，甚至多幅地图。

查看示例

富文本标注

标注不只是文字：字体、底色、描边、内边距组合起来，决定了它在底图上的可读性。

查看示例

旋转地图

沿道路方向看图时，旋转比平移更直观。滑块控制任意角度， 快捷按钮跳到直角，视图旋转变化时滑块也会自动回写。

查看示例

比例尺

左下角的条形比例尺随缩放自动换算刻度，状态栏同时给出分辨率、 比例分母和缩放级别，方便出图时核对比例。

查看示例

英制比例尺

比例尺刻度取决于单位制，投影用英尺时把控件切到 imperial 才对应。

查看示例

海平面上升

把高程与水位一比，低于水位的像素就是淹没区，阈值一动整幅图立刻变样。

查看示例

要素选中高亮

单击站点后放大显示并加上名称标签，选择集变化时实时更新状态栏。 Select 交互同时支持单击和拖拽框选，多选结果是…

查看示例

点选要素

ol.interaction.Select 自带选中集合，样式与数据读取都围绕这个集合展开。

查看示例

悬停高亮

悬停反馈不需要点击，pointermove 加一次命中检测就能实现。

查看示例

多选要素

多选的关键在 multi 与 condition：前者允许累加，后者决定点击是否进入选中集合。

查看示例

半透明图层

不透明度是图层属性，调一个图层不会连带改变其他图层。

查看示例

Sentinel Hub 影像

同一景影像换一组波段映射，就能读出植被、水体与建筑的不同特征。

查看示例

影像自定义脚本

服务端的 evalscript 本质是一段像素表达式，同样的逻辑放到浏览器里也能跑。

查看示例

按日期取影像

同一地点不同日期，影像的色调差别主要来自季节与云量。

查看示例

地形晕渲

晕渲就是把光源方向与地表法向量做一次点乘，坡度越陡明暗差越大。

查看示例

双图联动

联动不用共享视图对象，监听三个视图属性并互相赋值即可。

查看示例

最简地图

最小地图只需要三样东西：一个容器、一个视图、一个瓦片图层。

查看示例

绘制吸附

吸附让手绘的顶点精确落在已有线上，Snap 交互负责这件事。

查看示例

绘制捕捉

沿着已有道路或边界绘制时，顶点吸附能避免细小缝隙；Snap 与绘制交互可以同时启用。

查看示例

球面摩尔威投影

全球尺度上等积比等角更重要，Mollweide 用椭圆轮廓换取面积不失真。

查看示例

STAC 条目定位

STAC 条目给出 bbox 与 asset，两者合起来就能把一景影像放回它该在的位置。

查看示例

底图主题切换

主题底图的差异主要来自瓦片内容，请求地址里同时写着主题名与 Key。

查看示例

风格化底图

同一份瓦片换一组滤镜，即可近似不同制图风格，成本比换服务商低得多。

查看示例

固定版权标注

版权信息跟着数据源走，控件只负责把各源的说明汇总成一行。

查看示例

静态图片叠加

静态图片没有瓦片层级，给定一个范围，OpenLayers 就把它拉伸到该范围。

查看示例

街道沿线标注

道路名称顺着线走才好读，placement: 'line' 让文字贴合线段方向。

查看示例

样式表达式

样式函数就是一段按要素属性取值的表达式，改动它比改数据更灵活。

查看示例

属性驱动样式

要素带等级属性时，样式函数可以按属性返回不同半径与颜色，一个图层就能表现出分层数据。

查看示例

自定义样式渲染器

内置图形不够用时，renderer 回调能拿到画布上下文，想画什么就画什么。

查看示例

SVG 图层

SVG 是矢量图，作为静态图片铺到地图范围后，放大不会出现锯齿。

查看示例

合成线要素

用循环生成三千条首尾相接的线，拼成方形螺旋，观察矢量图层在缩放时的渲染表现。

查看示例

合成点要素

两万个随机分布在城区范围内的点，鼠标移动时实时显示离指针最近的点与连线。

查看示例

地图跨容器迁移

同一张地图在两个并排容器之间迁移，缩放级别、中心点和图层都不会重建。

查看示例

瓦片错误处理

底图服务偶发 404 或跨域失败时，tileloaderror 是唯一可靠信号；监听它才能做降级或重试。

查看示例

瓦片网格可视化

瓦片编号不是猜出来的，TileGrid 提供了范围与坐标互算接口，可以把当前视野的瓦片直接画出来。

查看示例

TileJSON 数据源

把瓦片地址、层级范围与版权信息写成一个 TileJSON 对象，交给瓦片图层渲染。

查看示例

瓦片加载事件

在瓦片源上挂事件监听，统计已发出与已完成的请求数，用进度条显示当前加载状态。

查看示例

瓦片加载进度

瓦片源会抛出开始、结束、失败三类事件，累计数量就能做出加载进度提示，不必猜底图是否加载完成。

查看示例

瓦片预加载

preload 让图层在缩放前就取相邻层级瓦片，代价是请求量上升，换来更少的白块。

查看示例

瓦片过渡效果

左右两个地图用同一份底图，唯一的差别是瓦片图层的 transition 参数。 点一次「重新缩放」，就同时看到直接替…

查看示例

瓦片切换过渡

两个 OSM 瓦片图层叠在一起，唯一差别是瓦片淡入时长，勾选复选框即可对比。

查看示例

等距圆与投影变形

沿经纬网布设一组等距圆，左侧用地理坐标视图，右侧用 Web 墨卡托视图，直观看到高纬度变形。

查看示例

悬停信息框

鼠标划过色块时，一块跟随指针的提示框显示区域名称，移出后自动隐藏。

查看示例

TopoJSON 数据

三个相邻区域共享弧段，用一个页面内的 TopoJSON 对象描述，解析后直接渲染。

查看示例

拓扑编辑

画线时端点自动吸附到已有节点，闭合的环会即时生成面要素，节点与边保持拓扑一致。

查看示例

边界追踪绘制

绘制多边形时，指针靠近地块边界会自动贴着边界走，适合沿行政界或地块线勾边。

查看示例

平移要素

点击选中一个区域，按住拖动即可平移整个面；平移结果直接写回要素几何。

查看示例

沿线等距采点

一条城区道路线，从起点开始每 200 米放一个采样点，共得到全长与采样数量。

查看示例

双指平移与滚动

普通拖动不再平移地图，避免在页面滚动区域里误触；双指拖动或按住 Ctrl / ⌘ 才操作地图。

查看示例

UTFGrid 属性查询

悬停地图时，指针所在网格返回区域名称与说明，属性存放在 UTFGrid 的网格数据里。

查看示例

ArcGIS REST 要素服务

在页面内构造三个 EsriJSON FeatureSet（点、折线、面），用 ol.format.EsriJSON…

查看示例

可编辑要素服务

绘制、修改、吸附、删除四个交互作用在同一份要素上，界面与提交逻辑和在线编辑一致。

查看示例

标签避让

二十个相邻地块各带名称，开启标签避让后重叠标注被隐藏，取消后全部铺开。

查看示例

标签样式控制

同一套控制面板驱动点、线、面三个图层的文字样式，修改参数立刻生效。

查看示例

文本对齐与背景

九个点分别演示左、中、右对齐，以及 justify 在文本盒内的三种分布方式。

查看示例

矢量图层交互高亮

鼠标划过区域，要素被复制到高亮图层描白边，顶部同时显示区域名称。

查看示例

OSM XML 数据

一段写在页面里的 OSM XML，包含建筑、道路与绿地三类 way，按标签分别着色。

查看示例

矢量样式化

同一个数据源里混放站点、路线和片区，靠 kind 属性让样式函数各画各的。 比起建三个图层，这种写法少一层图层管理，…

查看示例

矢量瓦片属性查询

每个瓦片在页面内合成两个区块要素，鼠标悬停时把属性以 JSON 显示在右上角。

查看示例

4326 矢量瓦片

地图使用地理坐标视图，瓦片网格按 512 像素、180/512 的起始分辨率切分。

查看示例

矢量瓦片选择

点击或悬停区块即可选中，选中结果用另一矢量瓦片图层按要素 id 重新着色。

查看示例

WFS 边界框加载

拖动或缩放地图时，矢量源按当前范围请求数据，页面内应答 GeoJSON 并显示水域。

查看示例

地理坐标 WFS

地图视图使用地理坐标，矢量源按 512 像素瓦片范围请求经纬度 GeoJSON。

查看示例

WFS GetFeature 请求

用 WFS 格式器拼出带属性过滤的请求，左侧显示请求原文，地图显示筛选结果。

查看示例

视角书签

调试或巡检时常要在几个位置间来回，把中心、层级、旋转存成书签，点击即可回到原样。

查看示例

视图内边距

视图左侧和上方预留空白后，缩放定位会把要素放到剩余可视区域的中心。

查看示例

线段渲染样式

线宽、颜色与虚线动画在矢量层样式里配置，绘制新线即时套用同一套样式。

查看示例

图层裁剪式卷帘

滑块改写图层的渲染范围，切分线左侧出专题图，右侧露出底图。

查看示例

WebGL 点图层

两百多个带人口属性的点用 WebGL 绘制，半径和颜色由表达式按属性插值。

查看示例

WebGL 海平面淹没

页面内合成的高程数据进入 WebGL 瓦片图层，拖动水位滑块即可看到低地被淹没。

查看示例

WebGL 山体阴影

同一份页面内高程数据，通过坡度、坡向和太阳角度算出明暗，叠加在 OSM 底图上。

查看示例

WebGL 瓦片图层

同一份 OSM 瓦片分别交给 WebGLTile 与普通 TileLayer，下拉框切换渲染路径。

查看示例

WebGL 瓦片调色

三个滑块分别调整曝光、对比度和饱和度，画面变化由 GPU 完成，无需重新请求瓦片。

查看示例

WebGL 矢量图层

六个区域用 WebGL 矢量图层绘制，悬停时通过变量切换描边颜色与宽度。

查看示例

WebGL 矢量瓦片

按 z/x/y 生成的瓦片要素合并成 WebGL 矢量图层，颜色、线宽与高亮都由样式表达式控制。

查看示例

风场流线

页面内生成的风场速度分量驱动粒子流线，颜色按风速插值，随地图平移持续运动。

查看示例

风向箭头

十几个观测点的风向用箭头表示，箭头长度随风速变化，方向由角度属性决定。

查看示例

WKB 几何解析

一段十六进制 WKB 字符串解码成一个面，地图自动缩放到该面范围。

查看示例

WKT 几何解析

一行 WKT 文本描述一个四边形，解析后叠加到地图并自动适配范围。

查看示例

WMS 图层

底图不再用现成瓦片，而是走 WMS 服务；上面再叠一层国界线，透明度可调。 OGC 服务的接入方式与瓦片类似，差别集…

查看示例

WMS 能力文档

一段 WMS 1.3.0 能力文档在页面内解析，左侧显示原始 XML 长度，右侧列出结构化结果。

查看示例

WMS 请求参数生成

随地图移动实时生成 GetMap 地址，按版本决定 BBOX 的轴顺序与 CRS/SRS 参数，并同步输出视口像素尺…

查看示例

WMS 自定义瓦片网格

自定义瓦片网格把瓦片宽高设为 512×256，WMS 请求参数里的 WIDTH、HEIGHT 随之改变。

查看示例

WMS 图例

右侧图例与地图联动，缩放后重新计算图例请求地址并按当前样式绘制色块。

查看示例

WMS 单图像图层

地图每次范围变化只请求一张覆盖当前视野的影像，叠加在 OSM 底图上。

查看示例

自定义投影 WMS

视图使用以北京为中心的自定义米制投影，WMS 请求的 BBOX 是本地平面坐标。

查看示例

SVG 格式 WMS

一张由页面生成的 SVG 覆盖北京城区，放大后边界依然锐利。

查看示例

无转换投影 WMS

视图使用一个没有坐标转换的本地投影，WMS 影像只依赖代码、单位和瓦片网格。

查看示例

WMS 参数配置

WMS 的关键参数集中在 params 对象里，改完参数要调用 updateParams() 才会重新请求。

查看示例

切片 WMS

与整图 WMS 相比，切片 WMS 每次只请求与瓦片对齐的小块，缩放和平移更平滑。

查看示例

WMS 跨 180 度

把地图拖到太平洋，WMS 瓦片在 180 度经线两侧重复，海岸线不会断开。

查看示例

WMS 时间动画

播放按钮每 0.8 秒推进一个时间片，合成降水带随时间移动。

查看示例

WMTS 瓦片服务

按 Web 墨卡托网格请求 WMTS 瓦片，叠在 OSM 底图上显示区县专题色块。

查看示例

WMTS 能力文档

页面内构造的 WMTS 1.0.0 能力文档，解析后以 JSON 展开全部图层与矩阵信息。

查看示例

WMTS 维度参数

滑块调节水位阈值，WMTS 源更新维度后重新取图，蓝色淹没范围随之变化。

查看示例

高 DPI 瓦片

逻辑瓦片仍是 256，但按 512 像素取图，高清屏上的细网格与编号更加锐利。

查看示例

WMTS 瓦片网格

自定义原点、分辨率与矩阵标识，瓦片在图上直接打印 TileCol 与 TileRow。

查看示例

从能力文档建 WMTS

解析页面内的能力文档，用图层标识和矩阵集名生成 WMTS 源，叠加到底图上。

查看示例

XYZ 瓦片源

OSM 瓦片以 a、b、c 三个子域轮询请求，模板中的占位符由瓦片坐标直接替换。

查看示例

Esri 瓦片顺序

OSM 底图之上叠一层半透明瓦片，标出每个瓦片的 z、y、x，验证请求顺序。

查看示例

高分辨率 XYZ

同一区域分别用 1 倍与 2 倍瓦片渲染，勾选开关即可对比标注与网格的清晰度。

查看示例

图层叠放顺序

两个半透明面图层叠在一起时，谁在上层由 zIndex 决定；数值大的压在上面，与加入地图的先后无关。

查看示例

受限缩放级别

View 的 minZoom 与 maxZoom 把缩放夹在 5–9 之间，按钮请求 2 级或 14 级都只会停在边…

查看示例

Zoomify 大图

一张 4000×3000 的合成大图按 Zoomify 规则切分，复选框切换 2 倍瓦片。

查看示例

缩放滑块

三张地图各自装一个缩放滑块，拖动滑块或点击轨道都能改变层级。

查看示例

缩放滑块控件

连续缩放的场景更适合滑块而不是加减按钮；控件与视图双向同步，滚轮操作也能反映到滑块上。

查看示例