Пытаюсь работать с openlayers, Golden Layout, реагировать.Но карта openlayers отображается только в одном окне с разметкой, а не в другом.

Question

Попытка работать с openlayers, реагировать и голд-макет.Конфигурация Golden-layout - это один ряд с двумя «реагирующими компонентами» внутри.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();

Вот результат, openlayers с реагированием и золотой раскладкой

Answer 1

Требуются два экземпляра карты открытых слоев, а также элемент с уникальным id.

, если используется только один экземпляр карты, то при изменении его целевого элемента карта не будет отображаться в обоих элементах.

Так что нужно два экземпляра карты с уникальным элементом id.

Кроме того, golden-layout визуализирует предоставленный реагирующий компонент в его layout / reat-component, что означает, что вам нужно установить id в componentDidMount() функция жизненного цикла компонента реагирования. 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 должно быть уникальным во всем приложении (ну, по крайней мере, уникальным в выводе, который вы в данный момент показываете пользователю).Обе ваши карты указывают на один и тот же элемент div с id="map" (вероятно, первым, который они найдут).

Таким образом, ваша первая карта потенциально может быть нацелена на div с помощью id="map1", а второй компонент карты должен быть нацелен на divс id="map2".

Таким образом, вы должны попытаться поставить карту id в качестве опоры для обоих ваших компонентов и установить идентификатор цели и идентификатор id в render() метод, основанный на этом свойстве

Пожалуйста, дайте мне знать, если мой ответ помог вам!