React项目-OpenLayers地图初始化

呆呆的小草

已于 2024-08-16 14:25:04 修改

阅读量780

点赞数 4

分类专栏： OpenLayers React 文章标签： react.js 前端前端框架

于 2024-06-21 10:36:22 首次发布

本文链接：https://blog.youkuaiyun.com/StupidlyGrass/article/details/139854313

版权

一、环境描述

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: "/openLayersMapFunctio