兩種不同的經緯度顯示方式，通過MousePosition對象，設置coordinateFormat參數

方式一

import {
  createStringXY,
  toStringHDMS
} from 'ol/coordinate.js';

...
  addMousePositionAndScaleControl(map) {
    // let map = this.map;
    var mousePositionControl = new MousePosition({
      // coordinateFormat: createStringXY(4),
      coordinateFormat: function(coord){return toStringHDMS(coord)},
      projection: 'EPSG:4326',
      // comment the following two lines to have the mouse position
      // be placed within the map.
      className: 'custom-mouse-position',
      target: document.getElementById('mouse-position'),
      undefinedHTML:    ' '
    });
    var scaleLineControl = new ScaleLine({
      //設置度量單位為米
      units: 'metric',
      target: 'scalebar',
      className: 'ol-scale-line'
    });
    map.addControl(mousePositionControl);
    //將比例尺控件加入到map中
    map.addControl(scaleLineControl);
  },

效果如下：

image.png

方式二

import {
  createStringXY,
  toStringHDMS
} from 'ol/coordinate.js';

...
  addMousePositionAndScaleControl(map) {
    // let map = this.map;
    var mousePositionControl = new MousePosition({
      coordinateFormat: createStringXY(4),
      projection: 'EPSG:4326',
      // comment the following two lines to have the mouse position
      // be placed within the map.
      className: 'custom-mouse-position',
      target: document.getElementById('mouse-position'),
      undefinedHTML:    ' '
    });
    var scaleLineControl = new ScaleLine({
      //設置度量單位為米
      units: 'metric',
      target: 'scalebar',
      className: 'ol-scale-line'
    });
    map.addControl(mousePositionControl);
    //將比例尺控件加入到map中
    map.addControl(scaleLineControl);
  },

image.png