iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
Modern Web

在網頁上面畫個地圖 - 使用Openlayers系列 第 4

Day-04 Projection (投影)

  • 分享至 

  • xImage
  •  

Day-04 Projection (投影)

理論

地球是一個球體,球面上的位置,是以經緯度來表示,我們把它稱為球面座標系統地理座標系統。在球面上計算角度距離十分麻煩,而且地圖是印刷在平面紙張上,要將球面上的物體畫到紙張上,就必須展平,這種將球面化為平面的過程,稱為 投影 (Projection)

經由投影的過程,把球面座標化算為平面直角座標,便於印刷與計算角度與距離。由於球面無法百分之百展為平面而不變形,所以除了地球儀外,所有地圖都有某些程度的變形,有些可保持面積不變,有些可保持方位不變,視其用途而定。

目前國際間普遍採用的一種投影,是 Transverse Mercator Projection (即橫梅投影、橫麥卡脫投影),屬於正形投影的一種,在小範圍內保持形狀不變,對於各種應用較為方便。

以上文章取自大地座標系統漫談

OpenLayers 使用的是哪種投影

在你使用 OpenLayers 建立的每個地圖裡都包含一個 View ,而每個 View 裡都一定有指定一個 Projection。但讀者有印象的話,我在 Day01 裡的範例裡根本沒有指定 Projection,那為何又能正常的設定中心點位置,那是因為 OpenLayers 預設使用的是 Web Mercator projection / Web 橫麥卡脫投影 (EPSG:3857)。這種投影也被應用在 BingMpasOpenStreetMap (OSM)Google Maps上。所以當你選擇使用前述的圖層來源時,選擇使用橫麥卡脫投影是最好的選擇。

在地圖上改變其他的投影法

Day02 文章最後,有提到台灣最常使用的投影法,除去 WGS84 還有 TWD97TWD67,兩種又各有 119 / 121 經線共計四種投影法。雖然 OpenLayers 沒有提供這四種的投影定義,但我們可以利用 Proj4js 來做客製化定義後,在利用 ol.proj 來做轉換。請看以下程式碼:

proj4.defs("EPSG:3825", "+proj=tmerc +lat_0=0 +lon_0=119 +k=0.9999 +x_0=250000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
proj4.defs("EPSG:3826", "+proj=tmerc +lat_0=0 +lon_0=121 +k=0.9999 +x_0=250000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
proj4.defs("EPSG:3827", "+proj=tmerc +lat_0=0 +lon_0=119 +k=0.9999 +x_0=250000 +y_0=0 +ellps=aust_SA +units=m +no_defs");
proj4.defs("EPSG:3828", "+proj=tmerc +lat_0=0 +lon_0=121 +k=0.9999 +x_0=250000 +y_0=0 +ellps=aust_SA +units=m +no_defs");

 ol.proj.proj4.register(proj4);
    
var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        projection: 'EPSG:3826',
        center:[248170.826, 2652129.977],
        zoom: 16
    })
});

結果

以上,是今天的分享。基本上一些基礎知識大概就到這邊。接下來我會依官方案例邊實作邊解釋。

References


上一篇
Day-03 Layers 講解
下一篇
Day-05 Draw Features & 棄賽通知..
系列文
在網頁上面畫個地圖 - 使用Openlayers5
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言