如何在Leaflet中仅渲染Esri矢量瓦片的道路图层？

你遇到的问题根源是：Leaflet.VectorGrid会对未在vectorTileLayerStyles中定义的子图层使用默认蓝色样式渲染，而你只配置了"Road"图层的样式，其他图层（如海岸线、标签类图层）没有被显式隐藏。

方法一：显式隐藏所有非道路图层 #

根据你在控制台看到的子图层列表，将所有非"Road"的图层都设置为display: 'none'，确保它们不被渲染：

const style = {
  Road: { weight: 1, color: "#FF0000", opacity: 1 },
  // 替换为你实际在控制台看到的其他图层名称
  Coastline: { display: 'none' },
  WaterArea: { display: 'none' },
  PlaceLabels: { display: 'none' },
  BuildingFootprints: { display: 'none' }
  // 所有其他非Road图层都添加此配置
};

const vectorTileOptions = { vectorTileLayerStyles: style };
L.vectorGrid.protobuf('https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf', vectorTileOptions).addTo(map);

方法二：使用样式函数统一处理（更灵活） #

通过自定义样式函数，仅对"Road"图层应用样式，其他所有图层直接隐藏，无需逐个列出图层名称：

const vectorTileOptions = {
  vectorTileLayerStyles: function(properties) {
    // 仅匹配Road图层应用样式
    if (properties.layer === 'Road') {
      return { weight: 1, color: "#FF0000", opacity: 1 };
    }
    // 其他图层全部隐藏
    return { display: 'none' };
  }
};

L.vectorGrid.protobuf('https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf', vectorTileOptions).addTo(map);

注意事项 #

• 若仍有部分元素显示，检查控制台输出的图层名称，确认是否存在Road_Secondary、Road_Labels这类道路相关子图层，按需决定保留或隐藏。
• display: 'none'是完全隐藏图层的可靠方式，空对象{}可能仍会触发默认渲染逻辑。

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