[Javascript] GIS座標轉換: Proj4js

Proj4js
http://proj4js.org/

地圖投影以及Proj4的使用
https://www.jianshu.com/p/44b1c98e99d3

坐標系統及WebGIS常用的坐標轉換
https://ithelp.ithome.com.tw/articles/10194371?sc=iThelpR

EPSG:3828錯誤修正
http://gis.rchss.sinica.edu.tw/qgis/?p=3542

地理坐標系統(Geographic coordinate system)
地理坐標系統是使用經緯度來定義球面或橢球面上點的位置的參照系統,是一種球面坐標系統。最常見的位置參考坐標系統就是以經緯度來量算的球面坐標系統。地理坐標系統就是使用一個三維橢球體來模擬地球球體或橢球體。

投影坐標系統
在球面座標上進行測量非常困難,所以地理資料通常都要投影到平面座標上。投影坐標系統是定義在一個二維平面的坐標系統,與地理坐標系統不同的是,投影坐標系統在二維平面上有著恒定的長度、角度和面積,投影坐標系統總是基於地理坐標系統,而地理坐標系統又是基於球體或橢球體。

Mercator投影
是一種正軸(投影面的軸(圓錐圓柱的軸線,平面的法線)與地球橢球體的旋轉軸重合)、等角(地面上的任意兩條直線的夾角,在經過地球投影繪製到圖紙上以後,其夾角保持不變)、圓柱投影。由荷蘭地圖學家墨卡托(G.Mercator)于1569年創立。假設一個與地軸方向一致的圓柱切或割於地球,按等角條件,將經緯網投影到圓柱面上,將圓柱面展為平面後,即得到本投影。現在主流的網上地圖資訊服務所採用的投影均是Mercator投影,該投影方法也適用於航空和航海領域。

Proj4是OSGeo出品的開源GIS工具,專注於地圖的投影表達以及轉換,但其針對EPSG:3828(即TM2 TWD67,中央經線121度)有誤,因目前Proj4對於EPSG:3828的定義不夠完整,因此會造成TWD 67 TM2<-> TWD97 TM2坐標轉換會產生問題,故額外添加「+towgs84」用7參數自訂轉換。


以下為單html檔測試範例︰
<!DOCTYPE html>
<html>
<head>
    <title>Proj4js Demo</title>
    <meta charset="utf-8">

    <!--使用proj4-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>

</head>
<body>

    <p>
        <div style="font-weight:bold;">4326轉3826(WGS84經緯度轉TWD97 TM2): </div>
        <div id="cv4326_3826"></div>
    </p>
    <p>
        <div style="font-weight:bold;">3826轉3828(TWD97 TM2轉TWD67 TM2): </div>
        <div id="cv3826_3828"></div>
    </p>

    <script>

        //Proj4js
        //https://github.com/proj4js/proj4js

        //Chimin: 坐標系統及WebGIS常用的坐標轉換
        //https://ithelp.ithome.com.tw/articles/10194371?sc=iThelpR
        //其針對EPSG:3828(TWD67)範例有誤

        //EPSG:3828錯誤修正
        //http://gis.rchss.sinica.edu.tw/qgis/?p=3542
        //因目前Proj4對於EPSG:3828(即TM2 TWD67,中央經線121度)的定義不夠完整,因此會造成TM2 TWD 67 <-> TWD97坐標轉換會產生問題,故額外添加「+towgs84」用7參數自訂轉換

        //defs
        proj4.defs([
            [
                'EPSG:4326',
                '+title=WGS84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees'],
            [
                'EPSG:3826',
                '+title=TWD97 TM2 +proj=tmerc +lat_0=0 +lon_0=121 +k=0.9999 +x_0=250000 +y_0=0 +ellps=GRS80 +units=m +no_defs'
            ],
            [
                'EPSG:3828',
                '+title=TWD67 TM2 +proj=tmerc +lat_0=0 +lon_0=121 +k=0.9999 +x_0=250000 +y_0=0 +ellps=aust_SA +towgs84=-752,-358,-179,-0.0000011698,0.0000018398,0.0000009822,0.00002329 +units=m +no_defs'
            ]
        ]);

        //EPSG
        let EPSG3826 = new proj4.Proj('EPSG:3826'); //TWD97 TM2(121分帶)
        let EPSG3828 = new proj4.Proj('EPSG:3828'); //TWD67 TM2(121分帶)
        let EPSG4326 = new proj4.Proj('EPSG:4326'); //WGS84

        //4326轉3826(WGS84經緯度轉TWD97 TM2)
        let data1 = proj4(EPSG4326, EPSG3826, [121, 23]);
        document.getElementById('cv4326_3826').innerHTML = data1;
        //[250000,2544283.12479424]

        //3826轉3828(TWD97 TM2轉TWD67 TM2)
        let data2 = proj4(EPSG3826, EPSG3828, data1);
        document.getElementById('cv3826_3828').innerHTML = data2;
        //[249171.10594810007, 2544488.5274230908]

    </script>

</body>
</html>


載入後畫面為︰


#Javascript, Proj4js, Proj4, OSGeo, GIS, EPSG, 4326, 3826, 3828

留言