React and Leaflet - проблема с отображением слоя

Question

Я пытаюсь использовать Leaflet в проекте React. Моя цель на самом деле очень простая: просто отобразить слой OpenStreetMap (без маркеров или вещей)

Вот мой код:

import React, { Component } from 'react'; 
import L from 'leaflet'; 

class MyMap extends Component { 

    constructor(){ 
    super(); 
    this.state ={ 
     map:null, 
    }; 
    } 

componentDidMount() { 
     var map = L.map('map', { 
      minZoom: 2, 
      maxZoom: 20, 
      layers: [L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'})], 
      attributionControl: false, 
     }); 
     return this.setState({ 
      map: map 
     }); 
    } 
    render() { 
     return (
      <div id='map'> </div> 
     ); 
    } 

} 

ReactDOM.render(
    <MyMap />, 
    document.getElementById('root') 
); 

Каждый раз, когда у меня есть сохранить проблему для отображения карты: это выглядит например: (не все плитки отображаются, и они являются проблемами суперпозиций): Screenshot

Неужели кто-то сталкивается с этой проблемой или имеет какие-либо решения?

Спасибо за вашу помощь

Answer 1

Во-первых, убедитесь, что вы загрузили в таблицу стилей листовку в:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"> 

тасовани плитки происходит потому, что либо таблица стилей еще не загружена или листовка выполняется после того, как React фактически отображает цель карты. Что мы можем сделать, это добавить тайм-аут для инициализации:

class MyMap extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state ={ 
 
     map: null, 
 
    }; 
 
    } 
 

 
    componentDidMount() { 
 
    setTimeout(() => { 
 
     var map = L.map('map', { 
 
      minZoom: 2, 
 
      maxZoom: 20, 
 
      layers: [L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'})], 
 
      attributionControl: false, 
 
     }); 
 
     map.fitWorld(); 
 
     return this.setState({ 
 
      map: map 
 
     }); 
 
    }, 100) 
 
    } 
 

 
    render() { 
 
    return <div id="map" style={{ height: 300 }}></div>; 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <MyMap />, 
 
    document.getElementById('View') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"> 
 
<div id="View"></div>