react-leaflet：即使是最简单的代码也不会显示任何内容

Question

我正在尝试弄清楚如何使用 react-leaflet 渲染 leaflet 地图，因为我没有得到任何输出，你可以在这里看到：

这是代码：

从 'react' 导入 * 作为 React；

import * as leaflet from 'leaflet'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

// https://gist.github.com/simon04/3b89aa6ca858c72110bb80dd13b4f941

// https://github.com/Leaflet/Leaflet/issues/4849

import "leaflet/dist/leaflet.css"
//import "./leaflet.css"
import "leaflet/dist/images/marker-shadow.png"

//leaflet.Icon.Default.mergeOptions({
    //iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    //iconUrl: require('leaflet/dist/images/marker-icon.png'),
    //shadowUrl: require('leaflet/dist/images/marker-shadow.png')
//});


import Box from '@mui/material/Box'

export default function Mapping(props) {

  // 

  // 

  // 


  const [mapState, setMapState] = React.useState(
    {
      lat: 41.257017,
      lng: 29.077524,
      zoom: 13,
    }
  )

  return (
    <div>
      <h3>Map</h3>

      <Box sx={{ minWidth: 120 }}>

        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          style={{ height: '100vh', width: '100wh' }}
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={[51.505, -0.09]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>


      </Box>


    </div>
  )
}

按照建议here 我在 webpack.config.js 中添加了以下 rules :

    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[path]/[name].[ext]",
          },
        },
      ],
    },
  ]
},

而且，实际上，没有关于 css 个文件的错误消息。

正在添加

<style>
  .leaflet-container {
    height: 400px;
    width: 800px;
   }
 </style>

到index.html我得到这个输出：

这更接近我期望的输出 https://react-leaflet.js.org/docs/start-setup/ :

将 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 放在 index.html 的 body 部分的底部，我得到这个：

已解决：

删除proxy configuration后，删除index.html中的alink并更新map.tsx如下：

从 'react' 导入 * 作为 React；

import * as leaflet from 'leaflet'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

// https://gist.github.com/simon04/3b89aa6ca858c72110bb80dd13b4f941

// https://github.com/Leaflet/Leaflet/issues/4849

import "leaflet/dist/leaflet.css"
import "leaflet/dist/images/marker-shadow.png"

//Leaflet.Icon.Default.mergeOptions({
    //iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    //iconUrl: require('leaflet/dist/images/marker-icon.png'),
    //shadowUrl: require('leaflet/dist/images/marker-shadow.png')
//});


import Box from '@mui/material/Box'

export default function Mapping(props) {

  // 

  // 

  // 


  const [mapState, setMapState] = React.useState(
    {
      lat: 41.257017,
      lng: 29.077524,
      zoom: 13,
    }
  )

  return (
    <div>
      <h3>Map</h3>

      <div id="map">

        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          style={{ height: '100vh', width: '100wh' }}
        >

        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

          <Marker position={[51.505, -0.09]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>


      </div>


    </div>
  )
}

leaflet地图终于出现了：

"@types/leaflet": "^1.7.8"
"leaflet": "^1.7.1"
"webpack": "^5.23.0"
"react": "^17.0.2"
"react-leaflet": "^3.2.5"
node: v16.13.0
O.S.: Ubuntu 20.04 Desktop

我做错了什么或者我错过了什么？如何使 react-leaflet 工作？

Answer 1

事实上，您最初只是在 <MapContainer> 组件上缺少定义的高度。

https://react-leaflet.js.org/docs/start-setup/

If the map is not displayed properly, it is most likely because you haven't followed all the prerequisites.

[...] Make sure your map container has a defined height

现在您只缺少一个平铺层：

<MapContainer>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  // More Layers...
</MapContainer>

react-leaflet：即使是最简单的代码也不会显示任何内容

react-leaflet: even the simplest code doesn't show up anything

leaflet

typescript

react-leaflet