Leaflet ReactJS Map不会完全显示tile

2 回答

• 0

  我使用 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';
  

  回复于 2024-04-30T00:00:54+08:00
• 0

  最后我修好了 . 代码是正确的但我没有正确添加传单依赖项 . 一旦我修复了所有工作完美 . 实际上this.map.invalidateSize（）;没有必要 .

  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: '© OpenStreetMap contributors'
              }).addTo(map);
              return map;
          }
  
          setupMap(){
              this.map.setView([this.props.lat, this.props.lon], this.props.zoom);
          }
  
          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*/
          }
      }
  

  回复于 2024-04-30T00:00:54+08:00