如何将Openlayers与React的结合？

程序员文章站 2022-04-19 19:16:12

如何将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