react框架使用openlayers

React是一个JavaScript库，用于构建用户界面。OpenLayers是一个高性能的JavaScript库，用于在Web上创建交互式地图。这两个库可以结合起来使用，以创建具有交互性和响应性的地图应用程序。

下面是一个简单的React组件，演示如何使用OpenLayers：

import React, { Component } from 'react';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

class MapComponent extends Component {
  componentDidMount() {
    this.map = new Map({
      target: this.refs.map,
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }

  render() {
    return (
      <div ref="map" style={{ width: '100%', height: '400px' }}></div>
    );
  }
}

export default MapComponent;

在这个例子中，我们创建了一个React组件，名为MapComponent。它在componentDidMount方法中创建了一个OpenLayers地图，并将其添加到组件的DOM节点中。

在layers属性中，我们创建了一个TileLayer，它使用OpenStreetMap数据源来显示地图。在view属性中，我们设置了地图的初始中心点和缩放级别。

注意，在这个例子中我们只是简单地创建了一个带有基本配置的地图。你可以根据你的需要进一步定制化地图，例如添加矢量图层、交互、控件等等。