关于Openlayers与React的结合--第一个组件

最新推荐文章于 2025-05-16 11:48:43 发布

原创

最新推荐文章于 2025-05-16 11:48:43 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#React #Openlayers

本文探讨了如何在React应用中整合OpenLayers，详细介绍了遇到的两个问题：Webpack组件打包速度慢和'React is not defined'错误。通过拆分OpenLayers避免webpack打包及正确引入React，成功实现组件化。

关于Openlayers与React的结合–第一个组件

简介

下面是我对如何将Openlayers与React结合上面的记录

组件

React采用一个组件化的思想帮助前端进行工程化。所有的对象要内置在每个组件中，可以使用状态或者属性存储。简要代码如下：

import React from 'react';

class Olbasemap extends React.Component{
   
   
    componentDidMount(){
        let map = new ol.Map({
              target: 'map',
              layers: [
                new ol.layer.Tile({
                   source: new ol.source.OSM()
                })
              ],
              view: new ol.View({
                center: ol.proj.fromLonLat([37.41, 8.82]),
                zoom: 4,
              })
          });
    }
    render(){
        return(
            <div id="map"</