反应-左映射层重复

Question

我有一张地图，但它会重复。我希望它停止重复，只得到一张地图。我该怎么做？

<MapContainer 
    className='h-[700px] w-[700px] float-right mr-10 mt-10'
    center={[51.505, -0.09]} zoom={5} scrollWheelZoom={true}>
    <TileLayer
      noWrap={true}
      url="/allmap.jpg"
    />
  </MapContainer>

​

​

Answer 1

我看到您在URL中添加了图像url="/allmap.jpg".的路径因为它是一个图像，所以在呈现后您可以在TileLayer上检查它。在右侧看到包含此图像的类，因为background-image将以下内容添加到该类中。

.tile-layer-class  { 
 background-repeat: no-repeat;
 background-size: cover;
}

更新：

问题是图像没有显示出来。因为有来自leaflet.css的样式，所以隐藏要显示的图像。您可以通过使用下面的类来重写该样式。

.leaflet-container {
    overflow: unset <= or by using !important as well if that didn't reflect.
}

这个问题根本与造型无关。我发现这个图像不仅在dom中只呈现了一次，而且被呈现在4图像标记中。

​

​

我认为您需要找出在dom中呈现4幅图像的原因。我尽力诚实地尽我所能。但我不熟悉Next.js