react 之 openlayer比例尺显示

一、必要文件的引入

import React, { Component } from 'react'; import Map from '../../component/map/map'; import {ScaleLine} from 'ol/control.js';

二、地图的渲染

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

三、创建比例尺 对象scaleline,并和地图关联

componentDidMount() { let {map} = this.refs.map var scaleLineControl = new ScaleLine({ //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位） units: "metric" }); map.addControl(scaleLineControl) }

四、代码如下

import React, { Component } from 'react'; import Map from '../../component/map/map'; import {ScaleLine} from 'ol/control.js'; class MapScaleLineControl extends Component { constructor(props){ super(props) this.state = { x:0, y:0 } } componentDidMount() { let {map} = this.refs.map var scaleLineControl = new ScaleLine({ //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位） units: "metric" }); map.addControl(scaleLineControl) } render() { return ( <div> {/*显示鼠标的坐标信息 */} <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />; </div> ); } } export default MapScaleLineControl;

 五、效果图如下