大型非地理地图的传单地图渲染问题

Question

我目前正在使用React、tailwindCSS 和react-leaflet 为我的网站开发一个非地理地图。地图呈正方形，面积相当大，每边有1000万像素。图像叠加是一个白色的正方形。我遵循了react-leaflet和传单文档在https://leafletjs.com/examples/crs-simple/crs-simple.html上提供的指南，其中我定义了一个特定的绑定以将图像映射到相应的刻度。

但是，我遇到了一个问题：图像最初没有显示（尽管缩小时确实显示）。具体来说，当我达到一定的缩放级别时，地图往往会消失（尽管标记仍然存在）。对于法线地图（我从教程中获取的地理地图），它可以正常工作，所以我正确设置了传单。

下面是我遇到问题的地图的代码（请注意，我正在使用react-leaflet）：

<MapContainer
                // whenReady={setMapRef}
                center={[this.state.lat, this.state.lng]}
                zoom={this.state.zoom}
                className="h-dvh z-10"
                bounds={bounds}
                // maxBounds={bounds}
                // maxZoom={10}
                zoomControl={false}
                minZoom={-1000}
                maxZoom={7}
                crs={CRS.Simple}
                // zoomSnap={0}
            // maxNativeZoom={7}



            >
                <ImageOverlay
                    url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Blank_square.svg/2048px-Blank_square.svg.png"
                    bounds={bounds}
                    className="border box-border border-black"

                />
                <ZoomControl position="bottomleft" />
                <Marker position={[this.state.lat, this.state.lng]}>
                    <Popup>
                        This is the center
                    </Popup>
                </Marker>
                <Marker position={[51.5, +0.1]}>
                    <Popup>
                        This is the content
                    </Popup>
                </Marker>
            </MapContainer>

在通过控制台检查元素时，我注意到当地图的宽度和高度在某种程度上超过 1000 万像素时，就会开始出现故障，这让我怀疑这可能是问题的根源。我试图通过将每一方的界限设置为 2000 万来纠正这个问题，但问题仍然存在。我试图寻找传单文档来寻找与缩放相关的任何内容，但无济于事。我不知道如何解决这个问题，非常感谢任何帮助或建议。预先感谢！

Answer 1

听起来这个问题可能与 Leaflet 如何管理非地理地图上的图像叠加有关，尤其是在如此大比例的自定义边界下。确保地图的边界与叠加图像的尺寸完全匹配。如果边界关闭，可能会导致图像在某些缩放级别无法加载或消失。此外，调整 maxZoom 和 minZoom 属性可以帮助控制特定比例的可见性。最后，考虑检查 Tailwind 中是否有任何 CSS 可能会干扰地图的可见性。