React项目-OpenLayers地图初始化

本文主要是介绍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}// 保存当前点击的菜单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地图初始化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---