react 之 openlayer鼠标位置

一：引入所需要的文件

import React, { Component } from 'react'; import Map from '../../component/map/map'; import {createStringXY} from 'ol/coordinate.js'; import mousePosition from 'ol/control/MousePosition.js';

二：加载地图组件

render() { return ( <div> {/*显示鼠标的坐标信息 */} <div id="mouse-position">坐标信息</div> <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />; </div> ); }

 

三：dom渲染成功后，创建鼠标位置对象，并关联到地图上，

componentDidMount() { let {map} = this.refs.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: ' ' }); map.addControl(mousePositionControl) }

四：代码如下

import React, { Component } from 'react'; import Map from '../../component/map/map'; import {createStringXY} from 'ol/coordinate.js'; import mousePosition from 'ol/control/MousePosition.js'; class MousePosition extends Component { constructor(props){ super(props) this.state = { x:0, y:0 } } componentDidMount() { let {map} = this.refs.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: ' ' }); map.addControl(mousePositionControl) } render() { return ( <div> {/*显示鼠标的坐标信息 */} <div id="mouse-position">坐标信息</div> <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />; </div> ); } } export default MousePosition;

五、效果图