openlayers、reactjs、golden-layoutで作業しようとしています。ゴールデンレイアウト構成は、内部に2つの「react-components」がある1つの行です。Openlayersは、ゴールデンレイアウトの1つの「react-component」ではマップをレンダリングしますが、他の「react-component」ではレンダリングしません。
これが私が試しているコードです。
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();
openlayersマップの2つのインスタンスと、一意の要素も必要id
です。
マップのインスタンスが1つだけ使用されている場合、そのターゲット要素を変更しても、両方の要素でマップはレンダリングされません。
したがって、一意の要素を持つmapの2つのインスタンスが必要id
です。
また、黄金のレイアウトが用意レンダリングは、設定する必要があることを意味し、それのレイアウト/ reat成分でコンポーネント反応id
にcomponentDidMount()
reactjsコンポーネントのライフサイクルの関数。componentDidMount
これが機能するコードです。
import Map1 from 'ol/Map';
import Map2 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 map1 = new Map1({
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
})
});
var map2 = new Map2({
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{
constructor(){
super()
this.myref = React.createRef()
}
componentDidMount() {
this.myref.current.setAttribute("id",this.props.id)
this.props.map.setTarget(this.props.id)
}
render() {
return (
<div ref={this.myref}></div>
)
}
}
var myLayout = new GoldenLayout({
content: [
{
type: 'row',
content:[
{
type:'react-component',
component: 'test-component',
props:{id:"map1",map:map1}
},
{
type:'react-component',
component: 'test-component',
props:{id:"map2",map:map2}
}
]
}
]
});
myLayout.registerComponent( 'test-component', TestComponent);
myLayout.init();
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加