如何將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