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;

六、效果圖