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

Question

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

尝试导入错误：'interaction' 未从 'ol' 导出（导入为 '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 结合使用。

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

How fix Interaction import error with open layers 6 in React.js

openlayers

reactjs