如何将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
效果
上一篇: 总有瞎眼的
下一篇: 05、java基础--程序流程控制