Control

openlayers中control是用來控制地圖的元件
https://openlayers.org/en/latest/apidoc/module-ol_control_Control-Control.html

這邊只說明幾個常用的，其他如果想學習可以透過上圖關鍵字另外去查詢

• controldefaults：是地圖默認的控制元件，zoom in/out
• FullScreen：控制web全螢幕的按鈕
• MousePosition：可以取得滑鼠座標，透過js控制顯示在你想要的網頁位置
• OverviewMap：鹰眼控制元件，可以透過小地圖知道對應位置
• ScaleLine：比例尺

今天我們要玩的是取得滑鼠座標，也是直接進入程式碼的世界中來思考吧，因為我不喜歡拖泥帶水的解釋。

const map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        projection: "EPSG:3857",
        center: ol.proj.fromLonLat([120.846642, 23.488793]),
        zoom: 7.5,
        maxZoom: 20,
        minZoom: 5,
        enableRotation: false,
    }),
    controls: []
});

var mousePositionControl = new ol.control.MousePosition({
    
    // 設定座標格式
    coordinateFormat: ol.coordinate.createStringXY(4), 
    
    // 設定顯示的座標系統
    projection: "EPSG:4326",
    
    // 可以自定義Class名稱(地圖Canva中)
    // className: "custom-mouse-position",
    
    // 若需要控制"地圖外"，可以用這個參數指定
    // target: document.getElementById("mouse-position"),
    
});
map.addControl(mousePositionControl);

className和target的參數選擇一個就可以了，設定好後再另外透過css去控制位置或是顏色、字體大小，依照自己喜歡的樣子來修改

如果你成功的話，可以在右上角看到座標，如下圖

參考連結

https://github.com/weijung0923/learning-openlayers-micromastery/tree/day06