Question

尝试使用openlayers，reactjs和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 with reactjs and golden-layout

Answer 1

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

首先，img_blur = cv2.medianBlur(self.cropped_img,5).astype('uint8') img_thresh_Gaussian = cv2.adaptiveThreshold(img_blur, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 11, 2)属性的值在整个应用中应为唯一（嗯，至少在当前显示给用户的输出中是唯一的）。您的两个地图都用MIN_LENGTH = 8 MIN_UPPER = 3 MIN_DIGIT = 3 def check_pass(p): if not p or len(p) < MIN_LENGTH: return False # fast-exit, validate length count_upper = count_digit = 0 pass_upper = pass_digit = False for char in p: # iterate over the characters if char.isupper(): count_upper += 1 # increment the counter and check if we've reached the limit pass_upper = count_upper >= MIN_UPPER elif char.isdigit(): count_digit += 1 # increment the counter and check if we've reached the limit pass_digit = count_digit >= MIN_DIGIT else: # for any other character we have nothing to do continue # we got here because the caracter was a digit or an upper, meaning that 1 of the counters has changed and maybe the "pass" flags also if pass_upper and pass_digit: # we've passed the checks, so fast-exit we don't need to iterate anymore return True # if we've got here, it means that the password didn't passed the checks return False指向同一个div元素（可能是它们找到的第一个）。

因此，您的第一张地图可能会以id为目标div，第二张地图组件应以id="map"为目标的div。

因此，您应该尝试将地图id="map1"作为两个组件的道具，并在{{1中设置目标ID 和 div ID }}基于此属性的方法

请让我知道我的回答是否对您有帮助！

Answer 2

需要两个openlayers实例以及一个具有唯一id的元素。

如果仅使用地图的一个实例，则更改其目标元素将不会在两个元素中呈现地图。

因此需要两个map实例，它们具有唯一元素id。

同样，Golden-layout在其layout / reat-component中渲染提供的react组件，这意味着您需要在reactjs组件生命周期的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();

尝试使用openlayers，Golden Layout，reactjs。但是openlayers地图仅在金色布局的1个窗口中显示，而在其他窗口中不显示

2 个答案: