前端GIS数据可视化【免费下载链接】openlayersOpenLayers项目地址https://gitcode.com/gh_mirrors/op/openlayers点击查看免费下载本指南以 OpenLayers 仓库 changelog/v3.14.0.md 为主体结合 src/ 目录下的实际源码与 test/ 测试用例系统解读 v3.14.0 版本带来的 6 项核心新特性、2 项必须关注的升级注意点以及围绕移除 Closure Library 依赖的性能与架构改进。读完本文你将掌握 FullScreen 全屏控件、DragDrop 拖拽交互、RegularShape 规则形状、WMSGetFeatureInfo 解析与 HDMS 坐标格式化等新参数的用法并理解 precompose/postcompose 事件中画布变换的迁移写法。一、版本概览93 个 PR 的累积成果v3.14.0 是自 v3.13.1 之后累积了93 个 Pull Request的重要版本见 changelog/v3.14.0.md 的 Summary 部分重点集中在三方面新 API 参数为 FullScreen 控件、DragDrop 交互、RegularShape 样式、WMSGetFeatureInfo 格式与坐标格式化工具各新增了实用选项渲染性能优化瓦片直接绘制到地图画布#4597、更智能的瓦片加载队列#4794、栅格重投影精度提升#4869架构去依赖化用自研轻量事件系统替换goog.events#4711并持续以 ES5 特性或自研代码替换其余goog.*组件向彻底移除 Closure Library 依赖迈出关键一步。二、六大新特性详解2.1 FullScreen 控件新增source选项#4679此前ol.control.FullScreen只能将包含地图视口的元素整屏显示v3.14.0 新增source选项允许把地图以外的其他 DOM 元素一并纳入全屏视图例如将地图与图例、工具条放进同一个容器后整体全屏。从当前源码 src/ol/control/FullScreen.js 的 Options 定义可以确认/** * property {HTMLElement|string} [source] The element to be displayed * fullscreen. When not provided, the element containing the map viewport will * be displayed fullscreen. */其语义为source可传HTMLElement 或选择器字符串未提供时回退为地图视口所在元素。类注释src/ol/control/FullScreen.js也明确说明进入全屏后控件会显示关闭按钮内部基于浏览器 Fullscreen API 切换。构造示例var fullScreenControl new ol.control.FullScreen({ source: document.getElementById(map-and-legend) }); map.addControl(fullScreenControl);2.2 DragDrop 交互新增target属性#4876ol.interaction.DragAndDrop让用户把本地文件如 GeoJSON、KML、GPX拖入地图即可加载要素。v3.14.0 之前只能以地图视口作为投放目标现在可通过target指定自定义的投放区域 DOM 元素便于把地图与拖放区分离布置。源码 src/ol/interaction/DragAndDrop.js 对 Options 的注释为/** * property {HTMLElement} [target] The element that is used as the drop * target, default is the viewport element. */实际使用时src/ol/interaction/DragAndDrop.js保存this.target options.target ? options.target : null;并在绑定事件时src/ol/interaction/DragAndDrop.js执行const dropArea this.target ? this.target : map.getViewport();即target为空时仍回退到map.getViewport()。示例var dragAndDropInteraction new ol.interaction.DragAndDrop({ formatConstructors: [ol.format.GeoJSON, ol.format.KML, ol.format.GPX], target: document.getElementById(drop-area) }); map.addInteraction(dragAndDropInteraction);2.3 RegularShape 新增rotateWithView选项#4698ol.style.RegularShape用于生成正多边形或星形符号提供radius为正多边形同时提供radius与radius2则为星形。v3.14.0 新增rotateWithView选项控制规则形状符号是否随视图旋转而旋转。源码 src/ol/style/RegularShape.js 的 Options 定义/** * property {boolean} [rotateWithViewfalse] Whether to rotate the shape with the view. */构造器src/ol/style/RegularShape.js将其透传给父类默认值为falsesuper({ opacity: 1, rotateWithView: options.rotateWithView ! undefined ? options.rotateWithView : false, rotation: options.rotation ! undefined ? options.rotation : 0, scale: options.scale ! undefined ? options.scale : 1, ... });rotateWithView: false默认时符号在地图上保持“朝上”的固定姿态设为true后符号会跟随地图旋转适合箭头、风向标等需要表达方向语义的符号。典型用法var arrow new ol.style.RegularShape({ points: 3, radius: 12, angle: 0, rotateWithView: true, fill: new ol.style.Fill({color: red}) });2.4 WMSGetFeatureInfo 新增layers选项#4700ol.format.WMSGetFeatureInfo用于解析 WMS 服务的 GetFeatureInfo 响应。当响应包含多个图层的要素时v3.14.0 的layers选项允许只读取指定图层的要素避免业务侧再手工过滤。源码 src/ol/format/WMSGetFeatureInfo.js 的 Options/** * typedef {Object} Options * property {Arraystring} [layers] If set, only features of the given layers * will be returned by the format when read. */解析逻辑src/ol/format/WMSGetFeatureInfo.js在遍历msGMLOutput子节点时按图层名做白名单过滤const layerName layerElement.localName.replace(layerIdentifier, ); if (this.layers_ !this.layers_.includes(layerName)) { continue; }其中layerIdentifier _layersrc/ol/format/WMSGetFeatureInfo.js即 MapServer 输出的xxx_layer节点会去除_layer后缀后与layers白名单比对。使用示例var format new ol.format.WMSGetFeatureInfo({ layers: [roads, buildings] }); var features format.readFeatures(responseXml);2.5ol.coordinate.toStringHDMS新增precision参数#4787toStringHDMS将经纬度坐标格式化为“半球 度分秒”字符串。v3.14.0 之前秒部分只能是整数新增的precision即fractionDigits参数支持保留秒的小数位提升坐标展示精度。当前实现位于 src/ol/coordinate.jsexport function toStringHDMS(coordinate, fractionDigits) { if (coordinate) { return ( degreesToStringHDMS(NS, coordinate[1], fractionDigits) degreesToStringHDMS(EW, coordinate[0], fractionDigits) ); } return ; }秒的小数处理在degreesToStringHDMSsrc/ol/coordinate.js内部将度数换算为总秒数x Math.abs(3600 * normalizedDegrees)再拆出度、分、秒秒部分用toFixed(x - deg * 3600 - min * 60, decimals)保留小数并处理“秒进位到分、分进位到度”的边界。默认不传小数位输出整数秒var coord [7.85, 47.983333]; ol.coordinate.toStringHDMS(coord); // 47° 58′ 60″ N 7° 50′ 60″ E传入精度后保留秒的小数位ol.coordinate.toStringHDMS(coord, 1); // 47° 58′ 60.0″ N 7° 50′ 60.0″ E对应的单元测试见 test/node/ol/coordinate.test.js分别覆盖了无参数、默认整数秒与fractionDigits 3的格式化输出。2.6 更智能的瓦片加载队列#4794当地图上同时叠加多个瓦片图层时旧实现以“图层源数量”为基数统计待加载瓦片数导致多源场景下队列行为不佳。v3.14.0 重构后瓦片加载计数不再依赖源的数量而是统一基于瓦片队列tileQueue调度。在 src/ol/renderer/canvas/TileLayer.js 中可以看到渲染器通过frameState.tileQueue.isKeyQueued(tileQueueKey)判断瓦片是否已在队列中未入队则frameState.tileQueue.enqueue([...])入队。这一改动让瓦片的加载优先级与调度完全由队列统一管理多瓦片图层叠加时加载体验更平滑、更可预期。三、渲染性能改进瓦片直接绘制到地图画布#4597v3.14.0 将瓦片图层的渲染路径改为直接把瓦片绘制到地图画布省去了中间离屏画布的拷贝开销。当前 Canvas 瓦片渲染器的核心绘制调用集中在 src/ol/renderer/canvas/TileLayer.js 的context.drawImage(...)调用链中配合frameState.pixelRatiosrc/ol/renderer/canvas/TileLayer.js与source.getTilePixelRatio(frameState.pixelRatio)src/ol/renderer/canvas/TileLayer.js完成像素比适配。该改动对瓦片图层较多的应用可带来明显的渲染帧率改善。此外同版本还包含多项重投影与栅格处理改进栅格源带 gutter 时的重投影修复#4721、ol.reproj.render精度提升#4869、瓦片加载失败时的重投影行为优化#4718、仅在所有影像源加载完成后才执行栅格运算#4894。四、架构演进以自研事件系统替换goog.events#4711v3.14.0 最重要的架构变化是用自研轻量事件系统替换 Closure Library 的goog.events显著减小构建体积。这也是项目“全面移除 Closure Library 依赖”路线上的里程碑。同批次 PR 还包括移除goog.dom.createElement/goog.dom.createDom/goog.dom.getElementsByClass/goog.dom.getParentElement#4863、#4842、#4864、#4843改用原生document.createElement、querySelectorAll等 DOM API移除goog.array、goog.object、goog.string.*、goog.math.isFiniteNumber等工具#4789、#4778、#4824、#4825、#4884以ol.array或 ES5 原生能力替代事件绑定统一收敛到ol.events.listen#4792。对于依赖方而言公开的事件 API 与on/once/un用法保持不变主要收益体现在更小的产物体积与更可控的依赖面。五、升级注意点Upgrade Notes5.1 IE9 支持需要 requestAnimationFrame polyfill从 v3.14.0 起OpenLayers 内部开始使用requestAnimationFrame/cancelAnimationFrame因此继续支持 IE9 的应用必须引入相应的 polyfill例如polyfill.io提供的requestAnimationFramepolyfill。若你的目标浏览器不含 IE9可忽略此项若需要兼容 IE9务必在引入 OpenLayers 之前加载 polyfill。5.2 precompose / postcompose 事件画布变换语义变更这是本版本最需要关注的行为变化旧行为应用在precompose/postcompose回调里对 canvas 做变换后可以简单地把变换设为 nullsetTransform(1, 0, 0, 1, 0, 0)来“复位”因为此前未对画布状态做保证。新行为API 保证画布处于以地图左上角为原点、基于设备像素比device pixel ratio的坐标系。因此应用必须自行撤销在回调里做过的所有 canvas 变换同时不应假设底层 canvas 尺寸与可见视口完全一致。文档changelog/v3.14.0.md 的 Upgrade notes 一节给出了完整的迁移示例。旧代码依赖 canvas 尺寸定位原点并靠 null 变换复位layer.on(precompose, function(e) { // rely on canvas dimensions to move coordinate origin to center e.context.translate(e.context.canvas.width / 2, e.context.canvas.height / 2); e.context.scale(3, 3); // draw an x in the center of the viewport e.context.moveTo(-20, -20); e.context.lineTo(20, 20); e.context.moveTo(-20, 20); e.context.lineTo(20, -20); // rely on the canvas having a null transform e.context.setTransform(1, 0, 0, 1, 0, 0); });新代码用地图尺寸与 pixelRatio 定位原点并在末尾按逆序撤销全部变换layer.on(precompose, function(e) { // use map size and pixel ratio to move coordinate origin to center var size map.getSize(); var pixelRatio e.frameState.pixelRatio; e.context.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio); e.context.scale(3, 3); // draw an x in the center of the viewport e.context.moveTo(-20, -20); e.context.lineTo(20, 20); e.context.moveTo(-20, 20); e.context.lineTo(20, -20); // undo all transforms e.context.scale(1 / 3, 1 / 3); e.context.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio); });关键差异点项目旧写法新写法原点定位依据e.context.canvas.width / 2map.getSize()×e.frameState.pixelRatio复位方式setTransform(1,0,0,1,0,0)设为 null 变换按逆序scale/translate逐项撤销坐标系统未定义左上角为原点、设备像素坐标凡在precompose/postcompose中绘制过自定义内容的图层升级后都必须按新写法改写否则会出现偏移或残留变换。六、其他值得关注的变更ol.style.Style标记为struct#4811进一步收紧对象结构利于编译器优化ol.Collection增加模板类型#4839类型提示更完善OSM 源新增opaque选项#4769用于声明底图不透明以优化渲染ol.interaction.Select的layers选项类型修正#4823并修复多要素选择时 toggle 逻辑#3453及未管理图层上的要素命中检测#4736矢量瓦片渲染边界控制#4733避免渲染过大或过小的影像矢量瓦片要素重投影解耦#4725GML 解析忽略 XML 序列差异#4896、ol.format.KML代码清理#4890ol.Geolocationerror 事件文档补全#4730与错误类型转换修复#4845ol.control.Rotate/ol.control.Zoom补充单元测试#4738。七、小结OpenLayers v3.14.0 是一个“功能增量 架构瘦身”双轨并行的版本一方面为 FullScreen、DragDrop、RegularShape、WMSGetFeatureInfo、HDMS 坐标格式化等常用 API 补充了实用选项显著提升定制能力另一方面通过直接绘制瓦片、智能瓦片队列与自研事件系统替换goog.events在渲染性能与构建体积上获得改善。升级时请重点处理precompose/postcompose 画布变换语义的迁移并根据目标浏览器决定是否引入requestAnimationFramepolyfill。相关源码与测试可分别在 src/ol/control/FullScreen.js、src/ol/interaction/DragAndDrop.js、src/ol/style/RegularShape.js、src/ol/format/WMSGetFeatureInfo.js、src/ol/coordinate.js 与 test/node/ol/coordinate.test.js 中深入查阅。赞分享前端GIS数据可视化【免费下载链接】openlayersOpenLayers项目地址https://gitcode.com/gh_mirrors/op/openlayers点击查看免费下载相关推荐深入理解Xiaomi-Robotics-0-LIBERO的动作生成机制从输入编码到控制命令的全流程深入理解Xiaomi Robotics 0 LIBERO的动作生成机制从输入编码到控制命令的全流程 Xiaomi Robotics 0 LIBERO是小米机器Kong版本发布新特性介绍与升级注意事项Kong版本发布新特性介绍与升级注意事项 你还在为API网关性能瓶颈、AI服务集成复杂而困扰吗一文解决Kong 3.8.0 3.9.1版本升级难题 读完本文API网关后端LLM 网关微服务人工智能FluentAssertions版本发布新特性介绍与升级注意事项FluentAssertions版本发布新特性介绍与升级注意事项 概述 FluentAssertions作为.NET生态系统中广受欢迎的测试断言库近期发布了测试创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考