Mapbox GL JS渲染俄罗斯英文地图：自定义街道名转写方案咨询

Great question! The short answer is yes, you can implement custom transliteration logic for your Mapbox map's text-field property—even without relying on the name:en tag (which you've noted isn't feasible here). Below are two practical, production-ready approaches to solve this:

1. Preprocess Your Data to Add Custom Transliterated Attributes #

This is the most straightforward and performant option for large datasets. The idea is to generate your standardized English names upfront and attach them as custom properties to your map features:

• Step 1: Load your map data (vector tiles or GeoJSON)
• Step 2: Iterate over features that need transliteration (e.g., streets, POIs)
• Step 3: Apply your standardized transliteration rules (follow official standards like GOST 7.79-2000 or ISO 9 to comply with OSM's guidelines) to the Russian name:ru attribute
• Step 4: Add a custom property (like custom_name_en) to each feature
• Step 5: Reference this new property directly in your text-field

Here's a code example to illustrate:

map.on('load', () => {
  // Wait for your vector source to load
  const streetsSource = map.getSource('russian-streets');
  streetsSource.on('data', (e) => {
    if (e.dataType === 'source' && e.sourceDataType === 'vector') {
      // Fetch all street features from the source layer
      const streetFeatures = map.querySourceFeatures('russian-streets', {
        sourceLayer: 'streets'
      });

      // Define your standardized transliteration function
      const transliterateToEnglish = (cyrillicName) => {
        // Replace this with your compliant transliteration logic
        // Example using a standard mapping (expand this for full coverage)
        const translitMap = {
          'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd',
          'е': 'e', 'ё': 'yo', 'ж': 'zh', 'з': 'z', 'и': 'i',
          'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n',
          'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't',
          'у': 'u', 'ф': 'f', 'х': 'kh', 'ц': 'ts', 'ч': 'ch',
          'ш': 'sh', 'щ': 'shch', 'ъ': '', 'ы': 'y', 'ь': '',
          'э': 'e', 'ю': 'yu', 'я': 'ya'
        };

        return cyrillicName.split('').map(char => {
          const lowerChar = char.toLowerCase();
          return translitMap[lowerChar] || char;
        }).join('');
      };

      // Update each feature with the transliterated name
      streetFeatures.forEach(feature => {
        if (feature.properties['name:ru']) {
          feature.properties.custom_name_en = transliterateToEnglish(feature.properties['name:ru']);
        }
      });

      // Refresh the source with updated features
      streetsSource.setData(streetsSource._data);
    }
  });

  // Add the label layer using your custom attribute
  map.addLayer({
    id: 'russian-street-labels',
    type: 'symbol',
    source: 'russian-streets',
    sourceLayer: 'streets',
    layout: {
      'text-field': ['get', 'custom_name_en'],
      'text-size': 12,
      // Add other layout properties as needed
    }
  });
});

2. Dynamic Transliteration with Runtime Expressions #

If you prefer not to modify your source data, you can use Mapbox GL JS's runtime expressions combined with external transliteration logic. Note that Mapbox's native expressions can't directly call external JS functions, but you can compute the transliterated value in JS and inject it into the expression:

// First, set up a reusable transliteration function (use a library for full compliance)
const cyrillicToEnglish = (name) => {
  // For production, use a tested library like `cyrillic-to-translit-js` with the Russian preset
  const transliterator = new (require('cyrillic-to-translit-js'))({ preset: 'ru' });
  return transliterator.transform(name);
};

// Add your label layer with dynamic text-field logic
map.addLayer({
  id: 'russian-street-labels',
  type: 'symbol',
  source: 'russian-streets',
  sourceLayer: 'streets',
  layout: {
    'text-field': [
      'case',
      // Fall back to existing name:en if it exists
      ['has', 'name:en'], ['get', 'name:en'],
      // Transliterate name:ru if available
      ['has', 'name:ru'], cyrillicToEnglish(['get', 'name:ru']),
      // Final fallback to the default name
      ['get', 'name']
    ],
    'text-size': 12
  }
});

Note: For remote vector tiles, this approach works best if you process each tile as it loads (using the sourcedata event) to ensure transliteration happens dynamically for new features.

Critical Considerations #

• Compliance: Always use an official, OSM-accepted transliteration standard (like GOST 7.79-2000) to avoid violating OSM's rules against arbitrary transliteration
• Performance: For large datasets, preprocessing in a Web Worker or before uploading your vector tiles will keep your map responsive
• Coverage: Ensure your transliteration logic handles all Russian Cyrillic characters, including special letters like ё

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