javascript - Leaflet ReactJS Map 未完全显示图块

Question

我正在尝试创建一个模式内的地图。但是地图只显示了一部分。我在invalidatingSize()创建节点后尝试过，但它似乎不起作用。

import React from 'react';
import ReactDOM from 'react-dom'
import L from 'leaflet';

class Mapa extends React.Component {
    constructor(props){
        super(props);
        this.state = {
        };
    }

    createMap(element){
        var map = L.map(element);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        return map;
    }

    setupMap(){
        this.map.setView([this.props.lat, this.props.lon], this.props.zoom);
        this.map.invalidateSize();
    }

    componentDidMount(){
        let self = this;
        if (this.props.createMap) {
            this.map = this.props.createMap(ReactDOM.findDOMNode(self));
        } else {
            this.map = this.createMap(ReactDOM.findDOMNode(self));
        }

        this.setupMap();
    }

    render(){
        /*Returns div with id map*/
    }
}

Answer 1

我这样做是使用JSS：

import jss from 'jss';
import jssDefault from 'jss-preset-default';

import 'leaflet/dist/leaflet.css';

jss.setup(jssDefault());

jss.createStyleSheet({
  '@global': {
    '.leaflet-container': {
      height: '100%',
    },
  },
}).attach();

Leaflet 使用全局 CSS 类。所以你可以使用你的全局样式css-loader：

styles.css：

:global {
  .leaflet-container {
    height: 100%;
  }
}

component.jsx：

import './styles.css';

Answer 2

最后我修好了。代码是正确的，但我没有正确添加传单依赖项。一旦我修好了，一切都完美无缺。实际上 this.map.invalidateSize(); 没有必要。

    从“反应”导入反应；
    从 'react-dom' 导入 ReactDOM
    从“传单”导入 L；

    类 Mapa 扩展 React.Component {
        构造函数（道具）{
            超级（道具）；
            这个.state = {
            };
        }

        创建地图（元素）{
            var map = L.map(元素);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                归属：'© OpenStreetMap 贡献者'
            }).addTo(地图);
            返回地图；
        }

        设置地图（）{
            this.map.setView([this.props.lat, this.props.lon], this.props.zoom);
        }

        组件DidMount(){
            让自我=这个；
            如果（this.props.createMap）{
                this.map = this.props.createMap(ReactDOM.findDOMNode(self));
            } 别的 {
                this.map = this.createMap(ReactDOM.findDOMNode(self));
            }

            this.setupMap();
        }

        使成为（）{
            /*返回带有id map的div*/
        }
    }