openlayers鼠標移動獲取地圖經緯度格式化的兩種方式

 方案1

 

第一種

 

import { format } from 'ol/coordinate';
import MousePosition from "ol/control/MousePosition.js";
//鼠標獲取坐標控件
const mousePositionControl = new MousePosition({
    coordinateFormat: function (coordinate) {
        return format(coordinate, '經度:{x} 緯度:{y}', 2);
    },
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position'),
    undefinedHTML: ' '
});
//添加控件到地圖
map.addControl(mousePositionControl);

 

格式像這樣：經度:165.23 緯度:13.71

 

第二種

 

 

import { createStringXY } from 'ol/coordinate.js';
import MousePosition from "ol/control/MousePosition.js";
//鼠標獲取坐標
const mousePositionControl = new MousePosition({
    coordinateFormat: createStringXY(2),
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position'),
    undefinedHTML: ' '
});
map.addControl(mousePositionControl);

 格式像這樣：165.23 13.71

 

 

方案2

地圖上繪制區域懸浮彈窗實現跟隨鼠標移動

/**
 * [addOverlay description]
 * @Author   minglongYe
 * @DateTime 2022-03-26T09:26:30+0800
 * @version  [version]
 * @param    {[type]}
 */
function addOverlay(coordinate){
    document.getElementById('overlay').style.display = "block";
    //此處的overlayLayer要是全局變量，其他的函數內要用到
    overlayLayer = new ol.Overlay({
        element: document.getElementById('overlay'),
        position: coordinate,
        positioning: 'center-center',
        stopEvent: false
    });
    map.addOverlay(overlayLayer); 
}

/**
 * [moveOverlay description]
 * @Author   minglongYe
 * @DateTime 2022-03-26T09:26:20+0800
 * @version  [version]
 * @param    {[type]}
 * @param    {[type]}
 * @return   {[type]}
 */
function moveOverlay(coorC,pixel){
    if(!overlayLayer){
        addOverlay(coorC)
    }
    var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
        return feature;
    });
    if (feature) {
        if ('進一步的判斷條件') {
            overlayLayer.getElement().innerHTML = '指示彈窗里的內容'
            overlayLayer.setPosition(coorC)
        }
    }
}


// 地圖鼠標滑動事件
map.on('pointermove', function(evt) {
    var pixel = map.getEventPixel(evt.originalEvent);
    moveOverlay(evt.coordinate, pixel)
})