Openlayers 3 使用React 组件化+wepack+ES6实践记录笔记

本文链接：https://blog.youkuaiyun.com/future_todo/article/details/61206783

这篇博文记录了使用React组件化、webpack和ES6技术在实践中操作OpenLayers 3遇到的问题及解决方案。作者提出了一种简单的方法，即在React组件外壳中封装OpenLayers 3的API，保留其原有结构。文中总结了npm安装问题、webpack配置问题，并给出了基本Demo。此外，作者还分享了如何在组件间使用发布-订阅模式传递变量，以实现不同组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本博文不作深入研究内容，只用来记录使用React 组件化+wepack+ES6技术操作Openlayers 3 实践中遇到的问题，本博文作为开篇，所以只是简单的demo案例说明。后面还会有其他的一些博文分享我在项目中遇到的问题和总结的经验。

大约一年前我写过一个系列的Openlayers 3的简单的源码结构的分析，代码以及说明在我的github中有，需要的同学出门右转。

Openlayers 3的简单的源码结构的分析 https://github.com/zrysmt/openlayers-3

我在github上看到一些人将openlayers彻底组件化，属性通过props传入进来，例如:

<layer.Tile>
    <source.OSM />
  </layer.Tile>

这样做的好处是高度组件化，看起来很和谐。但是这样无形中增加了学习成本和时间成本，我们要看到ol3的API，然后再考虑到转化为组件化的书写的对应形式，导致了多走一步。
本博文的思想很简单，就是外壳用react组件封装，内部的源码实现使用ol3的API完全没有改变，这样就简单清晰而且避免多走一步。具体例子见下面给出的Demo。

我还将我写的一些组件，比如基础地图，工具栏和绘制栏用React写的组件单独从项目中拿出来，提供给使用和学习者一些方便，下面给出地址,欢迎fork，star，不定期更新，有错误请指出：

https://github.com/zrysmt/openlayers3-react

1.一些问题总结

**问题1：**npm安装的问题：

Failed at the closure-util@1.18.0 postinstall script 'node ./bin/closure-util.js update'

解决方案：

首先 npm i closure-util --save
然后再安装 npm i openlayers --save

问题2：

WARNING in ./~/openlayers/dist/ol.js`
`Critical dependencies:`
`748:1160-1167  This seems to be a pre-built javascript file.  Though  this is possible, it's not recommended. Try to require the original source to get better results.`