TileLayer 显示顺序不同（使用 React-Leaflet 库）

Question

我正在尝试使用库 react-leaflet 做一个简单的 Web 应用程序。

我有以下代码：

import React from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

class LeafletMap extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}
export default LeafletMap;

但是，TileLayer 始终以随机顺序显示。我已经阅读了很多代码，其中它必须与 Reactjs 的 ComponentDidMount() 一起使用，但是我看到的渲染与库相比完全不同。

你知道我能做什么吗？

Answer 1

它不起作用的唯一原因是我们需要在 index.html 中添加以下代码：

<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
<style type="text/css">
    .leaflet-container {
        height: 400px;
    }
</style>

就这些了。

TileLayer 显示顺序不同（使用 React-Leaflet 库）

TileLayer displays in different order (Using React-Leaflet library)

javascript

reactjs

leaflet

react-leaflet