试着处理开层，黄金布局，反应。但是开图层地图只显示在一个金色布局窗口中，而不是在其他窗口中。

Question

试着处理开层，反应和黄金布局。黄金布局配置是一行，里面有两个“反应组件”。Openlayers在金色布局的一个“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();

这是结果。带有reactjs和金色布局的开层

Answer 1

需要开层映射的两个实例以及具有唯一id的元素。

如果只使用一个map实例，那么更改它的目标元素将不会在两个元素中呈现映射。

因此需要两个带唯一元素id的map实例。

此外，黄金布局在其布局/reat组件中呈现提供的reactjs组件，这意味着您需要在reactjs组件生命周期的componentDidMount()函数中设置id。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();

Answer 2

您需要更改第二张地图的id。

首先，在整个应用程序中，id属性的值应该是唯一的(嗯，至少在您当前显示给用户的输出中是唯一的)。这两个映射都指向使用id="map"的同一个div元素(可能是他们找到的第一个)。

因此，您的第一个映射可以使用id="map1"来针对div，而第二个map组件应该使用id="map2"来针对div。

因此，您应该尝试将映射id作为两个组件的支柱，并根据此属性在render()方法中设置目标id和div id。

拜托，如果我的回答对你有帮助，请告诉我！