指南：Draw 繪制交互與 tilegrid 瓦片坐標(biāo)體系重構(gòu)詳解)
前端GIS數(shù)據(jù)可視化【免費(fèi)下載鏈接】openlayersOpenLayers項(xiàng)目地址https://gitcode.com/gh_mirrors/op/openlayers點(diǎn)擊查看免費(fèi)下載本篇文章以 OpenLayers 官方 v3.6.0 變更日志 為主體系統(tǒng)解讀該版本對(duì)實(shí)驗(yàn)性experimental特性的一輪整理ol.interaction.Draw的配置項(xiàng)與事件類型重命名、ol.tilegrid的 XYZ 工廠函數(shù)化與瓦片坐標(biāo)變換規(guī)則調(diào)整以及ol.source.TileWMS的wrapX行為變更。讀完本文你將清楚掌握 v3.5.0 升級(jí)到 v3.6.0 時(shí)需要修改的每一處代碼并能結(jié)合當(dāng)前倉(cāng)庫(kù)源碼理解這些 API 背后的設(shè)計(jì)意圖與延續(xù)至今的實(shí)現(xiàn)形態(tài)。版本概覽40 個(gè) PR 與一次實(shí)驗(yàn)特性整理根據(jù)官方變更日志v3.6.0 自 v3.5.0 以來(lái)共合入40 個(gè) pull request涵蓋新特性、缺陷修復(fù)與文檔改進(jìn)。該版本的核心動(dòng)作是對(duì)若干實(shí)驗(yàn)性功能進(jìn)行代碼庫(kù)簡(jiǎn)化因此官方在 Summary 中明確提醒請(qǐng)務(wù)必跟隨升級(jí)說(shuō)明upgrade notes調(diào)整應(yīng)用代碼以保證與最新版本兼容。這輪變更主要集中兩大區(qū)域ol.interaction.Draw繪制交互配置項(xiàng)minPointsPerRing重命名、事件類型命名空間調(diào)整ol.tilegrid瓦片網(wǎng)格體系XYZ構(gòu)造器替換為靜態(tài)工廠函數(shù)、瓦片坐標(biāo)變換公式變更、widths選項(xiàng)移除、TileWMS 的wrapX默認(rèn)值修正。這兩部分內(nèi)容在倉(cāng)庫(kù)的 changelog/upgrade-notes.md 中有完全對(duì)應(yīng)的歷史升級(jí)章節(jié)可作為交叉驗(yàn)證的權(quán)威依據(jù)。下文將逐條展開(kāi)。ol.interaction.Draw變更minPoints 與事件類型命名minPointsPerRing→minPoints從僅多邊形到線、面通用v3.6.0 將 Draw 交互的配置項(xiàng)minPointsPerRing重命名為minPoints并且該選項(xiàng)不再只對(duì)多邊形polygon繪制生效而是同樣適用于線串linestring繪制。舊寫(xiě)法v3.5.0 及之前繪制多邊形時(shí)只有minPointsPerRing可以限制每一圈ring至少要繪制的點(diǎn)數(shù)新寫(xiě)法v3.6.0 起統(tǒng)一使用minPoints線串與多邊形均可配置語(yǔ)義更直觀、覆蓋面更廣。從當(dāng)前倉(cāng)庫(kù)源碼看這一配置項(xiàng)延續(xù)至今。在 src/ol/interaction/Draw.js 中可以看到其文檔定義/** * property {number} [minPoints] The number of points that must be drawn */其內(nèi)部實(shí)現(xiàn)在構(gòu)造器中讀取this.minPoints_ options.minPoints ? options.minPoints : ...見(jiàn) src/ol/interaction/Draw.js。而在完成判定邏輯中線串與多邊形的點(diǎn)數(shù)校驗(yàn)分別使用了它見(jiàn) src/ol/interaction/Draw.js/** type {LineCoordType} */ (sketchCoords).length this.minPoints_; ... potentiallyDone sketchCoordsPoly[0].length this.minPoints_;也就是說(shuō)minPoints決定了繪制到多少個(gè)點(diǎn)時(shí)才允許結(jié)束finish。升級(jí)時(shí)只需做如下替換即可// 舊寫(xiě)法 new ol.interaction.Draw({ source: vectorSource, type: Polygon, minPointsPerRing: 4 }); // 新寫(xiě)法 new ol.interaction.Draw({ source: vectorSource, type: Polygon, minPoints: 4 });事件類型重命名ol.DrawEvent→ol.interaction.DrawEventv3.6.0 同時(shí)將ol.DrawEvent和ol.DrawEventType重命名為ol.interaction.DrawEvent與ol.interaction.DrawEventType。官方特別說(shuō)明只有當(dāng)你的代碼與 OpenLayers 一起編譯compiled together時(shí)這項(xiàng)重命名才會(huì)對(duì)代碼產(chǎn)生影響——如果你只是通過(guò)全局ol命名空間使用庫(kù)則無(wú)需改動(dòng)。當(dāng)前倉(cāng)庫(kù)中 Draw 交互的事件體系正是這套命名在 src/ol/interaction/Draw.js 中DrawEventType定義了三個(gè)事件類型且DrawEvent繼承自 OpenLayers 的基類Eventconst DrawEventType { /** event DrawEvent#drawstart */ DRAWSTART: drawstart, /** event DrawEvent#drawend */ DRAWEND: drawend, /** event DrawEvent#drawabort */ DRAWABORT: drawabort }; export class DrawEvent extends Event { ... }類聲明上通過(guò)fires DrawEvent標(biāo)注見(jiàn) src/ol/interaction/Draw.js并在繪制流程中依次派發(fā)drawstart如 src/ol/interaction/Draw.js、drawendL1478、drawabortL1513事件。升級(jí)后的監(jiān)聽(tīng)代碼形如draw.on(drawstart, function (evt) { // evt 為 ol.interaction.DrawEvent 實(shí)例 // 可通過(guò) evt.feature 獲取正在繪制的草圖要素 }); draw.on(drawend, function (evt) { // 繪制完成evt.feature 為最終要素 });ol.tilegrid變更XYZ 工廠函數(shù)與瓦片坐標(biāo)體系ol.tilegrid.XYZ構(gòu)造器 → 靜態(tài)函數(shù)ol.tilegrid.createXYZ()v3.6.0 將ol.tilegrid.XYZ構(gòu)造器替換為靜態(tài)函數(shù)ol.tilegrid.createXYZ()。新函數(shù)接受與舊構(gòu)造器相同的參數(shù)但返回一個(gè)普通的ol.tilegrid.TileGrid實(shí)例不再有獨(dú)立的 XYZ 子類類型。當(dāng)前倉(cāng)庫(kù)中該工廠函數(shù)位于 src/ol/tilegrid.js其選項(xiàng)類型XYZOptions見(jiàn) src/ol/tilegrid.js定義了以下參數(shù)選項(xiàng)類型默認(rèn)值說(shuō)明extentExtentEPSG:3857 全圖范圍網(wǎng)格范圍XYZ 網(wǎng)格原點(diǎn)取該范圍的左上角未指定maxResolution時(shí)0 級(jí)分辨率由一個(gè)瓦片恰好覆蓋該范圍推算maxResolutionnumber由 extent 與 tileSize 推算0 級(jí)分辨率maxZoomnumber42最大縮放級(jí)別決定網(wǎng)格層級(jí)數(shù)量如maxZoom為 21 表示 0~21 共 22 級(jí)minZoomnumber0最小縮放級(jí)別tileSizenumber \| Size[256, 256]瓦片像素尺寸工廠函數(shù)內(nèi)部用resolutionsFromExtentsrc/ol/tilegrid.js按縮放因子 2即每級(jí)分辨率減半maxResolution / 2^z生成分辨率數(shù)組并據(jù)此構(gòu)造TileGrid。升級(jí)遷移示例// 舊寫(xiě)法new ol.tilegrid.XYZ(...) var tileGrid new ol.tilegrid.XYZ({ maxZoom: 22, tileSize: 512 }); // 新寫(xiě)法ol.tilegrid.createXYZ(...) var tileGrid ol.tilegrid.createXYZ({ maxZoom: 22, tileSize: 512 });倉(cāng)庫(kù)升級(jí)說(shuō)明中亦保留了類似示例見(jiàn) changelog/upgrade-notes.mdol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})可用于渲染瓦片尺寸為 512 的 XYZ 源。內(nèi)部瓦片坐標(biāo)變換-y-1→height-y-1v3.6.0 調(diào)整了 XYZ 源的內(nèi)部瓦片坐標(biāo)方案舊方案y坐標(biāo)通過(guò)-y-1變換為源source使用的坐標(biāo)新方案y坐標(biāo)通過(guò)height-y-1變換其中height是該瓦片坐標(biāo)所在縮放級(jí)別下瓦片網(wǎng)格的行數(shù)。兩者在絕大多數(shù)常見(jiàn)情形下結(jié)果一致因?yàn)閷?duì)全球 XYZ 網(wǎng)格第z級(jí)的行數(shù)恰為2^z此時(shí)-y-1 ≡ 2^z-y-1但新公式在網(wǎng)格范圍被extent裁剪、行數(shù)不再等于2^z時(shí)依然正確。這是一次讓坐標(biāo)變換適配任意網(wǎng)格形狀的底層修正普通應(yīng)用代碼無(wú)需改動(dòng)除非你自行實(shí)現(xiàn)了瓦片 URL 函數(shù)并依賴舊的-y-1語(yǔ)義。widths選項(xiàng)移除WMTS 用sizes其他網(wǎng)格用extentv3.6.0 移除了ol.tilegrid.TileGrid及其子類如 XYZ、WMTS的widths構(gòu)造選項(xiàng)官方說(shuō)明該選項(xiàng)不再是 180° 經(jīng)線處正確換行wrapping所必需的。取而代之的是兩條路徑ol.tilegrid.WMTS新增sizes選項(xiàng)。其中每一項(xiàng)是一個(gè)ol.Size數(shù)組第一項(xiàng)為width對(duì)應(yīng) WMTS capabilities 中的TileMatrixWidth第二項(xiàng)為height對(duì)應(yīng)TileMatrixHeight其他瓦片網(wǎng)格改用extent來(lái)限定源source會(huì)請(qǐng)求的瓦片范圍。從當(dāng)前倉(cāng)庫(kù)實(shí)現(xiàn)可以印證這套設(shè)計(jì)的延續(xù)src/ol/tilegrid/WMTS.js 中sizes被定義為每個(gè)縮放級(jí)別的瓦片行數(shù)與列數(shù)并在解析 WMTS capabilities 時(shí)按矩陣寬高推入src/ol/tilegrid/WMTS.jssizes.push([elt[MatrixWidth], elt[MatrixHeight]])src/ol/tilegrid/TileGrid.js 中extent的語(yǔ)義明確為T(mén)ileSource源不會(huì)請(qǐng)求該范圍之外的任何瓦片同時(shí)當(dāng)未配置origin/origins時(shí)網(wǎng)格原點(diǎn)自動(dòng)取 extent 的左上角src/ol/tilegrid/TileGrid.js并在構(gòu)造時(shí)基于 extent 預(yù)先計(jì)算各層級(jí)瓦片范圍calculateTileRanges_L232-L233。因此升級(jí)時(shí)若你此前依賴widths限制請(qǐng)求范圍應(yīng)改為// 舊寫(xiě)法widths // var tileGrid new ol.tilegrid.TileGrid({ ... widths: [2, 4, 8] ... }); // 新寫(xiě)法extent以自定義范圍限制瓦片請(qǐng)求 var tileGrid new ol.tilegrid.TileGrid({ extent: [-180, -85, 180, 85], resolutions: resolutions });而對(duì)于 WMTS 網(wǎng)格直接通過(guò)sizes描述每一矩陣的尺寸即可。ol.source.TileWMS的wrapX默認(rèn)值從undefined變?yōu)閠ruev3.6.0 之前ol.source.TileWMS的wrapX默認(rèn)值是undefined此時(shí)源會(huì)發(fā)送超出范圍out-of-extent的瓦片 BBOX的 WMS 請(qǐng)求。從 v3.6.0 起wrapX只能是true或false新默認(rèn)值為true官方強(qiáng)調(diào)通常不需要應(yīng)用代碼改動(dòng)但效果是超出范圍的瓦片請(qǐng)求不再使用越界 BBOX而是改用平移到真實(shí)世界坐標(biāo)的 BBOX。當(dāng)前倉(cāng)庫(kù)中該默認(rèn)值邏輯清晰可見(jiàn)src/ol/source/TileWMS.js 定義選項(xiàng)、L100 賦值wrapX: options.wrapX ! undefined ? options.wrapX : true,結(jié)合上一節(jié)提到的ol/tilegrid.js中的wrapX(tileGrid, tileCoord, projection)輔助函數(shù)src/ol/tilegrid.js可以看出這套水平環(huán)繞世界的能力在 v3.6.0 后成為瓦片請(qǐng)求流程的默認(rèn)行為當(dāng)瓦片中心落在投影范圍之外時(shí)會(huì)自動(dòng)按世界寬度平移回有效范圍。v3.6.0 新特性與修復(fù)亮點(diǎn)除升級(jí)說(shuō)明外v3.6.0 的 40 個(gè) PR 還包含大量功能增強(qiáng)與修復(fù)按主題歸納如下PR 編號(hào)與描述均來(lái)自官方 變更日志幾何與渲染#3764為ol.geom.Geometry新增intersectsExtent的實(shí)現(xiàn)與測(cè)試#3711修復(fù)并測(cè)試ol.color.blend顏色混合#3637 / #3659實(shí)現(xiàn)后又回退了ol.renderer.Layer#forEachFeatureAtCoordinate表明該特性當(dāng)時(shí)仍在反復(fù)評(píng)估中#3718為renderOrder增加斷言#3662澄清renderBuffer選項(xiàng)文檔。交互Interaction#3757將mapBrowserEvent作為ol.SelectEvent的成員暴露#3673增強(qiáng)ol.interaction.Draw的控制能力例如支持繪制正方形square drawing#3725補(bǔ)充ModifyOptions#pixelTolerance的默認(rèn)值文檔#3740為 select 交互補(bǔ)充fires文檔標(biāo)注。瓦片與網(wǎng)格#3639為ol.tilegrid.TileGrid增加extent支持與上文widths移除直接相關(guān)#3722在內(nèi)部使用正確的TileCoord變換函數(shù)#3747 / #3759將tileCoordTransform恢復(fù)為成員并標(biāo)記api#3689修復(fù) WMTSoptionsFromCapabilities在缺少OperationsMetadata段時(shí)崩潰的問(wèn)題。格式Format#3699 / #3739為 WKT 格式增加科學(xué)計(jì)數(shù)法支持并簡(jiǎn)化其檢測(cè)邏輯。文檔、構(gòu)建與工程化#3749、#3693、#3694、#3672修正 API 文檔、ol.extent.containsExtent文檔、升級(jí)說(shuō)明中的拼寫(xiě)與內(nèi)部鏈接#3738改進(jìn)ol.TileUrlFunctionType的文檔#3741增強(qiáng)回調(diào)/過(guò)濾函數(shù)參數(shù)與返回值文檔#3683改進(jìn) Map 關(guān)于 layers 與 layergroups 的文檔#3692支持在 Windows Cygwin 環(huán)境下構(gòu)建#3649收緊serve.js中的正則#3697改用合法的 SPDX license 表達(dá)式#3677為示例examples補(bǔ)充 metadata#3665將 proj4js 與投影定義文件加入示例資源#3751測(cè)試不再依賴遠(yuǎn)程服務(wù)#3710為ol.extent增加更多測(cè)試用例#3732、#3735、#3736、#3682、#3664、#3663、#3709、#3688 等涵蓋示例標(biāo)記修正、按鈕失焦綁定方法、WebGLContextAttributes extern 補(bǔ)充、下載頁(yè)鏈接等細(xì)節(jié)。升級(jí)自檢清單升級(jí)到 v3.6.0或閱讀歷史代碼、遷移舊應(yīng)用時(shí)建議對(duì)照以下清單逐項(xiàng)排查Draw 交互搜索minPointsPerRing全部替換為minPoints若代碼與 OpenLayers 一起編譯將ol.DrawEvent/ol.DrawEventType改為ol.interaction.DrawEvent/ol.interaction.DrawEventTypeXYZ 網(wǎng)格搜索new ol.tilegrid.XYZ(改為ol.tilegrid.createXYZ(并確認(rèn)返回類型按TileGrid使用TileGrid 配置移除widthsWMTS 網(wǎng)格改用sizes寬、高分別對(duì)應(yīng)TileMatrixWidth/TileMatrixHeight其他網(wǎng)格改用extent限制瓦片請(qǐng)求范圍TileWMS確認(rèn)沒(méi)有依賴發(fā)送越界 BBOX的行為wrapX現(xiàn)在固定為布爾值且默認(rèn)true自定義瓦片 URL 函數(shù)確認(rèn)內(nèi)部 y 坐標(biāo)變換不再依賴舊的-y-1公式。以上涉及的歷史升級(jí)條目可隨時(shí)回到 changelog/v3.6.0.md 與 changelog/upgrade-notes.md 核對(duì)原文對(duì)應(yīng) API 的現(xiàn)行實(shí)現(xiàn)可分別查閱 src/ol/interaction/Draw.js、src/ol/tilegrid.js、src/ol/tilegrid/TileGrid.js、src/ol/tilegrid/WMTS.js 與 src/ol/source/TileWMS.js?？偨Y(jié)v3.6.0 是 OpenLayers 在瓦片體系與繪制交互上一次方向明確的整理createXYZ()工廠函數(shù)統(tǒng)一了 XYZ 網(wǎng)格的創(chuàng)建方式height-y-1坐標(biāo)變換讓任意范圍網(wǎng)格都能正確換算瓦片坐標(biāo)extent/sizes取代了widthswrapX默認(rèn)開(kāi)啟則讓 WMS 請(qǐng)求始終落在真實(shí)世界坐標(biāo)內(nèi)同時(shí)minPoints與事件類型的重命名進(jìn)一步統(tǒng)一了 Draw 交互的配置與類型模型。這些變更雖集中在實(shí)驗(yàn)性功能上卻深刻影響了后續(xù)版本中瓦片網(wǎng)格與繪制交互的 API 形態(tài)理解這輪升級(jí)對(duì)閱讀 OpenLayers 歷史代碼與遷移舊工程都很有價(jià)值。贊分享前端GIS數(shù)據(jù)可視化【免費(fèi)下載鏈接】openlayersOpenLayers項(xiàng)目地址https://gitcode.com/gh_mirrors/op/openlayers點(diǎn)擊查看免費(fèi)下載相關(guān)推薦OpenLayers 10.10.0 版本詳解WebGL 文本渲染、智能瓦片繪制與 WMTS 瓦片矩陣限制支持OpenLayers 10.10.0 版本詳解WebGL 文本渲染、智能瓦片繪制與 WMTS 瓦片矩陣限制支持 OpenLayers 10.10.0 是一次覆前端GIS數(shù)據(jù)可視化OpenLayers 4.3.0 升級(jí)指南像素拾取、球面測(cè)量與交互/矢量瓦片新特性全解析OpenLayers 4.3.0 升級(jí)指南像素拾取、球面測(cè)量與交互/矢量瓦片新特性全解析 本指南以 OpenLayers v4.3.0 發(fā)布說(shuō)明為核心系統(tǒng)梳前端GIS數(shù)據(jù)可視化Dear PyGui 繪圖系統(tǒng)完整指南Plot 架構(gòu)、數(shù)據(jù)序列、坐標(biāo)軸控制與高級(jí)交互Dear PyGui 繪圖系統(tǒng)完整指南Plot 架構(gòu)、數(shù)據(jù)序列、坐標(biāo)軸控制與高級(jí)交互 Dear PyGui 的 plot 是構(gòu)建在底層 C 庫(kù) ImPlo桌面應(yīng)用UI組件創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 OpenLayers v3.6.0 升級(jí)指南：Draw 繪制交互與 tilegrid 瓦片坐標(biāo)體系重構(gòu)詳解
前端GIS數(shù)據(jù)可視化【免費(fèi)下載鏈接】openlayersOpenLayers項(xiàng)目地址https://gitcode.com/gh_mirrors/op/openlayers點(diǎn)擊查看免費(fèi)下載本篇文章以 OpenLayers 官方 v3.6.0 變更日志 為主體系統(tǒng)解讀該版本對(duì)實(shí)驗(yàn)性experimental特性的一輪整理ol.interaction.Draw的配置項(xiàng)與事件類型重命名、ol.tilegrid的 XYZ 工廠函數(shù)化與瓦片坐標(biāo)變換規(guī)則調(diào)整以及ol.source.TileWMS的wrapX行為變更。讀完本文你將清楚掌握 v3.5.0 升級(jí)到 v3.6.0 時(shí)需要修改的每一處代碼并能結(jié)合當(dāng)前倉(cāng)庫(kù)源碼理解這些 API 背后的設(shè)計(jì)意圖與延續(xù)至今的實(shí)現(xiàn)形態(tài)。版本概覽40 個(gè) PR 與一次實(shí)驗(yàn)特性整理根據(jù)官方變更日志v3.6.0 自 v3.5.0 以來(lái)共合入40 個(gè) pull request涵蓋新特性、缺陷修復(fù)與文檔改進(jìn)。該版本的核心動(dòng)作是對(duì)若干實(shí)驗(yàn)性功能進(jìn)行代碼庫(kù)簡(jiǎn)化因此官方在 Summary 中明確提醒請(qǐng)務(wù)必跟隨升級(jí)說(shuō)明upgrade notes調(diào)整應(yīng)用代碼以保證與最新版本兼容。這輪變更主要集中兩大區(qū)域ol.interaction.Draw繪制交互配置項(xiàng)minPointsPerRing重命名、事件類型命名空間調(diào)整ol.tilegrid瓦片網(wǎng)格體系XYZ構(gòu)造器替換為靜態(tài)工廠函數(shù)、瓦片坐標(biāo)變換公式變更、widths選項(xiàng)移除、TileWMS 的wrapX默認(rèn)值修正。這兩部分內(nèi)容在倉(cāng)庫(kù)的 changelog/upgrade-notes.md 中有完全對(duì)應(yīng)的歷史升級(jí)章節(jié)可作為交叉驗(yàn)證的權(quán)威依據(jù)。下文將逐條展開(kāi)。ol.interaction.Draw變更minPoints 與事件類型命名minPointsPerRing→minPoints從僅多邊形到線、面通用v3.6.0 將 Draw 交互的配置項(xiàng)minPointsPerRing重命名為minPoints并且該選項(xiàng)不再只對(duì)多邊形polygon繪制生效而是同樣適用于線串linestring繪制。舊寫(xiě)法v3.5.0 及之前繪制多邊形時(shí)只有minPointsPerRing可以限制每一圈ring至少要繪制的點(diǎn)數(shù)新寫(xiě)法v3.6.0 起統(tǒng)一使用minPoints線串與多邊形均可配置語(yǔ)義更直觀、覆蓋面更廣。從當(dāng)前倉(cāng)庫(kù)源碼看這一配置項(xiàng)延續(xù)至今。在 src/ol/interaction/Draw.js 中可以看到其文檔定義/** * property {number} [minPoints] The number of points that must be drawn */其內(nèi)部實(shí)現(xiàn)在構(gòu)造器中讀取this.minPoints_ options.minPoints ? options.minPoints : ...見(jiàn) src/ol/interaction/Draw.js。而在完成判定邏輯中線串與多邊形的點(diǎn)數(shù)校驗(yàn)分別使用了它見(jiàn) src/ol/interaction/Draw.js/** type {LineCoordType} */ (sketchCoords).length this.minPoints_; ... potentiallyDone sketchCoordsPoly[0].length this.minPoints_;也就是說(shuō)minPoints決定了繪制到多少個(gè)點(diǎn)時(shí)才允許結(jié)束finish。升級(jí)時(shí)只需做如下替換即可// 舊寫(xiě)法 new ol.interaction.Draw({ source: vectorSource, type: Polygon, minPointsPerRing: 4 }); // 新寫(xiě)法 new ol.interaction.Draw({ source: vectorSource, type: Polygon, minPoints: 4 });事件類型重命名ol.DrawEvent→ol.interaction.DrawEventv3.6.0 同時(shí)將ol.DrawEvent和ol.DrawEventType重命名為ol.interaction.DrawEvent與ol.interaction.DrawEventType。官方特別說(shuō)明只有當(dāng)你的代碼與 OpenLayers 一起編譯compiled together時(shí)這項(xiàng)重命名才會(huì)對(duì)代碼產(chǎn)生影響——如果你只是通過(guò)全局ol命名空間使用庫(kù)則無(wú)需改動(dòng)。當(dāng)前倉(cāng)庫(kù)中 Draw 交互的事件體系正是這套命名在 src/ol/interaction/Draw.js 中DrawEventType定義了三個(gè)事件類型且DrawEvent繼承自 OpenLayers 的基類Eventconst DrawEventType { /** event DrawEvent#drawstart */ DRAWSTART: drawstart, /** event DrawEvent#drawend */ DRAWEND: drawend, /** event DrawEvent#drawabort */ DRAWABORT: drawabort }; export class DrawEvent extends Event { ... }類聲明上通過(guò)fires DrawEvent標(biāo)注見(jiàn) src/ol/interaction/Draw.js并在繪制流程中依次派發(fā)drawstart如 src/ol/interaction/Draw.js、drawendL1478、drawabortL1513事件。升級(jí)后的監(jiān)聽(tīng)代碼形如draw.on(drawstart, function (evt) { // evt 為 ol.interaction.DrawEvent 實(shí)例 // 可通過(guò) evt.feature 獲取正在繪制的草圖要素 }); draw.on(drawend, function (evt) { // 繪制完成evt.feature 為最終要素 });ol.tilegrid變更XYZ 工廠函數(shù)與瓦片坐標(biāo)體系ol.tilegrid.XYZ構(gòu)造器 → 靜態(tài)函數(shù)ol.tilegrid.createXYZ()v3.6.0 將ol.tilegrid.XYZ構(gòu)造器替換為靜態(tài)函數(shù)ol.tilegrid.createXYZ()。新函數(shù)接受與舊構(gòu)造器相同的參數(shù)但返回一個(gè)普通的ol.tilegrid.TileGrid實(shí)例不再有獨(dú)立的 XYZ 子類類型。當(dāng)前倉(cāng)庫(kù)中該工廠函數(shù)位于 src/ol/tilegrid.js其選項(xiàng)類型XYZOptions見(jiàn) src/ol/tilegrid.js定義了以下參數(shù)選項(xiàng)類型默認(rèn)值說(shuō)明extentExtentEPSG:3857 全圖范圍網(wǎng)格范圍XYZ 網(wǎng)格原點(diǎn)取該范圍的左上角未指定maxResolution時(shí)0 級(jí)分辨率由一個(gè)瓦片恰好覆蓋該范圍推算maxResolutionnumber由 extent 與 tileSize 推算0 級(jí)分辨率maxZoomnumber42最大縮放級(jí)別決定網(wǎng)格層級(jí)數(shù)量如maxZoom為 21 表示 0~21 共 22 級(jí)minZoomnumber0最小縮放級(jí)別tileSizenumber \| Size[256, 256]瓦片像素尺寸工廠函數(shù)內(nèi)部用resolutionsFromExtentsrc/ol/tilegrid.js按縮放因子 2即每級(jí)分辨率減半maxResolution / 2^z生成分辨率數(shù)組并據(jù)此構(gòu)造TileGrid。升級(jí)遷移示例// 舊寫(xiě)法new ol.tilegrid.XYZ(...) var tileGrid new ol.tilegrid.XYZ({ maxZoom: 22, tileSize: 512 }); // 新寫(xiě)法ol.tilegrid.createXYZ(...) var tileGrid ol.tilegrid.createXYZ({ maxZoom: 22, tileSize: 512 });倉(cāng)庫(kù)升級(jí)說(shuō)明中亦保留了類似示例見(jiàn) changelog/upgrade-notes.mdol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})可用于渲染瓦片尺寸為 512 的 XYZ 源。內(nèi)部瓦片坐標(biāo)變換-y-1→height-y-1v3.6.0 調(diào)整了 XYZ 源的內(nèi)部瓦片坐標(biāo)方案舊方案y坐標(biāo)通過(guò)-y-1變換為源source使用的坐標(biāo)新方案y坐標(biāo)通過(guò)height-y-1變換其中height是該瓦片坐標(biāo)所在縮放級(jí)別下瓦片網(wǎng)格的行數(shù)。兩者在絕大多數(shù)常見(jiàn)情形下結(jié)果一致因?yàn)閷?duì)全球 XYZ 網(wǎng)格第z級(jí)的行數(shù)恰為2^z此時(shí)-y-1 ≡ 2^z-y-1但新公式在網(wǎng)格范圍被extent裁剪、行數(shù)不再等于2^z時(shí)依然正確。這是一次讓坐標(biāo)變換適配任意網(wǎng)格形狀的底層修正普通應(yīng)用代碼無(wú)需改動(dòng)除非你自行實(shí)現(xiàn)了瓦片 URL 函數(shù)并依賴舊的-y-1語(yǔ)義。widths選項(xiàng)移除WMTS 用sizes其他網(wǎng)格用extentv3.6.0 移除了ol.tilegrid.TileGrid及其子類如 XYZ、WMTS的widths構(gòu)造選項(xiàng)官方說(shuō)明該選項(xiàng)不再是 180° 經(jīng)線處正確換行wrapping所必需的。取而代之的是兩條路徑ol.tilegrid.WMTS新增sizes選項(xiàng)。其中每一項(xiàng)是一個(gè)ol.Size數(shù)組第一項(xiàng)為width對(duì)應(yīng) WMTS capabilities 中的TileMatrixWidth第二項(xiàng)為height對(duì)應(yīng)TileMatrixHeight其他瓦片網(wǎng)格改用extent來(lái)限定源source會(huì)請(qǐng)求的瓦片范圍。從當(dāng)前倉(cāng)庫(kù)實(shí)現(xiàn)可以印證這套設(shè)計(jì)的延續(xù)src/ol/tilegrid/WMTS.js 中sizes被定義為每個(gè)縮放級(jí)別的瓦片行數(shù)與列數(shù)并在解析 WMTS capabilities 時(shí)按矩陣寬高推入src/ol/tilegrid/WMTS.jssizes.push([elt[MatrixWidth], elt[MatrixHeight]])src/ol/tilegrid/TileGrid.js 中extent的語(yǔ)義明確為T(mén)ileSource源不會(huì)請(qǐng)求該范圍之外的任何瓦片同時(shí)當(dāng)未配置origin/origins時(shí)網(wǎng)格原點(diǎn)自動(dòng)取 extent 的左上角src/ol/tilegrid/TileGrid.js并在構(gòu)造時(shí)基于 extent 預(yù)先計(jì)算各層級(jí)瓦片范圍calculateTileRanges_L232-L233。因此升級(jí)時(shí)若你此前依賴widths限制請(qǐng)求范圍應(yīng)改為// 舊寫(xiě)法widths // var tileGrid new ol.tilegrid.TileGrid({ ... widths: [2, 4, 8] ... }); // 新寫(xiě)法extent以自定義范圍限制瓦片請(qǐng)求 var tileGrid new ol.tilegrid.TileGrid({ extent: [-180, -85, 180, 85], resolutions: resolutions });而對(duì)于 WMTS 網(wǎng)格直接通過(guò)sizes描述每一矩陣的尺寸即可。ol.source.TileWMS的wrapX默認(rèn)值從undefined變?yōu)閠ruev3.6.0 之前ol.source.TileWMS的wrapX默認(rèn)值是undefined此時(shí)源會(huì)發(fā)送超出范圍out-of-extent的瓦片 BBOX的 WMS 請(qǐng)求。從 v3.6.0 起wrapX只能是true或false新默認(rèn)值為true官方強(qiáng)調(diào)通常不需要應(yīng)用代碼改動(dòng)但效果是超出范圍的瓦片請(qǐng)求不再使用越界 BBOX而是改用平移到真實(shí)世界坐標(biāo)的 BBOX。當(dāng)前倉(cāng)庫(kù)中該默認(rèn)值邏輯清晰可見(jiàn)src/ol/source/TileWMS.js 定義選項(xiàng)、L100 賦值wrapX: options.wrapX ! undefined ? options.wrapX : true,結(jié)合上一節(jié)提到的ol/tilegrid.js中的wrapX(tileGrid, tileCoord, projection)輔助函數(shù)src/ol/tilegrid.js可以看出這套水平環(huán)繞世界的能力在 v3.6.0 后成為瓦片請(qǐng)求流程的默認(rèn)行為當(dāng)瓦片中心落在投影范圍之外時(shí)會(huì)自動(dòng)按世界寬度平移回有效范圍。v3.6.0 新特性與修復(fù)亮點(diǎn)除升級(jí)說(shuō)明外v3.6.0 的 40 個(gè) PR 還包含大量功能增強(qiáng)與修復(fù)按主題歸納如下PR 編號(hào)與描述均來(lái)自官方 變更日志幾何與渲染#3764為ol.geom.Geometry新增intersectsExtent的實(shí)現(xiàn)與測(cè)試#3711修復(fù)并測(cè)試ol.color.blend顏色混合#3637 / #3659實(shí)現(xiàn)后又回退了ol.renderer.Layer#forEachFeatureAtCoordinate表明該特性當(dāng)時(shí)仍在反復(fù)評(píng)估中#3718為renderOrder增加斷言#3662澄清renderBuffer選項(xiàng)文檔。交互Interaction#3757將mapBrowserEvent作為ol.SelectEvent的成員暴露#3673增強(qiáng)ol.interaction.Draw的控制能力例如支持繪制正方形square drawing#3725補(bǔ)充ModifyOptions#pixelTolerance的默認(rèn)值文檔#3740為 select 交互補(bǔ)充fires文檔標(biāo)注。瓦片與網(wǎng)格#3639為ol.tilegrid.TileGrid增加extent支持與上文widths移除直接相關(guān)#3722在內(nèi)部使用正確的TileCoord變換函數(shù)#3747 / #3759將tileCoordTransform恢復(fù)為成員并標(biāo)記api#3689修復(fù) WMTSoptionsFromCapabilities在缺少OperationsMetadata段時(shí)崩潰的問(wèn)題。格式Format#3699 / #3739為 WKT 格式增加科學(xué)計(jì)數(shù)法支持并簡(jiǎn)化其檢測(cè)邏輯。文檔、構(gòu)建與工程化#3749、#3693、#3694、#3672修正 API 文檔、ol.extent.containsExtent文檔、升級(jí)說(shuō)明中的拼寫(xiě)與內(nèi)部鏈接#3738改進(jìn)ol.TileUrlFunctionType的文檔#3741增強(qiáng)回調(diào)/過(guò)濾函數(shù)參數(shù)與返回值文檔#3683改進(jìn) Map 關(guān)于 layers 與 layergroups 的文檔#3692支持在 Windows Cygwin 環(huán)境下構(gòu)建#3649收緊serve.js中的正則#3697改用合法的 SPDX license 表達(dá)式#3677為示例examples補(bǔ)充 metadata#3665將 proj4js 與投影定義文件加入示例資源#3751測(cè)試不再依賴遠(yuǎn)程服務(wù)#3710為ol.extent增加更多測(cè)試用例#3732、#3735、#3736、#3682、#3664、#3663、#3709、#3688 等涵蓋示例標(biāo)記修正、按鈕失焦綁定方法、WebGLContextAttributes extern 補(bǔ)充、下載頁(yè)鏈接等細(xì)節(jié)。升級(jí)自檢清單升級(jí)到 v3.6.0或閱讀歷史代碼、遷移舊應(yīng)用時(shí)建議對(duì)照以下清單逐項(xiàng)排查Draw 交互搜索minPointsPerRing全部替換為minPoints若代碼與 OpenLayers 一起編譯將ol.DrawEvent/ol.DrawEventType改為ol.interaction.DrawEvent/ol.interaction.DrawEventTypeXYZ 網(wǎng)格搜索new ol.tilegrid.XYZ(改為ol.tilegrid.createXYZ(并確認(rèn)返回類型按TileGrid使用TileGrid 配置移除widthsWMTS 網(wǎng)格改用sizes寬、高分別對(duì)應(yīng)TileMatrixWidth/TileMatrixHeight其他網(wǎng)格改用extent限制瓦片請(qǐng)求范圍TileWMS確認(rèn)沒(méi)有依賴發(fā)送越界 BBOX的行為wrapX現(xiàn)在固定為布爾值且默認(rèn)true自定義瓦片 URL 函數(shù)確認(rèn)內(nèi)部 y 坐標(biāo)變換不再依賴舊的-y-1公式。以上涉及的歷史升級(jí)條目可隨時(shí)回到 changelog/v3.6.0.md 與 changelog/upgrade-notes.md 核對(duì)原文對(duì)應(yīng) API 的現(xiàn)行實(shí)現(xiàn)可分別查閱 src/ol/interaction/Draw.js、src/ol/tilegrid.js、src/ol/tilegrid/TileGrid.js、src/ol/tilegrid/WMTS.js 與 src/ol/source/TileWMS.js?？偨Y(jié)v3.6.0 是 OpenLayers 在瓦片體系與繪制交互上一次方向明確的整理createXYZ()工廠函數(shù)統(tǒng)一了 XYZ 網(wǎng)格的創(chuàng)建方式height-y-1坐標(biāo)變換讓任意范圍網(wǎng)格都能正確換算瓦片坐標(biāo)extent/sizes取代了widthswrapX默認(rèn)開(kāi)啟則讓 WMS 請(qǐng)求始終落在真實(shí)世界坐標(biāo)內(nèi)同時(shí)minPoints與事件類型的重命名進(jìn)一步統(tǒng)一了 Draw 交互的配置與類型模型。這些變更雖集中在實(shí)驗(yàn)性功能上卻深刻影響了后續(xù)版本中瓦片網(wǎng)格與繪制交互的 API 形態(tài)理解這輪升級(jí)對(duì)閱讀 OpenLayers 歷史代碼與遷移舊工程都很有價(jià)值。贊分享前端GIS數(shù)據(jù)可視化【免費(fèi)下載鏈接】openlayersOpenLayers項(xiàng)目地址https://gitcode.com/gh_mirrors/op/openlayers點(diǎn)擊查看免費(fèi)下載相關(guān)推薦OpenLayers 10.10.0 版本詳解WebGL 文本渲染、智能瓦片繪制與 WMTS 瓦片矩陣限制支持OpenLayers 10.10.0 版本詳解WebGL 文本渲染、智能瓦片繪制與 WMTS 瓦片矩陣限制支持 OpenLayers 10.10.0 是一次覆前端GIS數(shù)據(jù)可視化OpenLayers 4.3.0 升級(jí)指南像素拾取、球面測(cè)量與交互/矢量瓦片新特性全解析OpenLayers 4.3.0 升級(jí)指南像素拾取、球面測(cè)量與交互/矢量瓦片新特性全解析 本指南以 OpenLayers v4.3.0 發(fā)布說(shuō)明為核心系統(tǒng)梳前端GIS數(shù)據(jù)可視化Dear PyGui 繪圖系統(tǒng)完整指南Plot 架構(gòu)、數(shù)據(jù)序列、坐標(biāo)軸控制與高級(jí)交互Dear PyGui 繪圖系統(tǒng)完整指南Plot 架構(gòu)、數(shù)據(jù)序列、坐標(biāo)軸控制與高級(jí)交互 Dear PyGui 的 plot 是構(gòu)建在底層 C 庫(kù) ImPlo桌面應(yīng)用UI組件創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考