如何将OpenLayers与react-starter-kit一起使用？

Question

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

1. 运行npm install openlayers
2. 添加import ol from 'openlayers'到ContactPage.js

3. 创建简单的地图

   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来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) 

这看起来像一个的WebPack连接OL3其中进行了讨论和固定issue。但它仍然不适合我。

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

在此先感谢您的帮助！

Answer 1

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

这是OpenLayer 3+ 最小React 包装纸写在TypeScript