需求：通過給定的坐標和層級，算出其所對應的瓦片位置（xyz）
function calculateTileXY(_lon, _lat, _level) { let topTileFromX = -180; //坐標系原點的x的值，我這里用的4490， let topTileFromY = 90; //坐標系原點的y的值 //根據你自己對應的切片方案改，這個就是其解析度resolution let resolution = { 11: 2.3794610058302801e-006, 10: 5.3644181309599223e-006, 9: 8.9932384380594528e-006, 8: 1.0728836259540383e-005, 7: 2.1457672519080767e-005, 6: 4.2915345038161533e-005, 5: 8.5830690078702524e-005, 4: 0.0001716613801550256, 3: 0.00034332276031005121, 2: 0.00068664552062010242, 1: 0.00118973050291514 }; let level = _level; //也就是zoom let lon = _lon; let lat = _lat; let tilesize = 128 //這個值表示的是每張切片的大小,一般都是256，我這是特殊情況 let coef = resolution[level] * tilesize; let x_num = Math.round((lon - topTileFromX) / coef); let y_num = Math.round((topTileFromY - lat) / coef); let Tile_top_left_x = topTileFromX + (x_num - 1) * resolution[level] * tilesize let Tile_top_left_y = topTileFromY + (y_num - 1) * resolution[level] * tilesize let Tile_bottom_right_x = topTileFromX + x_num * resolution[level] * tilesize let Tile_bottom_right_y = topTileFromY + y_num * resolution[level] * tilesize return { x: x_num, y: y_num, //該Tile瓦片的地理坐標范圍 Tile_top_left_x: Tile_top_left_x, //左上角 Tile_top_left_y: Tile_top_left_y, Tile_bottom_right_x: Tile_bottom_right_x, //右下角 Tile_bottom_right_y: Tile_bottom_right_y } }
理論依據參考WebGIS前端地圖顯示之根據地理范圍換算出瓦片行列號的原理(核心)
1.前言
螢屏上一像素等于實際中多少單位長度（米或經緯度）的換算方法
2.影像金字塔簡介
2.1 為什么要出現影像金字塔這個概念
現在，我假設我們的服務器上有一個1G的影像，需要將其在前端進行顯示，我們傳統的做法就是首先將服務器中的1G影像下載到前端，然后瀏覽器加載渲染出圖，但是大家想想，首先客戶端下載1G的影像需要的時間一定是個漫長的程序，其次瀏覽器加載這么大的檔案也多半會導致其崩潰，而最重要的一個問題是，我們的需求僅僅是瀏覽全圖中的某一個區域下的某幾個級別，現在卻將全圖下載完畢了，而這同樣還導致了資料的不安全性（下載到本地），同時我們的每一次放大和縮小以及拖拽都將會使瀏覽器花上足夠長的時間去渲染，
可見，傳統的方式是不符合實際需求的，到后來，又有了新的解決方法，比如arcgis的IMS版本中提出了動態出圖的概念，也就是當前端發出的請求里包含了需要顯示的范圍、顯示視窗的大小等引數后，后臺動態的在原始資料中切出一個符合需求的瓦片，然后將這個資料回傳給前臺，并且在服務器中對這個瓦片做快取，
但是，這個方法前端出圖依舊很慢，并且使地圖服務器的壓力過大，終于，我們的影像金字塔解決方案出現了，
2.2原理
影像金字塔就是，我們首先將原始影像按照用戶的需求，比如用戶需要顯示多少種比例尺下的資料，需要顯示的是原始影像中的哪個區域的資料，將原始影像按照這些需求進行劃分和提取，如圖：
最低層就是我們提取和劃分出的比例尺最小的一級的瓦片，而最上層的則是比例尺最大的一級的瓦片，我們仔細觀察可以發現這樣的一個規律：比例尺越小的級別瓦片資料越少，反之則越大，而這個規律導致的結果就是：比例尺越小的級別切圖的速度越快，同時，同樣大小的瓦片所包含的影像范圍越多，
當我們建立好了影像金子塔后，前端再請求地圖時，則將只是在切好的瓦片快取中，找到對應級別里對應的瓦片即可，然后在前端將這些請求到的瓦片拼接出來，便可以得到用戶需要的級別下的可視范圍內的瓦片了，
3.瓦片行列號的換算原理
3.1 為什么要換算瓦片行列號
影像圖切成離散型圖后檔案的組織形式，檔案的組織其實是按照瓦片的級別、行、列號來組織的，事實上，緊湊型瓦片（Bundle）的組織樣式也是如此，只是它在得到了行列號后還要進行一系列換算，比如讀取索引檔案找到檔案中的偏移量等，這個換算方式我在以后的章節跟大家來討論，并且，標準的WMS請求中也涉及到行列號的換算，WMS請求中有一個Bbox的引數，而這個引數也與行列號的換算有關系，而標準的WMTS請求中，TILEMATRIX、TILEROW、TILECOL這三個引數代表的就是瓦片的級別、行、列號，
由此可見，不管是針對哪種離線或在線的地圖的瓦片請求中，得到瓦片的level、col、row是請求能夠實作的核心，
3.2瓦片行列號換算原理
下面，我們先給出瓦片行列號換算的公式，
假設，地圖切圖的原點是（x0,y0），地圖的瓦片大小是tileSize，地圖螢屏上1像素代表的實際距離是resolution，計算坐標點（x,y）所在的瓦片的行列號的公式是：
col = floor((x0 - x)/( tileSize*resolution))
row = floor((y0 - y)/( tileSize*resolution))
這個公式應該不難理解，簡單點說就是，首先算出一個瓦片所包含的實際長度是多少LtileSize，然后再算出此時螢屏上的地理坐標點離瓦片切圖的起始點間的實際距離LrealSize，然后用實際距離除以一個瓦片的實際長度，即可得此時的瓦片行列號：LrealSize/LtileSize，
3.3 resolution的換算原理
當系統是經緯度系統時，此resolution可以直接使用切圖檔案中的resolution，如果系統是平面坐標系統時，此resolution的演算法是：
resolution=scale*inch2centimeter/dpi，其中scale是地圖比例尺，inch2centimeter為英寸轉厘米的引數，dpi為1英寸所包含的像素，
4.實際系統中的運用情況
現在我把實際的運用中的需求總結如下：
（1）得到畫布的高度和寬度以及此時需要顯示的地圖的幾何范圍
（2）得到畫布的高度和寬度以及此時需要顯示的地圖的幾何范圍，同時也得到了需要顯示的地圖的級別
最后，我們需要得到在這兩種需求下的瓦片行列號范圍，
5.換算流程
5.1 流程圖
針對在第3節中提到的兩種需求，我們進行了不同的換算程序，這里我首先給出流程圖：
5.2 詳細講解
以下步驟中涉及到一些公共變數，為了便于描述，我這里用英文代表一些引數，
originX,originY：地圖切圖時的切圖原點坐標，
tileSize：瓦片的螢屏像素大小，
Level：地圖級別，
resolution：某地圖級別下螢屏一像素代表的實際單位大小，
canvasWidth、canvasHeight：螢屏的長寬
geoMaxX、geoMinX：地理范圍中的最大即最小X坐標，
5.2.1第一步，獲得請求地理范圍中的中心點（centerGeoPoint）
這個換算比較簡單，但是為什么我們要首先換算這個中心點呢，原因是我們最后需要的真實地理范圍，并不一定是螢屏范圍所對應的那個地理范圍，它極有可能是大于這個螢屏地理范圍的，而事實上是，它一定是大于的，在后面我們講解瓦片圖層類的設計時，會提到一個地理范圍緩沖寬度，那時候大家就更能明白為什么是要首先獲取地理范圍中的中心點了，
5.2.2 第二步，判斷請求中是否包含了需要顯示的地圖級別，分別處理
5.2.2.1 包含了Level
如果請求中已經指定了使用的Level，則我們接下來可以直接使用此Level來進行地圖實際請求范圍的換算，
5.2.2.2 沒有包含Level
而當請求中無Level時，我們的換算將會比較復雜一些，這個換算的目的就是求出此時的地圖應該以什么Level顯示是最合適的，即nearestLevel，它的程序是，首先根據請求中的地理范圍和螢屏大小范圍，求得此時我們本需要的瓦片實際大小，即：(geoMaxX-geoMinX)/( canvasWidth/tileSize)，也就是用實際地理長度除以此時的瓦片個數，從而得到了我們請求中本需求的瓦片實際大小，
但是，目前我們不能保證我們所切的圖中是一定有這個需求里的比例尺的，于是我們還需要做一個遍歷，遍歷我們的地圖中所有的比例尺，找出一個與此需求比例尺下的瓦片實際大小最貼近的真實瓦片實際大小，而這個瓦片實際大小所對應的此時的地圖比例尺，即是我們求得到的最合適的比例尺，它所代表的地圖級別就是最貼近需求的地圖級別，nearestLevel，
5.2.3 第三步，算出螢屏范圍所對應的地理范圍 (minX、minY、maxX、maxY)
在第一步中得到了centerGeoPoint，第二步得到了Level的條件下，這一步就很簡單了，
首先得到Level下的一像素代表的實際大小，即resolution，然后用centerGeoPoint加上或減去半個螢屏長度（canvasBounds）乘以resolution后得到的范圍便是需求中的螢屏范圍在獲得的Level下應該對應的實際地理范圍，
以螢屏左上角X所對應的實際地理坐標為例：
minX =centerGeoPoint - (resolution* canvasWidth)/2;
這里順便提一下，算出的這個螢屏范圍所對應的地理范圍，它的作用是非常大的，在以后的螢屏坐標轉換成地理坐標，以及地理坐標轉換成螢屏坐標，還有偏移補償量的換算上是至關重要的一個引數，
5.2.4 第四步，計算其他引數，比如瓦片行列的起始號以及瓦片個數
這一步為收尾作業，根據之前算出來的一系列引數來進行最后的換算，
5.2.4.1 瓦片起始行列號(fixedTileLeftTopNumX、fixedTileLeftTopNumY)
在知道了請求的地理范圍后，此起始行列號的換算便是水到渠成了，不過這里還是要稍微做個補充，我們算出來的地理范圍并不能保證真實的瓦片的起始瓦片所對應的地理坐標與地理范圍的左上角地理范圍重合，為此我們應該允許地理范圍的一個擴張，這個擴張多少是一個很值得推敲的地方，這里我們默認為擴張至請求到的第一張瓦片左上角所對應的地理坐標，
公式為：
fixedTileLeftTopNumX = Math.floor((Math.abs(originX - minX))/resolution*tileSize);
fixedTileLeftTopNumY = Math.floor((Math.abs(originY - maxY))/resolution*tileSize);
5.2.4.2 實際地理范圍(realMinX、realMaxY)
我們之前只是求得了螢屏范圍所對應的地理范圍，而當我們換算出這個范圍所需要的瓦片后，這些算得的瓦片其所對應的地理范圍并不一定是螢屏范圍所對應的那個地理范圍，此時我們需要重新算出實際地理范圍，
realMinX = fixedTileLeftTopNumX * curLevelClipLength + originX;
realMaxY= originY - fixedTileLeftTopNumY * curLevelClipLength;
5.2.4.3 左上角偏移像素(offSetX、offSetY)
由于地理范圍中的第一張瓦片，即左上角的第一張瓦片，并不一定是完全包含在螢屏地理范圍內的，于是這里又涉及到另外一對引數，左上角偏移像素，
為什么要求這個引數呢，原因是，當我們把瓦片都請求回來后還要做一個換算，即換算出每一張瓦片的左上角坐標應該對應在圖層（TIleCanvas）上的哪一個螢屏坐標，這個偏移像素便是為了這個換算而做的準備，
offSetX = ((realMinX- minX )/resolution);
offSetY = ((maxY - realMaxY )/resolution);
再次補充，其中resolution表示的是此Level下的一像素所代表的實際單位大小，
5.2.4.4 X、Y軸上的瓦片個數(mapXClipNum、mapYClipNum)
這里我先給出一個螢屏地理范圍與實際請求出的瓦片地理范圍間關系的示意圖：
在前面我已經訴說了，我們求得的螢屏地理范圍內的瓦片所代表的瓦片個數基本上是會比螢屏范圍本身是要大的，其實這個原因不難理解，因為瓦片是地圖表示的最小單位了，其不可能再劃分，所以在我們請求瓦片的起始行列號時，用到了Math.floor這個函式，即求得離螢屏范圍的左上角坐標最近的瓦片行列號，但是，在求得X、Y軸上的瓦片個數時，我們得用到Math.ceil這個函式，這是為了能求得離螢屏范圍的右下角坐標最近的瓦片行列號數，
具體公式是：
mapXClipNum = Math.ceil((canvasWidth + Math.abs(offSetX))/tileSize);
mapYClipNum = Math.ceil((canvasHeight + Math.abs(offSetY))/tileSize);
6.總結
根據上面步驟，我們最后可以求出瓦片的行列號，以及需要的在X、Y軸的個數，同時我們還求得了將瓦片畫在畫布上時所需要的引數，左上角偏移像素，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/296330.html
標籤：GIS