本文主要是介绍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-test2、启动项目
cd react-test
npm run start3、安装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}// 保存当前点击的菜单IDsetIsActive(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, // 缩放最小级别 2maxZoom: 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, // 缩放最小级别 2maxZoom: 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>)}
}这篇关于React项目-OpenLayers地图初始化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
