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

Question

我正在使用 React JS 中的开放层添加映射，并且我已经导入了所有必需的库。 但是我收到错误，因为"无法读取未定义的属性'瓷砖'"。

下面的代码有什么问题？

法典：

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并对相同类型的错误应用相同的原则。以下代码对我有用：这是代码框

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