react 之 openlayer地图背景

一、原理

      是在地图的父容器这是一张图片

二、引入依赖库

import React, { Component } from 'react';
import Map from '../../component/map/map';
// import bg from '../../assets/yay.jpg'
import style from './map.css'

三·、加载地图

 render() {
    return (
      <div className={style.mapBg} >
        {/* <img src={bg}></img> */}
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }

四、css的加载

.mapBg{
    background-image: url(../../assets/yay.jpg)
}

五、全部代码

// 设置地图背景色
import React, { Component } from 'react';
import Map from '../../component/map/map';
// import bg from '../../assets/yay.jpg'
import style from './map.css'

class MapOverviewMap extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }
  componentDidMount() {
    // console.log(bg)
  }
  render() {
    return (
      <div className={style.mapBg} >
        {/* <img src={bg}></img> */}
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }
}

export default MapOverviewMap;

六、效果图