无法读取 ReactJS 中未定义的 属性 'Tile'

Question

我正在使用 React JS 中的 Open Layer 添加地图，并且我已经导入了所有必需的库。但我收到一个错误 "Cannot read property 'Tile' of undefined".

下面的代码有什么问题？

代码：

import React, { Component } from 'react';
import 'ol/ol.css';
import ol from 'ol';
import Map from 'ol/map';
import View from 'ol/view';
import Tile from 'ol/layer/tile';

class MapComponent extends Component {

    componentDidMount() {
        var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            view: new ol.View({
              center: ol.proj.fromLonLat([37.41, 8.82]),
              zoom: 4
            })
          })
    }
    render() {

        return (
            <div id="map"></div>
        )
    }
}
export default MapComponent;

Answer 1

我会推荐使用一些重新生成的库，例如 react-ol。尽管对于这个特定问题，请尝试 Tile 而不是 ol.layer.Tile 并对相同类型的后续错误应用相同的原则。以下代码对我有用：here is the codebox

import React, { Component } from "react";
import ReactDOM from "react-dom";
import 'ol/ol.css';
import ol from 'ol';
import Map from 'ol/map';
import View from 'ol/view';
import Tile from 'ol/layer/tile';
import OSM from 'ol/source/osm';
import proj from 'ol/proj';

class MapComponent extends Component {

  componentDidMount() {
    var map = new Map({
      target: 'map',
      layers: [
        new Tile({
          source: new OSM()
        })
      ],
      view: new View({
        center: proj.fromLonLat([37.41, 8.82]),
        zoom: 4
      })
    })
  }
  render() {

    return (
      <div id="map"></div>
    )
  }
}