（十）WebGIS中地理座標與屏幕座標間的轉換原理

 文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/。

1.前言

地圖自己是擁有座標的，通常能夠大體分爲平面座標和經緯度座標，在這裏咱們統稱爲地理座標，好比北京，(115.9°E ，39.6°N)和(506340，304400)均是其地理座標，只是表示形式不一樣而已。

咱們在上一章講解了矢量圖層中數據的來源，最後提出了一個還未解決的問題，即當咱們得到了矢量數據後，如何在屏幕中將這些數據裏的地理（Geometry）座標轉換爲屏幕座標，從而在屏幕端Canvas裏的各個UIComponent（要素）中繪製出來？

這一章咱們將對此轉換作出講解。

2.轉換前提

實現屏幕座標能與地理座標進行轉換的前提是：

1).知道屏幕的最左上角所對應的真實的地理座標（screenGeoBounds.left, screenGeoBounds.top）。

2).知道此時的地圖所在級別上每一個瓦片所對應的實際地理長度(sliceLevelLength)。

3).知道瓦片的大小，即一個瓦片所擁有的屏幕像素(tileSize)。

3.如何得到這些前提參數

3.1 tileSize參數的獲取

因爲此參數爲固定參數，因此獲取十分簡單，與實際中的瓦片大小一致便可。

3.2 sliceLevelLength參數的獲取

此參數須要通過必定的算法才能得到，具體算法和原理能夠在第三章《經過地理範圍獲取瓦片行列號》中獲得詳細的講解。我這裏直接給出公式：

resolution=scale*inch2centimeter/dpi；

sliceLevelLength=tileSize*resolution；

英文表明以下意思：

inch2centimeter：英寸轉裏面的參數。

Dpi：一英寸所包含的像素。

Resolution：單位像素所表明的實際單位長度。

3.3 screenGeoBounds的獲取

此參數的實際意思是屏幕座標上（0，0）所對應的地理座標（screenGeoBounds.left, screenGeoBounds.top）。而screenGeoBounds卻同時是不肯定，動態變化的一個參數值。由於隨着地圖的平移、放大、縮小操做，此screenGeoBounds均會發生變化。

參考第三章內容（咱們整個系統中，第三章的內容均是重點），咱們能夠知道，每一次咱們觸發瓦片請求時，都會從新計算出此時的屏幕四角座標所對應的實際地理座標。

而且，在之後章節中跟你們探討WebGIS功能，當講解地圖平移功能時，咱們還能瞭解到，事實上每次地圖平移事件發生時，咱們的屏幕四角座標也會加減相同的地理平移量。

4.轉換公式

下面我將給出基於tileSize、sliceLevelLength、screenGeoBounds三個參數的地理座標與屏幕座標互相轉換的公式。

4.1 屏幕座標轉換爲地理座標

geoXY.x = screenGeoBounds.left + screenX * sliceLevelLength / tileSize;

geoXY.y = screenGeoBounds.top - screenY * sliceLevelLength / tileSize;

4.2 地理座標轉換爲屏幕座標

screenXY.x = (geoX - screenGeoBounds.left)/(sliceLevelLength/ tileSize);

screenXY.y = (screenGeoBounds.top - geoY)/(sliceLevelLength/ tileSize);

4.3 公式的簡單解說

兩個轉換公式均是首先算出在屏幕上的一個像素所對應的單位地理長度後，再根據轉換需求進行須要的轉換。所須要注意的是，在真實的地圖上，Y表明的是緯度，其越往上緯度越大，而在屏幕上，Y越往上走反而越小。因此仔細觀察兩種轉換公式中關於緯度和屏幕Y座標的轉換就能發現這一點。

5.WebGIS中基於座標轉換公式的用法

這兩個轉換公式不少時候是配合使用的。好比有這樣一個需求：鼠標點擊在地圖上後須要查詢出鼠標點擊處的要素屬性信息，而且將該查詢到的要素在地圖上畫出來（其實此需求是一個I查詢的需求）。

咱們的實現方法是先將鼠標點擊處的屏幕座標轉換爲地理座標，而後加上tolerance後拼成一個Geometry範圍，從前端發出I查詢的請求URL，經過地理服務器獲得返回的矢量數據，再在前端將矢量數據中的地理座標轉換爲屏幕座標，根據此屏幕座標在UIComponent裏繪出要素，並將矢量數據中攜帶的Atrributes進行解析做爲查詢所得的屬性數據。

如下爲此過程的流程圖：

 

6.總結

在此章中，咱們知道了如何將獲得的矢量數據裏的地理座標轉換爲屏幕座標，接下來咱們要作的事情是在UIComponent中基於獲得的屏幕座標，繪製出要素的shape。在瞭解了矢量數的據得到方式以及矢量數據的用法後，在後面的兩章裏咱們終於能夠進行要素的設計和矢量圖層的設計了。歡迎你們持續關注。

                                                         -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                          若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^