如何修复React.js中开放层6的交互导入错误

Question

如何修复React.js.中交互产生的导入错误

尝试导入错误：未从"ol"导出"interaction"(作为"ol"导入(。

我不知道如何出口。

我遇到了很多问题，要用ol和ol ext获得正确的导入，有人知道如何解决吗？

import React from 'react';
import 'ol/ol.css';
import 'ol-ext/dist/ol-ext.css';
import * as ol from 'ol';
import ol_PerspectiveMap from "ol-ext/map/PerspectiveMap";
const MapPerspective = () => {
var layer = new ol.layer.Tile({ name: "OSM", source: new ol.source.OSM() });
// The map
var map = new ol_PerspectiveMap( {
target: 'map',
view: new ol.View({
zoom: 15,
center: [-237646.86, 4875851.77]
}),
interactions: ol.interaction.defaults(),
layers: [layer]
});
map.setPerspective(30);
map.on('change:perspective', function (e) {
if (!e.animating) this('#angle').val(e.angle);
})
// Create vector layer for select
var vectorSource = new ol.source.Vector({
url: 'assets/dist/data/ignf.json',
format: new ol_Format.GeoJSON(),
attributions: ["&copy; <a href='http://professionnels.ign.fr/bdtopo'>ign.fr</a>"]
});
var vector = new ol.layer.VectorImage({
source: vectorSource,
maxResolution: 2
});
map.addLayer(vector);
//   Select and draw interaction
map.addInteraction(new ol.interaction.Select({
layers: [vector],
condition: function (e) {
return (ol_Events.condition.pointerMove(e) && !ol_Events.condition.altKeyOnly(e))
}
}));
map.addInteraction(new ol.interaction.Draw({ type: 'LineString' }))
//   An overlay
var place = new ol.overlay.Placemark({
color: '#000',
position: [-237646.86, 4875851.77],
stopEvent: false
});
map.addOverlay(place);

Answer 1

使用es模块时，必须导入每个交互，如下所示：

import { defaults } from 'ol/interaction';
import Draw from 'ol/interaction/Draw';

我建议你对所有ol对象都这样做。

阅读文档可以帮助您：https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-Draw.html

我没有测试它是否与ol-ext结合使用。