无法读取属性'；瓷砖'；ReactJS中未定义的

我在React JS中使用OpenLayer添加了一个地图，并导入了所有必需的库。但我得到一个错误，因为“无法读取未定义的属性‘Tile’”

下面的代码有什么错误

代码：

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;

import React，{Component}来自'React'；
导入“ol/ol.css”；
从“ol”导入ol；
从“ol/Map”导入地图；
从“ol/View”导入视图；
从“ol/图层/瓷砖”导入瓷砖；
类MapComponent扩展组件{
componentDidMount（）{
var map=新ol.map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
视图：新ol.view({
中心：Lonlat的其他项目（[37.41,8.82]），
缩放：4
})
})
}
render（）{
返回(
)
}
}
导出默认映射组件；

我建议使用一些反应lib，例如

react ol

。尽管对于这个特定的问题，尝试使用

Tile

而不是

ol.layer.Tile

并对同一类型的连续性错误应用相同的原则。以下代码适用于我：

import React，{Component}来自“React”；
从“react dom”导入react dom；
导入“ol/ol.css”；
从“ol”导入ol；
从“ol/Map”导入地图；
从“ol/View”导入视图；
从“ol/图层/瓷砖”导入瓷砖；
从“ol/source/OSM”导入OSM；
从“ol/proj”导入项目；
类MapComponent扩展组件{
componentDidMount（）{
var映射=新映射({
目标：“地图”，
图层：[
新瓷砖({
资料来源：新OSM（）
})
],
视图：新视图({
中心：Lonlat项目（[37.41,8.82]），
缩放：4
})
})
}
render（）{
返回(
)
}
}

我建议使用一些反应lib，例如

react ol

。尽管对于这个特定的问题，尝试使用

Tile

而不是

ol.layer.Tile

并对同一类型的连续性错误应用相同的原则。以下代码适用于我：

import React，{Component}来自“React”；
从“react dom”导入react dom；
导入“ol/ol.css”；
从“ol”导入ol；
从“ol/Map”导入地图；
从“ol/View”导入视图；
从“ol/图层/瓷砖”导入瓷砖；
从“ol/source/OSM”导入OSM；
从“ol/proj”导入项目；
类MapComponent扩展组件{
componentDidMount（）{
var映射=新映射({
目标：“地图”，
图层：[
新瓷砖({
资料来源：新OSM（）
})
],
视图：新视图({
中心：Lonlat项目（[37.41,8.82]），
缩放：4
})
})
}
render（）{
返回(
)
}
}

尝试用

Tile

而不是

ol.layer.Tile

来回答这个问题以关闭主题，这应该可以解决问题。用

Tile

而不是

ol.layer.Tile

来回答这个问题以关闭主题，这应该可以解决我收到的错误如下：“/src/components/MapComponent.js模块未找到：无法解析'C:\Projects\ras\u app\react\u spa\src\components'”中的'Tile'。更新了我的答案。因此，我结束了显式导入模块，尽管显式导入也可以。至少尝试一下。我收到一个错误，如下所示”./src/components/MapComponent.js模块未找到：无法解析“C:\Projects\ras\u app\react\u spa\src\components”中的“Tile”。更新了我的答案。因此我结束了显式导入模块，尽管显式导入也应该可以。至少尝试一下。

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