react工程加载openlayers_react openlayers-优快云博客

本文链接：https://blog.youkuaiyun.com/gis_zzu/article/details/90035134

本文详细介绍如何在React项目中引入并使用OpenLayers地图库，包括安装步骤、创建地图实例和展示基本的地图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一:openlayers简介

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。OpenLayers2.2版本以后，OpenLayers已经将所用到的Prototype.js组件整合到了自身当中，并不断在Prototype.js的基础上完善面向对象的开发.是开源二维地图web地图库。

二：openlayers和react的结合

（1）安装ol库

yarn add ol

(2) 在page下创建创建一个·main文件用于显示地图demo

(3) 在index.js中输入

import React,{Component} from "react"
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

class Main extends Component{
    // 2.dom渲染成功后进行map对象的创建
    componentDidMount(){
        var map = new Map({
            view: new View({
              center: [0, 0],
              zoom: 1
            }),
            layers: [
              new TileLayer({
                source: new OSM()
              })
            ],
            target: 'map'
        });
    }

    render(){
        // 1.创建地图容器
        return <div id="map" className="map"></div>
    }

}

export default Main;

3.保存代码，访问 http://localhost:8000/main出现下边的界面表示openlayers地图加载成功