如何将鼠标坐标存储在开放层中的变量中？

Question

我有一个代码，显示鼠标位置以外的地图在开放层！如果我想在调用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
    })
});

Answer 1

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

首先，只需侦听您的OpenLayers Map 'click' (或singleclick)事件。然后您可以获得光标坐标，如下所示：

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);
});

Answer 2

    state={
    mouePos:[1,2]
    }

this.state.map.on('pointermove', (evt)=>{
         this.setState({mousePos:[evt.coordinate[0],evt.coordinate[1]]},()=>{
         console.log(evt.coordinate)
        })  
            })

您可以使用mousePos状态作为存储，我认为