---
# System prepended metadata

title: 圖台坐標顯示問題(MousePosition)

---

# 圖台坐標顯示問題(MousePosition)

### 公版預設坐標系統為 TWD97(EPSG:3826)
![](https://i.imgur.com/sYvKGHs.png)

MousePosition事件觸發取得的坐標就是97的坐標

```javascript=
<script>
    var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: function (coordinate) {
            //coordinate 為 TWD97坐標系統
            var ret = ol.coordinate.format(coordinate, coordinateTemplate, 0);
            return ret;
        },
        projection: displayPrj,
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
    });

    map.addControl(mousePositionControl);
</script>
```

### 客製化需求是能夠讓使用者切換坐標系統
![](https://i.imgur.com/zq3ReSC.png)

若預設坐標系統維持TWD97，滑鼠移至國外區域坐標顯示會有問題
![](https://i.imgur.com/AyqX0DA.png)

調整方式: 將MousePosition預設坐標系統為(EPSG:3857)
```javascript=
var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: function (coordinate) {
            //3857 to 3826
            var Coord3826 = ol.proj.transform(coordinate, "EPSG:3857", "EPSG:3826");
            var ret = ol.coordinate.format(Coord3826, coordinateTemplate, 0);
            return ret;
        },
        projection: "EPSG:3857", //設定預設坐標系統
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
    });

    map.addControl(mousePositionControl);
```

![](https://i.imgur.com/bkQeQd0.png)

![](https://i.imgur.com/3JP7jvL.png)

![](https://i.imgur.com/Rdvsy4K.png)
