OpenLayers 中文v10.9.0API 示例翻译一、更新记录二、简介1. OpenLayers 概述2. 与 OpenLayers 的结缘3. 核心价值三、OpenLayers 基本概念1. 四种基本类型2. Map地图3. View视图4. Source资源5. Layer图层四、翻译范围与亮点示例1. 基础地图与图层2. 视图动画3. 矢量数据与样式4. 交互与编辑5. 版权归属6. WebGL 渲染与大数据7. 遥感影像与 COG / GeoZarr五、使用指南1. 访问方式2. 阅读建议六、后续规划访问方式资源链接中文版示例v10.9.0https://openlayers.vip/examples/中文APIv10.9.0https://openlayers.vip/apidoc/一、更新记录2026年7月6日 更新完成最新版v10.9.0的 API 与全部示例的中文翻译。时间版本主要更新内容2026-07-06v10.9.0完成 API 与全部示例的中文翻译覆盖 WebGL 矢量/瓦片渲染、COG/GeoZarr 多源数据等新特性2023-04-02v7.3.0修复因 HTTPS 引起的页面访问资源 404 问题2023-03-26v7.3.0完成所有示例翻译2023-03-19v7.3.0修复若干已知问题2022-09-07v7.1.0更换 Bing Maps、Mapbox、MapTiler 授权2022-07-18v6.15.1官方 v6 系列最新版本2022-08-05v6.15.1与官方版本同步2022-01-18v6.12与官方版本同步2022-01-04v6.10启动早期翻译工作近期说明由于 OSM 地图资源在部分网络环境下被屏蔽少量页面的底图可能无法显示。后续将逐步替换为天地图Tianditu作为默认底图保证示例在国内网络环境的可访问性。二、简介1. OpenLayers 概述OpenLayers 是一个高性能、功能丰富、完全开源的 JavaScript 地图库由 OSGeo 社区长期维护采用 2-clause BSD License即 FreeBSD 协议发布可自由用于商业与非商业项目。它能够在任意 Web 页面中嵌入动态地图支持显示来自任意数据源的瓦片、矢量数据与标注是 WebGIS 领域最具代表性的前端解决方案之一。其核心特性可概括为以下几点瓦片图层可从 OSM、Bing、MapBox、Stadia Maps 及任意 XYZ 源拉取瓦片同时支持 OGC 标准的 WMS / WMTS 等服务与非瓦片图层。矢量图层原生渲染 GeoJSON、TopoJSON、KML、GML、GPX 以及 Mapbox 矢量瓦片等多种格式并支持热力图与矢量图层栅格化渲染等高级用法。现代化渲染技术充分利用 Canvas 2D、WebGL 以及 HTML5 的最新能力在桌面与移动端均能保持流畅体验。可定制的交互与控件内置 DragRotate、DoubleClickZoom、DragPan 等默认交互且交互顺序与启用项均可配置。强大的样式与可扩展能力通过 CSS 即可控制地图控件外观并可接入第三方库进行功能扩展。自 v7.0 起OpenLayers 引入了实验性的WebGL 矢量渲染器支持对点、线、多边形等非瓦片矢量数据进行 GPU 加速渲染。在 v10.x 系列中这一能力得到了进一步成熟化并扩展到 COG、GeoZarr、波段运算、流图层等更广泛的数据源与渲染场景。2. 与 OpenLayers 的结缘接触 WebGIS 已有多年尤其在 OpenLayers 这一开源前端地图库上积累了较丰富的工程实践经验。OpenLayers 专为 Web GIS 客户端开发提供用于实现标准格式发布的地图数据访问。作为一名英语爱好者同时也是 OpenLayers 的长期使用者希望OpenLayers 提供中文版将 OpenLayers 官方的示例页面与 API 文档完整地翻译成中文为中文开发者降低学习门槛。目前已完成最新版v10.9.0所有 API 与示例的翻译工作并将其部署在独立服务器上提供一个稳定、可访问的中文资源站点方便国内开发者查阅与学习。3. 核心价值降低学习成本官方示例与 API 本身设计优秀但中文翻译能帮助开发者更快理解示例功能、应用场景与参数含义。构建中文生态资源国内 WebGIS 生态日益活跃但系统、持续维护的中文教程仍相对稀缺。本项目的目标是成为官方英文文档的有益补充。专业术语的本地化翻译过程中尽量保留专业词汇既保证准确性也便于开发者与英文文档交叉对照。持续维护与版本同步项目将跟随 OpenLayers 官方版本迭代持续更新翻译内容。三、OpenLayers 基本概念1. 四种基本类型OpenLayers 地图开发中有四种最基本的类型Map地图、View视图、Layer图层、Source资源。2. Map地图地图是 OpenLayers 的核心组件。要渲染地图需要一个视图、一个或多个图层和一个目标容器importMapfromol/Map;importViewfromol/View;importTileLayerfromol/layer/Tile;importOSMfromol/source/OSM;varmapnewMap({view:newView({center:[0,0],zoom:1}),layers:[newTileLayer({source:newOSM()})],target:map});上面的代码片段使用ol/layer/Tile来显示 OSM 数据并将其渲染到一个带有 id 为map的 DOM 元素。在构造函数中OpenLayers 会在目标元素中放置一个视口容器带有 CSS 类名ol-viewport然后在视口中放置另外两个元素一个具有ol-overlaycontainer-stopevent用于控件和一些叠加层的 CSS 类名称另一个带有ol-overlaycontainer用于其他叠加层。地图本身被放置在视口内的另一个元素中。层存储在layerGroups中。库提供了一个顶级组这是getLayerGroup和setLayerGroup访问的内容。在选项中输入的图层将添加到该组中addLayer和removeLayer更改组中的图层集合。3. View视图一个 View视图也是一个 projection投影projection投影用于确定坐标系和用来作为地图分辨率计算的单位。map.setView(newView({center:[0,0],zoom:2,}));如果没有指定任何 projection投影则地图默认的 projection投影为球面墨卡托EPSG:3857以米作为地图单位。这个zoom缩放选项是指定地图分辨率的快捷方法。可用的缩放级别由以下参数确定maxZoom最大缩放级别默认值28zoomFactor缩放因子默认值2maxResolution最大分辨率默认值的计算方式使投影的有效性范围适合 256×256 像素切片从缩放级别 0 开始分辨率为每像素的最大分辨率单位后续缩放级别通过将上一个缩放级别的分辨率除以缩放因子来计算直到达到最大的缩放级别maxZoom。4. Source资源为了获取图层的远程数据OpenLayers 使用ol/source/Source的子类。这些子类可用于加载 xyz、OpenStreetMap 或高德、Bing、Google 街景、天地图、超图等免费和商业地图切片服务WMS或WMTS等 OGC 源GeoJSON或 KML 等格式的矢量数据importOSMfromol/source/OSM.js;constsourceOSM();5. Layer图层图层是来自源的数据的可视化表示。OpenLayers 有四种基本类型的图层图层类型说明ol/layer/Tile在网格中提供平铺图像的渲染源这些网格按特定分辨率的缩放级别进行组织ol/layer/Image渲染以任意范围和分辨率提供地图图像的源ol/layer/Vector在客户端渲染矢量数据ol/layer/VectorTile提供矢量瓦片的数据的渲染importTileLayerfromol/layer/Tile.js;// ...constlayernewTileLayer({source:source});四、翻译范围与亮点示例本次 v10.9.0 翻译项目共覆盖277 个示例与完整的 API 文档。以下按主题梳理若干代表性示例1. 基础地图与图层可访问地图当地图获得焦点之后可以使用键盘对地图进行控制键放大地图-键缩小地图tab键切换地图中的按钮enter键点击地图中的按钮方向键移动地图。EPSG:4326与Equal Earth 投影图层组、图层 Z 索引、图层最小/最大分辨率最精简代码示例dividmap/divscript// layers、target、view 是地图最基本的部分是必需的newol.Map({layers:[newol.layer.Tile({source:newol.source.OSM()})],target:map,view:newol.View({center:[0,0],zoom:2})});/script2. 视图动画让地图的视图拥有动画效果关键点在于loadTilesWhileAnimating和view.animate。这个动画最基本的效果有三种移动、旋转、放缩通过这三种效果的组合可以做出很多特效。dividmap/divscript// 地图的视图varviewnewol.View({center:[0,0],zoom:2});newol.Map({layers:[newol.layer.Tile({source:newol.source.OSM()})],loadTilesWhileAnimating:true,// 将这个设置为 true默认为 falsetarget:map,view:view});varlondonol.proj.fromLonLat([-0.12755,51.507222]);// 伦敦的坐标// 移动到伦敦移动时是有动画的view.animate({center:london,});/script3. 矢量数据与样式GeoJSON、TopoJSON、KML、GPX、WKB / WKT矢量标注、矢量标注去重叠图标符号化器、WebGL 图标精灵4. 交互与编辑绘制与修改要素、绘制、修改、跟踪和捕捉框选按住Ctrl 鼠标左键拖拽就可以框选地图上的一些元素。测量框选示例dividmap/divscriptvarmapnewol.Map({layers:[newol.layer.Vector({// 这是一个能选择的地图源source:newol.source.Vector({url:https://openlayers.org/en/v4.1.1/examples/data/geojson/countries.geojson,format:newol.format.GeoJSON()})})],interactions:[// 交互newol.interaction.Select(),// 选择newol.interaction.DragBox({condition:ol.events.condition.platformModifierKeyOnly})// 画框],target:map,view:newol.View({center:[0,0],zoom:2})});/scriptinteractions是交互的意思如果不设置默认为ol.interaction.defaults()。5. 版权归属Attributions 的意思是「归属」指的是右下角那个版权控件。dividmap/divscriptvarattributionnewol.control.Attribution();// 这是版权控件varFullScreennewol.control.FullScreen();// 这是全屏控件varmapnewol.Map({layers:[newol.layer.Tile({source:newol.source.OSM()})],controls:[attribution,FullScreen],// 如果不设置 controls地图会默认设置target:map,view:newol.View({center:[0,0],zoom:2})});/script如果不设置controls那么地图会默认帮我们设置默认的效果等同于如下代码controls:ol.control.defaults(),// 这就是默认的效果6. WebGL 渲染与大数据WebGL 点图层、WebGL 瓦片WebGL 矢量图层、WebGL 矢量瓦片图层7. 遥感影像与 COG / GeoZarr云优化 GeoTIFF、GeoZarr波段对比度拉伸、GeoTIFF 重投影五、使用指南1. 访问方式资源链接中文版示例v10.9.0https://openlayers.vip/examples/中文APIv10.9.0https://openlayers.vip/apidoc/官方示例https://openlayers.org/en/latest/examples/官方 API 文档https://openlayers.org/en/latest/apidoc/2. 阅读建议对照阅读建议将中文版与官方英文版对照阅读。优先理解三要素Map、Layer / Source、View是构建任意地图应用的最基本组成。关注默认交互理解ol/interaction/defaults的默认顺序与可配置项。善用 WebGL 渲染器在处理大规模矢量数据时能够显著提升性能。六、后续规划资源替换为国内资源将底图资源、要素服务资源等替换为国内可以访问的资源。OpenLayers 功能繁多示例翻译工作量巨大。本项目仍在缓慢持续更新中部分功能因个人使用经验有限可能采用了直译方式如有不准确之处敬请谅解。有 GISer 需要某些 API 或示例加急翻译的可以留言说明通常一两天内可更新。