不能与NextJS一起使用Leaflet

Question

我想将Leaflet与NextJS（typescript）一起使用。

但是小叶剂量不支持SSR。因此，我使用react-leaflet-univarsal。

然后，我自定义Leaflet的标记组件。因此，我想使用Leaflet.Icon。我尝试了两件事。

1. if(process.browser){}

找不到此window。

2. 与next/dynamic一起使用动态导入

let iconPerson: any;
  const DynamicComponent = dynamic(
    () =>
      import('leaflet').then(L => {
        iconPerson = (L as any).Icon.extend({
          options: {
            iconUrl: '/images/icon1.jpg',
            iconRetinaUrl: '/images/icon1.jpg',
            iconSize: new (L as any).Point(60, 75),
            className: 'leaflet-div-icon',
          },
        });
      }) as any,
    { ssr: false },
  );

....

<Marker icon={iconPerson}>

此已打印。 >无法读取未定义的属性'createIcon']

是将L.icon与NextJS一起使用吗？

我想将Leaflet与NextJS（typescript）一起使用。但是Leaflet不支持SSR。因此，我使用react-leaflet-univarsal。然后，我自定义Leaflet的Marker Component。因此，我想使用Leaflet.Icon。我尝试过...

Answer 1

动态加载实际上仅用于组件，而不是库。

Answer 2

我通过SSR Map组件解决了此问题。