如何在react-leaflet中隐藏POI标记？

当然可以隐藏这些POI标记，以下是几种实用方案：

方法1：替换为无POI的瓦片图层 #

react-leaflet默认的OpenStreetMap瓦片包含POI信息，你可以直接切换到第三方提供的无POI瓦片源。示例如下（以Maptiler为例，需自行申请API密钥）：

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

function MapComponent() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh' }}>
      <TileLayer
        url="https://api.maptiler.com/maps/streets-no-poi/{z}/{x}/{y}.png?key=你的Maptiler密钥"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://www.maptiler.com/">MapTiler</a>'
      />
    </MapContainer>
  );
}

export default MapComponent;

方法2：自定义瓦片样式（适配Mapbox） #

如果使用Mapbox服务，可通过Mapbox Studio创建不含POI的自定义样式：

• 登录Mapbox Studio，新建或修改现有样式
• 在图层列表中找到所有POI相关图层（如poi-label、poi-park），设置为隐藏
• 导出样式URL后，在react-leaflet中使用：

<TileLayer
  url="mapbox://styles/你的用户名/你的样式ID"
  attribution='© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  accessToken="你的Mapbox访问令牌"
/>

注意事项 #

瓦片图层是预渲染的静态图片，无法通过JS直接修改已加载瓦片上的POI标记。如果需要更灵活的图层控制，可考虑使用矢量瓦片搭配leaflet-vectorgrid等插件，但实现成本较高，适合有一定经验的开发者。

内容的提问来源于stack exchange，提问作者Jonas