无法读取 React JS 中未定义的属性"向量"/"绘制"

Question

我正在尝试使用带有开放图层的 react js 在地图上绘制一些矩形形状。但是，我收到一个错误，因为"无法读取未定义的属性'矢量'"/"无法读取未定义的属性'绘制'"。

导入所有必要的类后出现错误。请参阅两个注释之间可用的代码。

法典：

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';
import Vector from 'ol/source/vector';
import Draw from 'ol/interaction/draw';
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
})
})
//To draw Rectangle in Map - Begins
var source = new ol.source.Vector({wrapX: false});
var geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
var draw = new ol.interaction.Draw({
source: source,
type: 'Square',
geometryFunction: geometryFunction
});
map.addInteraction(draw);
//To draw Rectangle in Map - Ends
}
render() {
return (
<div id="map"></div>
)
}
}
export default MapComponent;

截图：

Answer 1

您正在导入 Vector 和 Draw，但使用 ol.source.Vector 来使用它们。

而是替换：

var source = new ol.source.Vector({wrapX: false});

跟：

var source = new Vector({wrapX: false});

平局也是如此。