如何解决使用 React Leaflet 更改 Mapbox Tiles 的 Tile Size
是否可以在使用 react-leaflet
时更改 Mapbox 图块的图块大小?
渲染图块的文字看起来太小,这让我认为这些 512 像素的图块被 Leaflet 视为 256 像素的图块。我在连接到 Macbook Pro(带有 Retina 屏幕)的外接显示器上遇到此问题。不确定视网膜屏幕是否会影响任何东西。
查看了 react-leaflet
docs for TileLayer
但它没有公开 tileSize
参数。 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>
)
}
解决方法
您可以创建自己的 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 中有一个类似的主题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。