如何使用OpenLayers和react-starter-kit?

我在基于react-starter-kit的项目中运行OpenLayers3 Map时遇到了问题。 我试图添加简单的地图来反应组件。 我所做的是:

  1. 运行npm install openlayers
  2. import ol from 'openlayers'添加到ContactPage.js
  3. 创build简单的地图

     componentDidMount(){ var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }) ], view: new ol.View({ center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); } 
  4. 将渲染函数<div id="map" className="map"></div> jsx部分添加<div id="map" className="map"></div>

  5. 运行npm start。

我得到一个错误:

 ...\node_modules\openlayers\dist\ol.js:7 module.exports = factory(); ^ TypeError: Cannot use 'in' operator to search for 'geolocation' in undefined at C:\Git Repos\traces\node_modules\openlayers\dist\ol.js:160:823 at OPENLAYERS (C:\Git Repos\traces\node_modules\openlayers\dist\ol.js:7:22) at Object.<anonymous> (C:\Git Repos\traces\node_modules\openlayers\dist\ol.js:13:2) at Module._compile (module.js:460:26) at Object.Module._extensions..js (module.js:478:10) at Module.load (module.js:355:32) at Function.Module._load (module.js:310:12) at Module.require (module.js:365:17) at require (module.js:384:17) at Object.<anonymous> (C:\Git Repos\traces\build\webpack:\external "openlayers":1:1) 

这看起来像OL3中的一个webpack连接问题 ,已经被讨论和修复。 然而,它仍然不适合我。

我还尝试将OL3的脚本标记直接添加到index.html并删除组件中的ol导入。 尽pipe我想使用Webpack来处理依赖关系,但这种方法很有效。

提前感谢任何帮助!

一年后,我创build了这个最小包装react-openlayers 。

这是用TypeScript编写的OpenLayer 3+的最小React包装器