使用 React Leaflet 更改 Mapbox 瓦片的瓦片大小

Question

使用 react-leaflet 时是否可以更改 Mapbox 瓦片的瓦片大小？

呈现的图块的文本看起来太小，这让我觉得这些是 512px 的图块被 Leaflet 视为 256px 的图块。我在连接到 Macbook Pro（带 Retina 屏幕）的外接显示器上遇到了这种情况。不确定视网膜屏幕是否有任何影响。

查看 react-leaflet docs for TileLayer but it does not expose the tileSize parameter. Mapbox's tile URL template 也不接受用于定义图块大小的参数。

还有其他方法可以调整磁贴大小吗？谢谢！

import { MapContainer, TileLayer, Marker } from 'react-leaflet';

export function MapView({markers, center}) {
    return (
        <MapContainer center={[center.at, center.lon]}>
            <TileLayer 
                url={`https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=${config.mapbox}`}
            />
                { markers.map((marker, index) => (
                    <Marker position={[marker.lat, marker.lon]} key={index} />
                ))}
        </MapContainer>
    )
}

Answer 1

您可以创建自己的 TileLayer 组件并定义 tileSize 和 zoomOffset

 function TileLayer() {
    const map = useMap();

    useEffect(() => {
      new L.TileLayer(
        `https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=${yourToken}`,
        {
          tileSize: 512,
          zoomOffset: -1
        }
      ).addTo(map);
    }, []);

    return null;
  }

并将其用作常规 MapContainer 的子项。

vanilla leaflet

中有一个类似的帖子

使用 React Leaflet 更改 Mapbox 瓦片的瓦片大小

Change Tile Size of Mapbox Tiles using React Leaflet

javascript

leaflet

mapbox

reactjs

react-leaflet