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 ol@6.15.1 --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: <App />,
    children: [
      {
        path: "",
        element: <OpenLayersMapFunction />
      },
      {
        path: "/openLayersMapFunction",
        element: <OpenLayersMapFunction />
      },
      {
        path: "/openLayersMapClass",
        element: <OpenLayersMapClass />
      }
    ]
  },
])

export default router

（2）index.js文件配置

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { RouterProvider } from 'react-router-dom';
import router from './router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode> // 注意注释React严格模式
    <RouterProvider router={router}>
      <App />
    </RouterProvider>
  // </React.StrictMode>
);

reportWebVitals();

（3）App.js文件配置

import './App.css';
import Header from './components/Header';
import { Outlet, useNavigate } from 'react-router-dom';
import { useState } from 'react';

function App() {
  const [isActive, setIsActive] = useState(1)
  const navigate = useNavigate()

  function clickMenu(path, menuId) {
    if (isActive === menuId) {
      return
    }
    // 保存当前点击的菜单ID
    setIsActive(menuId)
    // 跳转路由
    navigate(path)
  }

  return (
    <div className="App">
      <Header clickMenu={clickMenu} active={isActive}></Header>
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

export default App;

2、地图组件配置

（1）Header.js配置

// css文件
import "./css/Header.css"

// 数据来源
const menuData = [
  {
    id: 1,
    label: "函数组件OpenLayers",
    path: "/openLayersMapFunction"
  },
  {
    id: 2,
    label: "类组件OpenLayers",
    path: "/openLayersMapClass"
  },
]

// 数据过滤
function FilterData({ clickList, isActive }) {
  return menuData.map(row => {
    return (
      <li className={isActive === row.id ? 'isActive' : ''} onClick={() => { clickList(row.path, row.id) }} key={row.id} >
        {row.label}
      </li >
    )
  })
}

// 渲染页面
export default function Header({ clickMenu, active }) {
  return (
    <ul className="menuList">
      <FilterData clickList={clickMenu} isActive={active} />
    </ul>
  )
}

（2）函数组件（CesiumMapFunction.js）

import { useEffect } from "react";
import '../css/OpenLayersMap.css'

import "ol/ol.css";
import Map from "ol/Map.js";
import XYZ from "ol/source/XYZ"
import View from "ol/View.js";
import TileLayer from "ol/layer/Tile.js";
import { DoubleClickZoom } from 'ol/interaction';

export default function OpenLayersMapFunction() {
  useEffect(() => {
    const tileMap = new TileLayer({
      source: new XYZ({
        // 官网在线地图
        url: "your_map_url",
      }),
    });

    // 初始化地图
    const openLayers = new Map({
      layers: [tileMap], // 直接在配置上加载
      target: "openLayersContainer", // 地图容器
      view: new View({
        projection: "EPSG:4326", // 坐标系
        center: [110, 30], // 地图中心点
        zoom: 6, // 默认缩放比例
        minZoom: 2, // 缩放最小级别 2
        maxZoom: 20, // 缩放最大级别 20
      }),
    });

    // 清除默认的左键双击缩放
    const dblClickInteraction = openLayers
      .getInteractions()
      .getArray()
      .find((interaction) => {
        return interaction instanceof DoubleClickZoom;
      });

    openLayers.removeInteraction(dblClickInteraction);
  }, [])

  return (
    <div className='openLayersMap'>
      <div id="openLayersContainer">
      </div>
    </div>
  )
}

（3）类组件（CesiumMapClass.js）

import React, { Component } from 'react'
import '../css/OpenLayersMap.css'

import "ol/ol.css";
import Map from "ol/Map.js";
import XYZ from "ol/source/XYZ"
import View from "ol/View.js";
import TileLayer from "ol/layer/Tile.js";
import { DoubleClickZoom } from 'ol/interaction';

export default class OpenLayersMapClass extends Component {
  componentDidMount() {
    const tileMap = new TileLayer({
      source: new XYZ({
        // 官网在线地图
        url:"your_map_url",
      }),
    });

    // 初始化地图
    const openLayers = new Map({
      layers: [tileMap], // 直接在配置上加载
      target: "openLayersContainer", // 地图容器
      view: new View({
        projection: "EPSG:4326", // 坐标系
        center: [110, 30], // 地图中心点
        zoom: 6, // 默认缩放比例
        minZoom: 2, // 缩放最小级别 2
        maxZoom: 20, // 缩放最大级别 20
      }),
    });

    // 清除默认的左键双击缩放
    const dblClickInteraction = openLayers
      .getInteractions()
      .getArray()
      .find((interaction) => {
        return interaction instanceof DoubleClickZoom;
      });

    openLayers.removeInteraction(dblClickInteraction);
  }

  render() {
    return (
      <div className='openLayersMap'>
        <div id="openLayersContainer">
        </div>
      </div>
    )
  }
}