基于vue添加鼠标坐标控件

引入包

import MousePosition from 'ol/control/MousePosition';
import {createStringXY} from 'ol/coordinate';

可以给个容器（可选）

<!--显示鼠标光标二维坐标的控件  -->
<div class="controlContainer">
  <span class="mousePosition" ref="mousePosition"></span>
</div>
      

通过css控制控件在页面中显示的位置

// 控件
    .controlContainer{
        position: absolute;
        bottom: 0;
        right: 10px;
        width: 400px;
        height: 50px;
        border: lawngreen 1px solid;
        .mousePosition{
            display: inline-block;
            width: 200px;   
            background-color: rgba(255,255, 255, 0.5);
            border-radius: 2px;
            text-align: center;
        }
    }

在创建地图的方法中继续添加以下代码

// 显示鼠标光标二维坐标的控件
      let mousePositionControl = new MousePosition({
        // 坐标格式  createStringX