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 ( <div style={{ height: '100%' }}> <div id="map" className="map" style={{ height: '100%' }} /> </div> ); } } 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 <Map center={{lon:113.8,lat:34.6}}></Map>; } } export default Main;

（3）效果如下