React项目-OpenLayers地图初始化

 一、环境描述

        React集成OpenLayers地图需要注意软件兼容性问题，可以从官网或者百度文章查询React和OpenLayers地图的版本兼容性，

1、软件版本

        （1）create-react-app创建项目；

        （2）React版本：18.3.1；

        （3）OpenLayers版本：6.15.1；

        （5）Node版本：14.21.3

二、创建React项目

1、创建项目

npx create-react-app react-test

2、启动项目

cd react-test
npm run start

3、安装OpenLayers

npm i [email protected] --save

三、项目配置

1、路由配置

（1）路由文件配置

        在src/创建一个名为router.js的文件（文件名称和位置可以自己规划）

// 引入组件
import App from "./App";
import OpenLayersMapFunction from "./components/OpenLayersMapFunction";
import OpenLayersMapClass from "./components/OpenLayersMapClass";

import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: ,
    children: [
      {
        path: "",
        element: 
      },
      {
        path: "/openLayersMapFunctio