时间戳

首页 > 解决方案 > 如何获取存储在开放图层变量中的鼠标坐标？

javascript - 如何获取存储在开放图层变量中的鼠标坐标？

问题描述

我有一个代码可以在 openlayers 中显示地图外的鼠标位置！如果我想在调用 js 鼠标事件 onmousedown 和 onmouseup 时保存这些坐标怎么办？

我有以下代码：

const mousePositionControl = new MousePosition({
    coordinateFormat: createStringXY(4),
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position'),
    undefinedHTML: ' '
});

const map = new Map({
    controls: defaultControls({
        attributionOptions: {
            collapsible: false
        }
    }).extend([mousePositionControl]),
    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    target: 'map',
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

标签： javascriptopenlayers

解决方案

我看到了两种简单的方法。

第一个，只需监听您的 OpenLayers Map 'click'（或单击）事件。然后，您可以获得光标坐标，如下所示：

myMap.on('click', function(evt){
    // Get the pointer coordinate
    let coordinate = ol.proj.transform(evt.coordinate);
}

第二个是，每次在地图上移动时跟踪指针坐标，使用“pointermove”事件，然后在需要时读取它们：

let coord = [];

// We track coordinate change each time the mouse is moved
myMap.on('pointermove', function(evt){
    coord = evt.coordinate;
}

// Anytime you want, simply read the tracked coordinate
document.addEventListener('mousedown', function(){
    console.log(coord);
});

推荐阅读