Настройка языковой опции в Leaflet.Routing.Control

Question

ОБНОВЛЕНО:

Я пытаюсь перевести компонент маршрутизации листовок с языком:'sp', но он не работает для меня.

const createRoutingControl = () => {
L.Routing.control({      
  router: L.Routing.mapbox(config.features.routing.key),      
  plan: new (L.Routing.Plan.extend({
    createGeocoders: function () {
      let container = L.Routing.Plan.prototype.createGeocoders.call(this)
      let reverseRoute = createButton('↑↓', container)
      let copyToClipboard = createButton('5', container, true)       

      return container
    }
  }))([], {
    geocoder: geocoder,
    language: 'sp'
  }),
  units: config.features.routing.units,
  showAlternatives: true,
  autoRoute: true,
  routeWhileDragging: true,      
}).addTo(map)

}

С "language:'sp'" форма переносится, но не инструкции. Я знаю, что должен использовать форматтер, но я попытался поместить его в routing.control, routing.plan... (и другие места только для проверки), и он не работает (карта не отображается)

Answer 1

Ответ от @IvanSanchez почти правильный: Control действительно не имеет language вариант, но есть несколько других классов (не уверен, что это даже правильно задокументировано, извините).

Сказав, что по умолчанию Control класс передает любую опцию, которую вы предоставляете, когда он создает свои дочерние компоненты, поэтому передача language как вариант Control также передаст его форматирующему устройству по умолчанию, маршрутизатору и т. д. Исключение составляют случаи, когда вы предоставляете дочерние компоненты, которые вы создаете сами, например Plan в вашем примере: для этого случая вам нужно явно предоставить опции (как вы уже делаете).

Поэтому я хотел бы предположить, что этот код должен решить проблему:

const createRoutingControl = () => {
L.Routing.control({      
  router: L.Routing.mapbox(config.features.routing.key),      
  plan: new (L.Routing.Plan.extend({
    createGeocoders: function () {
      let container = L.Routing.Plan.prototype.createGeocoders.call(this)
      let reverseRoute = createButton('↑↓', container)
      let copyToClipboard = createButton('5', container, true)       

      return container
    }
  }))([], {
    geocoder: geocoder,
    language: 'sp'
  }),
  units: config.features.routing.units,
  showAlternatives: true,
  autoRoute: true,
  routeWhileDragging: true,
  language: 'sp'
}).addTo(map)

Answer 2

Извините, что копаю эту тему, но не могу перевести инструкцию на французский...

Я установил опцию языка 'fr' непосредственно в L.Routing.control, а также в форматере...

Я пытаюсь отладить строки, где выполняется локализация, и вижу свою проблему в строке 16353 leaflet-routing-machine.js:

    formatInstruction: function(instr, i) {
        if (instr.text === undefined) {
            return this.capitalize(L.Util.template(this._getInstructionTemplate(instr, i),
                .....
                })));
        } else {
            return instr.text;
        }

где instr.text уже инициализирован...

Если я сбрасываю instr.text в "undefined" во время отладки, инструкция хорошо переведена...

Ты хоть представляешь мою проблему? Мой код ниже:

$script(['https://unpkg.com/leaflet/dist/leaflet-src.js'], () =>{
$script(['https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js'], () => {

this.map = L.map(element);

L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="//osm.org/copyright">OpenStreetMap</a>  - rendu <a href="//openstreetmap.fr">OSM France</a> ',
maxZoom: 18
}).addTo(this.map);      


this.map = L.map(element);

L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
 attribution: 'Map data &copy; <a href="//osm.org/copyright">OpenStreetMap</a>  - rendu <a href="//openstreetmap.fr">OSM France</a> ',
 maxZoom: 18
}).addTo(this.map);      

let control1 = L.Routing.control(
 {
  router: L.routing.mapbox(this.key.MapboxKey),   
    
  language: 'fr',
  formatter:  new L.Routing.Formatter({
   language: 'fr' 
  }),

  waypoints: [
   L.latLng(47.928927, 7.538860),
   L.latLng(48.044444, 7.299279),
   L.latLng(47.857503, 6.821690),
   L.latLng(47.506390, 6.996181),
   L.latLng(47.586881, 7.25652)
  ],
  routeWhileDragging: true
 })
 .on('routingerror', function(e) {
  try {
   this.map.getCenter();
  } catch (e) {
   this.map.fitBounds(L.latLngBounds(control1.getWaypoints().map(function(wp) { return wp.latLng; })));
  }

  handleError(e);
 })
 .addTo(this.map);
L.Routing.errorControl(control1).addTo(this.map);

================================================== ==================

Пока я нашел решение, я отдаю его, потому что кажется, что оно не задокументировано:

Я должен добавить опцию языка в качестве параметра функции mapbox при создании "маршрутизатора":

L.routing.mapbox(this.key.MapboxKey, {language: 'fr'}),

Answer 3

Это случай RTFM.

Если вы посмотрите немного ближе на документацию API для Leaflet Routing Machine, вы заметите, что L.Routing.Control не имеет language вариант, и что language опция применяется только к случаям L.Routing.Formatterи что L.Routing.Control может взять formatter вариант, который может содержать экземпляр L.Routing.Formatter, Итак, все вместе...

L.Routing.control({
  router: L.Routing.mapbox(config.features.routing.key),     
  formatter: L.Routing.formatter({
    language: 'sp'
    units: config.features.routing.units,
  }),
  showAlternatives: true,
  autoRoute: true,
  // ... etc
},

---

(PS: "prop" - это "ответный сленг", и это слово здесь не применимо)