尝试使用 openlayers、reactjs 和黄金布局。黄金布局配置是一行,里面有两个“反应组件”。Openlayers 确实在黄金布局的一个“反应组件”中渲染地图,但不在其他“反应组件”中。
这是我正在尝试的代码。
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import TestComponent from './App';
import GoldenLayout from "golden-layout";
import * as serviceWorker from './serviceWorker';
import "golden-layout/src/css/goldenlayout-base.css";
import "golden-layout/src/css/goldenlayout-dark-theme.css";
import "ol/ol.css";
window.React = React;
window.ReactDOM = ReactDOM;
var map = new Map({
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
class TestComponent extends React.Component{
componentDidMount() {
map.setTarget("map")
}
render() {
return (<div id="map"></div>)
}
}
var myLayout = new GoldenLayout({
content: [
{
type: 'row',
content:[
{
type:'react-component',
component: 'test-component',
},
{
type:'react-component',
component: 'test-component',
}
]
}
]
});
myLayout.registerComponent( 'test-component', TestComponent);
myLayout.init();