版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yatsov/article/details/80045090
关于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"></div>
)
}
}
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>
<div id="root"></div>
<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