Reactjs 如何开发传单中的响应层容器？

我正在使用ployate.js开发一个带有全页地图的绘图层工具。用户将绘制一组层来描述工业产品的部件

传单图及其图层应适合屏幕。例如，如果用户使用分辨率为1920x1080的电脑在左下角画了一个圆圈，我应该使用分辨率为1366x768的电脑在左下角看到它。传单地图正在正确调整页面大小，但由于本例中的经纬度，该圆圈在我的电脑屏幕外

我尝试使用invalidateSize、maxBounds、fitBounds等开发此示例，但尚未成功。我如何开发这个场景

保存了1920x1080的GeoJSON，图层如下：

从1366x768加载了相同的GeoJSON（注意左角）：

映射（反应）：

const corner1=L.latLng（-180，-180）；
const corner2=L.latLng（180,180）；
const bounds=L.latLngBounds（corner1，corner2）；
{
这个.tryToCreate（map）；
}}
className=“c-传单-map-map”
中心={[0，0]}
缩放={0}
maxZoom={10}
zoomControl={false}
OnZoomMend={this.zoomLevelsChange}
maxBounds={bounds}
maxBoundsViscosity={1.0}
zoomSnap={0}
crs={L.crs.Simple}
>
{
this.controller=控制器；
this.tryToCreate（）；
}}
>

使用React传单有点不同。您可以在

componentDidMount

中完成您试图完成的任务，在这里您可以引用地图，然后调用fitBounds

编辑：添加矩形

然而，下一个问题是解决方案。传单将保持纵横比，因此，如果您始终希望圆形（或矩形）显示在屏幕的左下角，而不管屏幕和浏览器的纵横比如何，您实际上需要动态渲染角落中的圆形（或矩形）。因此，在

componentDidMount

中，在设置新边界之后，您可以获得这些边界，并定义一个矩形（或任何东西）以始终在相对于

getBounds（）的同一位置渲染。在这段代码中，我将这段代码包装在一个
setTimeout
中，因为动画需要一段时间，而这段时间需要通过
getBounds（）
来获取新的边界值。我相信有一种方法可以减少或删除动画时间

为了使矩形保持在同一位置，我编写了一个
onMove
函数，让贴图始终重新计算位置，而不管是否移动贴图或调整窗口大小

请注意，在本例中，矩形的大小有点草率，但我认为使用CRS可以更容易地获得一致的大小，因为CRS比lats和lngs均匀得多

类映射扩展了React.Component{
状态={
rectCoords:null
};
componentDidMount（）{
const map=this.mapReference.element；
window.map=map；
log（“使用边界初始化：”，map.getBounds（））；
fitBounds地图（[32.852169，-90.5322]，[33.852169，-85.5322]）；
设置超时（（）=>{
log（“边界立即重置为”，map.getBounds（））；
常数矩形坐标=[
[
map.getBounds（）。_soutwest.lat+0.1，
map.getBounds（）。_.lng+0.1
],
[
map.getBounds（）。_soutwest.lat+1，
map.getBounds（）。\u西南液化天然气+1
]
];
this.setState（{rectCoords}）；
}, 500);
}
onMapmove=（）=>{
const map=this.mapReference.element；
常数矩形坐标=[
[
map.getBounds（）。_soutwest.lat+0.1，
map.getBounds（）。_.lng+0.1
],
[map.getBounds（）.\u soutwest.lat+1，map.getBounds（）.\u soutwest.lng+1]
];
this.setState（{rectCoords}）；
}
render（）{
返回(
this.mapReference=mapReference}
缩放={4}
中心={[33.852169，-100.5322]}
onMove={（）=>this.onMapmove（）}>
{this.state.rectCoords&&(
)}
);
}
}

因此，即使贴图以特定边界启动，它也会立即将其适配到所需边界，并始终在同一点的左下角渲染矩形

是一个工作代码沙盒。我相信这也适用于使用简单的CRS。
我想您还没有尝试将
缩放快照
设置为零？请编辑您的问题以查看地图初始化的工作方式。关于
fitBounds
和
zoomSnap
的部分将是最重要的；还有传单版本。另外：在旋转90度（高于宽度）的屏幕上，它应该是什么样子？@IvanSanchez我添加了代码。传单版本是1.6。它应该适合屏幕。用户应该在所有分辨率下看到所有层。哦，反应。我没有反应。研究如何调用
fitBounds（）
而不是指定起始缩放级别。我不明白什么时候应该使用fitBounds（）我已经用tryToCreate方法做了，这不是关于我的问题，在每个解决方案中似乎都是一样的。我意识到在我发布解决方案后，我改变了一些事情，代码沙盒链接是错误的链接。另外，我重新阅读了您的问题，并添加了一些代码来解决始终在相对于左下角的相同位置渲染矩形/圆的问题。这会让你更接近你想要的行为吗？
  const corner1 = L.latLng(-180, -180);
  const corner2 = L.latLng(180, 180);
  const bounds = L.latLngBounds(corner1, corner2);

        <Map
        ref={map => {
          this.tryToCreate(map);
        }}
        className="c-leaflet-map-map"
        center={[0, 0]}
        zoom={0}
        maxZoom={10}
        zoomControl={false}
        onzoomend={this.zoomLevelsChange}
        maxBounds={bounds}
        maxBoundsViscosity={1.0}
        zoomSnap={0}
        crs={L.CRS.Simple}
      >
        <ImageOverlay
          bounds={map.backgroundImageBounds || map.bounds}
          attribution="&amp;copy TofnaTech"
          url={
            map.backgroundImage ||
            map.backgroundImageURL ||
            TransparentImage
          }
          opacity={map.opacity}
          className={cn({ transparentImage: !map.backgroundImage })}
        />
        <FeatureGroup
          ref={controller => {
            this.controller = controller;
            this.tryToCreate();
          }}
        >
          <EditControl
            position="topleft"
            onCreated={this._onCreated}
            onEditStart={this.onEditStart}
            onEditStop={this.onEditStop}
            onEdited={this.onEdited}
            draw={{
              polyline: false,
              polygon: {
                shapeOptions: { ...defaultShapeOptions }
              },
              rectangle: {
                shapeOptions: { ...defaultShapeOptions }
              },
              circle: {
                shapeOptions: { ...defaultShapeOptions }
              },
              marker: false,
              circlemarker: false
            }}
            edit={{
              remove: false
            }}
          /></Map>