使用setPaintProperty修改Mapbox Outdoors-v10底图图层颜色遇错误

Hey there, let's work through the issues in your code to get those roads turning red!

First, a syntax oversight #

Your map.on('load') callback is missing a closing parenthesis at the very end. That's a tiny but critical syntax error that'll prevent your code from running as intended.

Second, using the wrong paint property for road layers #

The road-primary layer in Mapbox's Outdoors-v10 style is a line layer, not a fill layer. So fill-color won't affect it at all—you need to use line-color instead, which is the correct property for styling line-based features like roads.

Here's the corrected code: #

var map = new mapboxgl.Map({ 
    container: this.mapContainer, 
    center: homePoint.geometry.coordinates, 
    style: 'mapbox://styles/mapbox/outdoors-v10', 
    interactive: false, 
}); 
map.on('load', function () { 
    map.setPaintProperty('road-primary','line-color', 'rgb(255,0,0)');
}); // Added the missing closing parenthesis here

A quick pro tip: If you're ever unsure about a layer's type or available properties, you can run console.log(map.getStyle().layers) in your browser's dev tools to inspect all the details of each layer in the Outdoors-v10 style. That'll help you pick the right properties for future tweaks!

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