嘿，刚好我之前也做过类似的需求，用react-leaflet结合VectorGrid就能完美实现你的自定义OSM样式需求——毕竟默认的栅格瓦片（TileLayer）确实没法直接修改样式。下面一步步来：

第一步：安装必要依赖 #

首先得安装矢量网格相关的包，因为react-leaflet本身不自带这个组件：

npm install leaflet.vectorgrid @react-leaflet/vectorgrid

第二步：定义自定义样式函数 #

你需要根据OSM矢量瓦片的要素属性来设置不同的样式，比如道路、森林、海岸线这些。这里给你写一个基础的样式函数，你可以根据需求调整：

const customOSMStyle = (properties, zoom) => {
  // 不同的矢量瓦片源属性字段可能略有差异，这里以常见的OSM矢量瓦片为例
  const featureClass = properties.class || properties.layer;

  switch(featureClass) {
    // 自定义道路样式为红色，覆盖不同类型道路
    case 'road':
    case 'motorway':
    case 'residential':
      return {
        fill: false,
        color: '#ff0000', // 红色
        weight: zoom > 13 ? 3 : 2, // 缩放等级高时加粗道路
        opacity: 0.8
      };
    // 自定义森林为你想要的绿色
    case 'wood':
    case 'forest':
      return {
        fillColor: '#27ae60', // 偏深的绿色，可替换成任意色值
        fillOpacity: 0.6,
        color: 'transparent', // 隐藏森林边界线
        weight: 0
      };
    // 隐藏海岸线
    case 'coastline':
      return {
        display: 'none'
      };
    // 其他未匹配的要素设置默认样式，也可以直接隐藏
    default:
      return {
        fillOpacity: 0,
        color: '#888',
        weight: 1,
        opacity: 0.5
      };
  }
}

第三步：替换TileLayer为VectorGrid #

把你原来的栅格TileLayer换成矢量网格组件，配置OSM的矢量瓦片地址和我们写的样式：

import { Map, Marker, Popup } from 'react-leaflet';
import { VectorGrid } from '@react-leaflet/vectorgrid';

// ... 你的其他组件代码 ...

<Map center={position} zoom={12}>
  {/* 用VectorGrid替代原来的TileLayer */}
  <VectorGrid
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.pbf"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    vectorTileLayerStyles={customOSMStyle}
    maxZoom={18}
    minZoom={5}
  />
  <Marker 
    position={position ? position : TOULOUSE_GPS_LOCATION} 
    draggable={true} 
    onDragend={handleMarkerPositionChange}
  >
    <Popup>
      Vous pouvez déplacer le marqueur afin <br /> d'ajuster au mieux votre position
    </Popup>
  </Marker>
</Map>

一些实用提醒 #

• 如果样式不生效，你可以打开浏览器开发者工具，查看矢量要素的具体属性（比如在Leaflet调试面板里），然后调整switch里的匹配条件——不同的矢量瓦片源，属性字段可能略有差异。
• 若官方OSM矢量瓦片加载不稳定，你也可以用其他基于OSM的免费矢量瓦片源（比如Maptiler的OSM瓦片，注意符合使用条款），只需要替换url字段即可。
• 记得确保你已经导入了Leaflet的基础样式：import 'leaflet/dist/leaflet.css'，否则地图可能显示异常。

这样就能实现你想要的红色道路、自定义绿色森林、隐藏海岸线的效果啦，完全基于OpenStreetMap，不需要依赖Mapbox~

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