reat 之openlayers地图组件封装

1.建立组件文件

 在component/map/map.js 文件，创建一个react有状态组件

// import ol from "./ol.css"
// react 组件
import React, { Component } from 'react';
// openlayers 函数
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj.js';
import {defaults as defaultControls, ZoomToExtent} from 'ol/control.js'


class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map:{}
    }
  }
  // 2.dom渲染成功后进行map对象的创建
  componentDidMount() {
    let { center } = this.props;
    if (!center) {
      center = { 
        lon: 113.8,
        lat: 34.6,
      };
    }
    this.map = new Map({
      view: new View({
        center: fromLonLat([center.lon, center.lat]),   //将WGS8坐标转化为web墨卡托坐标
        zoom: 5,
      }),
      layers: [
        new TileLayer({
          source: new OSM(), //加载OSM数据
        }),
      ],
      target: 'map',   //绑定地图容器

    });
    //  传值给父组件
    // if(this.props.getMap){
    //    this.props.getMap("map对象")
    // }
   
  }

  render() {
    // 1.创建地图容器
    return (
      

        

      
    );
  }
}

export default MapComponent;

2在需要显示地图页面中加载子组件

（1）引入地图组件

         import Map from '../../component/map/map';

（2）初始化子组件

import React, { Component } from 'react';
// 引入子组件
import Map from '../../component/map/map';


class Main extends Component {
  // 2.dom渲染成功后进行map对象的创建
  componentDidMount() {
    
  }

  render() {
    // 1.创建地图容器
    return ;
  }
}

export default Main;

（3）效果如下