Question

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

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

创建简单地图

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
    })
  });
}

在渲染函数<div id="map" className="map"></div>
运行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中连接issue的webpack，已经讨论并修复过了。但它仍然不适合我。

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

提前感谢您的帮助！

Answer 1

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

这是一个最小的React OpenLayer 3+的包装写于TypeScript

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

1 个答案: