前端GIS数据可视化【免费下载链接】openlayersOpenLayers项目地址https://gitcode.com/gh_mirrors/op/openlayers点击查看免费下载OpenLayers 10.3.0 是一次以新能力 破坏性升级并重的重要版本它引入了全新的WebGLVectorLayer用于大规模矢量数据渲染、内置 UTM 坐标变换支持、可直接对接欧洲航天局ESA哨兵影像服务的SentinelHub数据源并为GeoTIFF数据源补齐了模型变换旋转/倾斜/翻转瓦片网格支持。同时本版本包含两个需要升级注意的破坏性变更transform()对未知投影不再静默降级以及WebGLPointsLayer样式变量的声明位置调整。阅读完本文你将掌握 10.3.0 全部新增 API 的用法、两个破坏性变更的迁移方案以及背后的源码实现原理。升级须知两个破坏性变更transform()函数对未知投影改为抛错在 10.3.0 之前src/ol/proj.js 中的transform()函数在遇到未注册的源投影或目标投影时会静默应用恒等变换identity transform即把坐标原样返回。这很容易掩盖投影配置错误例如把 EPSG:4326 的经纬度坐标交给一个拼错编码的投影结果却是坐标纹丝不动导致地图位置完全错误且难以排查。从 10.3.0 起该函数在无法完成变换时会直接抛出Error。其实现位于 src/ol/proj.js#L620-L629export function transform(coordinate, source, destination) { const transformFunc getTransform(source, destination); if (!transformFunc) { const sourceCode get(source)?.getCode() ?? String(source); const destinationCode get(destination)?.getCode() ?? String(destination); throw new Error( No transform available between ${sourceCode} and ${destinationCode}, ); } return transformFunc(coordinate, undefined, coordinate.length); }迁移建议在调用transform()之前先通过ol/proj模块的get()函数检查投影是否已注册——get()在找不到给定标识符对应的投影定义时会返回nullimport {get, transform} from ol/proj; if (get(EPSG:32650) get(EPSG:4326)) { const coord transform([500000, 4649776], EPSG:32650, EPSG:4326); }这一变更同样会影响transformExtent()、Geometry#transform()等所有底层依赖该函数的 API请确保应用中涉及的所有投影编码都已通过proj4注册或内置支持内置支持范围见下文 UTM 章节。WebGLPointsLayer样式格式变更变量移至 options 根级此前WebGLPointsLayer的样式变量variables被放在style对象内部与filter混在一起// Before new WebGLPointsLayer({ style: { // variables were part of the style object variables: { minYear: 1850, maxYear: 2015, }, filter: [between, [get, year], [var, minYear], [var, maxYear]], }, source: vectorSource, })从 10.3.0 起变量必须作为独立的顶层对象传入options// Now new WebGLPointsLayer({ style: { filter: [between, [get, year], [var, minYear], [var, maxYear]], }, variables: { minYear: 1850, maxYear: 2015, }, source: vectorSource, })值得注意的是WebGLPointsLayer本身并不属于稳定 API在 changelog/upgrade-notes.md 中也有明确说明并且该图层在后续 10.4.0 版本中已被弃用官方推荐使用本文接下来介绍的WebGLVectorLayer替代。如果你仍在使用WebGLPointsLayer请按上述新格式迁移并为迁移到WebGLVectorLayer做好准备。新特性WebGLVectorLayer图层WebGLVectorLayer源码位于 src/ol/layer/WebGLVector.js是 10.3.0 引入的全新图层类专门针对大规模矢量数据集的渲染进行优化它使用 WebGL 渲染管线比传统的 Canvas 矢量渲染拥有更高的吞吐能力。官方在其类注释中描述为 Layer optimized for rendering large vector datasets。核心 API该图层直接继承Layer其Options与WebGLPointsLayer类似关键选项包括选项类型默认值说明sourceVectorSource-矢量数据源styleFlatStyleLike-扁平化样式flat style支持filter条件、[var, ...]、[get, ...]等表达式variablesStyleVariables{}样式变量每个变量必须是字面值非表达式可在样式属性中通过[var, varName]引用opacitynumber1图层不透明度disableHitDetectionbooleanfalse设为true可带来轻微性能提升但会禁用该图层上的所有命中检测backgroundBackgroundColor-图层背景色minZoom/maxZoom等number-可见性控制需要注意WebGLVector图层在移除时必须手动调用dispose()否则底层 WebGL 上下文不会被垃圾回收造成资源泄漏。从 src/ol/layer/WebGLVector.js#L79 的源码可以看到构造时传入的variables被保存为私有属性this.styleVariables_并提供了updateStyleVariables()方法用于运行时更新变量。实战示例examples/webgl-vector-layer.js 展示了完整的用法使用多个扁平样式规则实现高亮 默认 文本标注三层样式并通过updateStyleVariables()在鼠标移动时动态更新高亮变量const style [ { filter: [, [var, highlightedId], [id]], style: { stroke-color: white, stroke-width: 3, stroke-offset: -1, fill-color: [255, 255, 255, 0.4], }, }, { else: true, style: { stroke-color: [*, [get, COLOR], [220, 220, 220]], stroke-width: 2, stroke-offset: -1, fill-color: [*, [get, COLOR], [255, 255, 255, 0.6]], }, }, { style: { text-value: [coalesce, [get, ECO_NAME], unknown], text-font: bold 12px Open Sans, Arial Unicode MS, sans-serif, text-fill-color: rgb(0,0,0), text-stroke-color: rgba(255, 255, 255, 0.8), text-stroke-width: 2, text-overflow: false, }, }, ]; const vectorLayer new WebGLVectorLayer({ source: new VectorSource({ url: https://openlayers.org/data/vector/ecoregions.json, format: new GeoJSON(), }), style, variables: { highlightedId: -1, }, }); // 运行时更新变量 vectorLayer.updateStyleVariables({highlightedId: id});样式规则数组中的多条规则按顺序求值filter命中即采用对应样式[var, highlightedId]与updateStyleVariables()的组合是 WebGL 系列图层实现交互高亮的标准模式。对应示例 examples/webgl-vector-layer.html 可直接运行查看效果。新特性SentinelHub数据源SentinelHub源码位于 src/ol/source/SentinelHub.js是一个基于Sentinel Hub Processing API的瓦片数据源它继承自DataTileSource允许开发者用 JavaScript 编写 Evalscript直接对欧空局哨兵Sentinel卫星影像执行波段运算并渲染为地图瓦片。工作原理从源码结构看其工作流是三步就绪模式构造时auth认证、data输入数据、evalscript处理脚本三者缺一不可任一项缺失时数据源保持loading状态不会渲染三者齐备后由fireWhenReady_()将状态置为ready并触发渲染src/ol/source/SentinelHub.js#L589-L600。因此三个核心配置均提供了对应的 setter 方法以便延迟配置setAuth(auth)接受{clientId, clientSecret}对象此时会请求 OAuth2 token或直接传入 access token 字符串token 过期前 60 秒会自动刷新src/ol/source/SentinelHub.js#L500-L533setData(data)设置输入数据配置setEvalscript(evalscript)接受字符串形式的 Evalscript或包含setup/evaluatePixel/updateOutput等函数的对象——对象形式会被serializeEvalscript()序列化成以//VERSION3开头的脚本字符串提交给服务端执行setFormat(format)设置响应 MIME 类型。瓦片加载时源码通过loadTile_()向 Processing API 发起POST请求请求体包含input.bounds.bbox当前瓦片范围、input.data数据配置、output瓦片尺寸与响应格式以及evalscriptsrc/ol/source/SentinelHub.js#L619-L684。请求头使用Authorization: Bearer token。当遭遇 HTTP 429限流时源码会忽略Retry-After头改用指数退避策略重试最多 10 次基础延迟 500ms即500ms × 2^attempt。核心配置参数构造函数的Options完整定义见 src/ol/source/SentinelHub.js#L377-L398要点如下选项类型默认值说明authAuthConfig \| string-{clientId, clientSecret}或直接给 token未提供时需后续调用setAuth()dataArrayProcessRequestInputDataItem-输入数据配置如{type: sentinel-2-l2a, dataFilter: {...}}evalscriptEvalscript \| string-处理脚本函数对象会被序列化为 EvalscripttileSizenumber \| Size[512, 512]瓦片像素宽高urlstringhttps://services.sentinel-hub.com/api/v1/processProcessing API 地址formatstringimage/png响应 MIME 类型仅支持image/png、image/jpeg、image/webp源码中通过knownImageMediaTypes白名单校验非法值会在构造时抛错projectionProjectionLike视图投影瓦片投影wrapXbooleantrue是否跨反经线东西方向环绕渲染interpolatebooleantrue重采样时是否使用线性插值设为false使用最近邻数据项的dataFilter支持timeRange{from, to}时间范围和maxCloudCoverage0-100 的最大云量过滤type可指定如sentinel-2-l2a等集合。坐标参考系通过getProjectionIdentifier()转换为 Sentinel Hub 接受的 OGC CRS URI 形式如http://www.opengis.net/def/crs/EPSG/0/4326src/ol/source/SentinelHub.js#L329-L351。实战示例examples/sentinel-hub.js 演示了完整的接入流程——构造时只配置data与evalscript认证凭据由用户通过表单提交后调用setAuth()注入useGeographic(); const source new SentinelHub({ data: [ { type: sentinel-2-l2a, dataFilter: { timeRange: { from: 2024-05-30T00:00:00Z, to: 2024-06-01T00:00:00Z, }, }, }, ], evalscript: { setup: () ({ input: [B12, B08, B04], output: {bands: 3}, }), evaluatePixel: (sample) [ 2.5 * sample.B12, 2 * sample.B08, 2 * sample.B04, ], }, }); // 用户提交 clientId / clientSecret 后激活数据源 source.setAuth({clientId, clientSecret}); // 配置错误时通过 change 事件 getError() 获取详细信息 source.on(change, () { if (source.getState() error) { alert(source.getError()); } });上面的 Evalscript 使用 B12/B08/B04 三个波段做加权合成模拟近红外假彩色影像。当数据源配置或认证失败时源码会将状态置为error并触发change事件通过getError()src/ol/source/SentinelHub.js#L700-L702可以拿到具体错误对象用于调试。仓库中还提供了 examples/sentinel-hub-custom-format.js自定义image/jpeg格式与 examples/sentinel-hub-custom-script.js自定义脚本两个变体示例。ImageTile数据源的多项增强10.3.0 对近期引入的ImageTile数据源源码位于 src/ol/source/ImageTile.js做了多项增强。ImageTileSource继承自DataTileSource用于加载图片类型的瓦片其核心特点是 URL 模板、数组或函数三种方式定义瓦片地址// 单一 URL 模板 new ImageTileSource({ url: https://example.com/tiles/{z}/{x}/{y}.png, }); // URL 数组自动轮换负载均衡 new ImageTileSource({ url: [https://a.example.com/{z}/{x}/{y}.png, https://b.example.com/{z}/{x}/{y}.png], }); // 函数形式完全自定义 URL 逻辑 new ImageTileSource({ url: (z, x, y) https://example.com/tiles/${z}/${x}/${y}.png, });源码内部会把字符串/数组形式的 URL 通过makeLoaderFromTemplates()与renderXYZTemplate()展开为加载函数src/ol/source/ImageTile.js#L63-L96也支持直接提供自定义loader函数。在 10.3.0 中新增的关键增强包括zDirection选项控制当视图分辨率处于两个整数缩放级别之间时选择更高还是更低的瓦片级别可传数字或NearestDirectionFunctionsrc/ol/source/ImageTile.js#L48-L51{-y}占位符修复修复了{-y}翻转 Y 坐标占位符在ImageTile源中的处理错误使其与XYZ等源行为一致TileDebug改为ImageTile的子类调试瓦片网格图层从此前的XYZ基类迁移到ImageTile基类便于与新的图片瓦片体系配合调试属性/选项补充transition新瓦片淡入时长、interpolate、crossOrigin、referrerPolicy等均可在构造时配置。仓库中的 examples/pmtiles-image.js 演示了如何从 PMTiles 归档读取图片瓦片并喂给ImageTile源展示了loader自定义加载的典型场景。GeoTIFF数据源的模型变换支持10.3.0 为GeoTIFF数据源源码位于 src/ol/source/GeoTIFF.js新增了模型变换model transformation支持使其能够正确处理旋转、倾斜或翻转flipped的瓦片网格。此前这类非标准网格的 GeoTIFF 影像例如某些合成孔径雷达 SAR 产品无法被正确配准到地图上。在源码中当 TIFF 的fileDirectory中带有ModelTransformation标签时会读取其 4×4 仿射变换矩阵的前 8 个元素并据此调整瓦片网格的配准src/ol/source/GeoTIFF.js#L637-L642const modelTransformation image.fileDirectory.getValue( // ... GeoTIFF ModelTransformation tag 读取 ); if (modelTransformation) { const [a, b, c, d, e, f, g, h] modelTransformation; // 依据该矩阵构造旋转/倾斜/翻转感知的网格变换 }仓库中的 examples/cog-modeltransformation.js 展示了直接加载一张带模型变换的 Cloud Optimized GeoTIFF来自 UMBRA 开放 SAR 数据目录并叠加在 OSM 底图上的完整流程通过cogSource.getView()获取源投影与范围配合proj4注册自定义投影再用transformExtent()将源范围变换到视图投影后fit到视口register(proj4); const cogSource new GeoTIFF({ sources: [{url: https://umbra-open-data-catalog.s3.amazonaws.com/.../xxx_GEC.tif}], }); // ... 创建地图并叠加底图 ... cogSource.getView().then((viewConfig) fromProjectionCode(viewConfig.projection.getCode()).then(() { const view map.getView(); view.fit( transformExtent( viewConfig.extent, viewConfig.projection, view.getProjection(), ), ); }), );内置 UTM 坐标变换10.3.0 在ol/proj中加入了开箱即用的 UTM 投影支持实现位于 src/ol/proj/utm.js无需额外注册 proj4 定义即可在 UTM 投影与经纬度之间互转。支持的投影编码与判定逻辑源码中的zoneFromCode()src/ol/proj/utm.js#L210-L236通过正则识别以下三种编码形式EPSG:326XX—— 北半球 UTM 带如 EPSG:32650 为北半球 50 带EPSG:327XX—— 南半球 UTM 带如 EPSG:32750 为南半球 50 带urn:ogc:def:crs:EPSG::XXXX与http://www.opengis.net/def/crs/EPSG/0/XXXX形式的等价 URI。其中 32601–32660 判定为北半球32701–32760 判定为南半球。makeProjection()与makeTransforms()src/ol/proj/utm.js#L270-L292分别负责创建投影实例单位为米与正反变换函数fromLonLat()/toLonLat()内部实现了基于 WGS84 椭球长半轴 6378137m的标准横轴墨卡托算法中央经线通过zoneToCentralLongitude()(zone - 1) * 6 - 180 3计算东偏移量为 500000m南半球北偏移量附加 10000000m比例因子K0 0.9996。使用方式import {transform} from ol/proj; // 经纬度 → UTM 北半球 50 带 const utm transform([116.39, 39.9], EPSG:4326, EPSG:32650); // UTM → 经纬度 const lonLat transform(utm, EPSG:32650, EPSG:4326);需要说明的是源码注释明确指出这套算法提供的是近似变换The functions here provide approximate transforms to and from UTM. They are not appropriate for use beyond the validity extend of a UTM zone, and the accuracy of the transform decreases toward the zone edges. 即其精度在远离所在带中央经线时会下降不适合超出带有效范围使用对精度要求严苛的场景仍建议使用 proj4 注册完整定义。同时fromLonLat()会将纬度钳制在 -80°84° 之间这与 UTM 系统的有效范围一致。渲染与性能改进常规形状与图标样式的智能缓存10.3.0 将常规形状RegularShape样式接入IconImageCache相关改动见 PR #16349配套的 PR #16362 使用Math.ceil()计算常规形状的画布尺寸。这意味着大量使用同一形状/图标样式的地图如海量点标注可以共享缓存图像避免重复绘制显著降低渲染开销与内存占用同时使用Math.ceil()取整画布尺寸规避了亚像素导致的渲染毛边。VectorImageLayer的 TypeScript 泛型修复PR #16348 修复了VectorImageLayer源码位于 src/ol/layer/VectorImage.js的类型泛型定义使其能够正确推导出图层关联矢量数据源的特征类型。对 TypeScript 用户而言new VectorImageLayer({source})后getSource()返回的特征类型不再退化为FeatureLikeIDE 提示与类型检查更加精准。渲染事件与可见性语义PostRenderFunction的FrameState永不为 nullPR #16415此前在某些场景下 postrender 回调拿不到frameState现在postrender函数始终能获得有效帧状态配套改动PR #16268、#16277确保在没有帧状态时不调用 postrender 函数并支持在 Worker 中执行 postrender 函数isVisible()语义调整PR #16260尚未完成渲染的图层isVisible()现在返回false避免在首帧渲染前产生错误的可见性判断使用event.pixel替代getEventPixelPR #16395简化了事件坐标的获取路径。文本标注与图层选项keepUpright参数PR #16302、#16315新增text-keep-upright扁平样式属性控制文本标签在旋转视图/旋转要素上是否保持直立避免倒置文字影响可读性恢复setDeclutter()方法PR #16383ol/layer/Vector重新支持通过setDeclutter()动态开关标签去重declutterbackground进入Tile图层选项PR #16371瓦片图层现在可以直接配置背景色overlaps选项的 setterPR #16243为相关图层/渲染器补充了overlaps的运行时设置方法URI 组件编码修复PR #16409修正了 URL/URI 组件未正确编码的问题避免含特殊字符的请求地址失效。其他值得关注的变化投影与 OGC 服务OGC TileMatrixSet 的crs现在可以接受带 URI 字符串的 CRS 对象PR #16291并可从 TileMatrixSet 的 CRS 自动设置源投影PR #16293命中检测修正PR #16393hitDetection只对点要素生效避免对线/面产生误判Modify交互 API 改进PR #16296程序化调用 Modify 交互的接口更完善数据压缩库替换PR #16254用fflate替换jszip减小打包体积RBush的forEach支持模板参数PR #16345类型层面增强依赖升级proj4升级到 2.15.0、typescript升级到 5.7.2、jsts升级到 2.12.1、rollup升级到 4.27.4 等完整列表见 changelog/v10.3.0.md 的 Dependency Updates 小节。迁移总结升级到 10.3.0 时需要重点检查两处投影变换调用确认所有transform()调用涉及的投影编码都已注册get(code) ! null否则会抛出No transform available between ...错误WebGLPointsLayer样式将style.variables迁移到 options 根级并留意该图层 API 不稳定、官方后续推荐WebGLVectorLayer的事实。对于新项目建议直接采用WebGLVectorLayer 扁平样式 updateStyleVariables()的方案处理大规模矢量数据用SentinelHub数据源接入哨兵影像处理流程并利用开箱即用的 UTM 变换简化投影处理代码。赞分享前端GIS数据可视化【免费下载链接】openlayersOpenLayers项目地址https://gitcode.com/gh_mirrors/op/openlayers点击查看免费下载相关推荐提升深度学习模型性能tinygrad图像数据增强完全指南提升深度学习模型性能tinygrad图像数据增强完全指南 tinygrad是一个轻量级的深度学习框架它结合了PyTorch的易用性和JAX的函数式变换特性人工智能深度学习大模型Foundations-of-LLMs数据增强文本生成与变换Foundations of LLMs数据增强文本生成与变换 引言为什么数据增强在大语言模型中至关重要 在大语言模型Large Language Mod文档教程大模型Presto 0.249 版本技术解读Hive 3 元数据、数据交换校验与内存治理增强Presto 0.249 版本技术解读Hive 3 元数据、数据交换校验与内存治理增强 Presto 0.249 是一个聚焦稳定性的演进版本重点解决了 Hi大数据数据库后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考