欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何将Openlayers与React的结合?

程序员文章站 2022-12-01 20:16:46
如何将Openlayers与React的结合? 简介 下面是我对如何将Openlayers与React结合上面的记录 组件 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(
            <p id="map"></p>
        )
    }
}

export default Olbasemap;

以上是组件化代码,根据生命周期在render html之后再生成对象

组件生命周期:componentWillMount–>render–>componentDidMount

问题1:webpack组件打包巨慢

解决方法1 :

将ol单独拆开不合并入webpack打包代码如下:

<html>
<head>
    <title>学习</title>
    <meta charset="utf-8" />
    <link href="/node_modules/openlayers/css/ol.css" rel="stylesheet" type="text/css">
    <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            #root{
                width:calc(100%);
                height:calc(100%);
            }
            #map{
                width:100%;
                height:100%;
            }
    </style>
</head>
<body>
    <p id="root"></p>
    <script src="node_modules/openlayers/dist/ol-debug.js"></script>
    <script src="dist/bundle.js"></script>
</body>
</html>

解决方法2 :

在打包配置是过滤掉不需要检索的位置

const path = require('path');
const resolve = require('path').resolve;
module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude:/node_modules////<--这里
      }
    ]
  }
};

问题2 :React is not defined

在使用无状态组件时应该引入react

效果

如何将Openlayers与React的结合?