Comment puis-je changer mes unités leaflet.draw de impériale en métrique?

Question

J'ai construit une carte de brochure qui permet aux utilisateurs de dessiner une sélection personnalisée avec l'outil cercle. Le code source me dit que je peux changer le préavis d'outil en métriques, mais je n'ai aucune idée de comment y parvenir.

Rayon: 1239 pieds

Je voudrais changer pour:

Rayon: 377 m

Référence visuelle:

fonction Leaflet.draw qui est appelée pour afficher le rayon:

// Leaflet.draw.js 
readableDistance: function(t, e, i, o) { 
    var n, s; 
    switch (s = "string" == typeof e ? e : i ? "feet" : o ? "nauticalMile" : e ? "metric" : "yards") { 
     case "metric": 
      n = t > 1e3 ? (t/1e3).toFixed(2) + " km" : Math.ceil(t) + " m"; 
      break; 
     case "feet": 
      t *= 3.28083, n = Math.ceil(t) + " ft"; 
      break; 
     case "nauticalMile": 
      t *= .53996, n = (t/1e3).toFixed(2) + " nm"; 
      break; 
     case "yards": 
     default: 
      t *= 1.09361, n = t > 1760 ? (t/1760).toFixed(2) + " miles" : Math.ceil(t) + " yd" 
    } 
    return n 
} 

Mon Map.js (ce qui est actuellement la façon dont j'INITIALISER la carte):

// Map.js 
function initMap() { 
    const drawControl = new L.Control.Draw({ 
     draw: { 
      marker : false, 
      polygon : true, 
      polyline: { 
       metric: true 
      }, 
      rectangle: true, 
      circle : { 
       metric: true 
      } 
     }, 
     edit: false 
    }); 

    const map = L.map('map').setView([CONFIG.MAP.LATITUDE, CONFIG.MAP.LONGITUDE], CONFIG.MAP.ZOOMLEVEL) 
     .on('popupopen', e => { 
      $(e.popup._source._icon).attr('src', CONFIG.IMG.ELEC_ACTIVE); 
     }) 
     .on('popupclose', e => { 
      $(e.popup._source._icon).attr('src', CONFIG.IMG.ELEC_INACTIVE); 
     }); 

    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token={accessToken}', { 
     accessToken: CONFIG.MAP.ACCESSTOKEN 
    }).addTo(map); 

    map.addControl(drawControl); 

    const icon = L.icon({ 
     iconUrl : CONFIG.IMG.ELEC_INACTIVE, 
     popupAnchor: [125, 25], 
     iconSize : [14, 18] 
    }); 

    const markers = L.markerClusterGroup({ 
     maxClusterRadius(zoom) { 
      return (zoom <= 14) ? 80 : 1; // radius in pixels 
     } 
    }); 

    for (let i = 0; i < 150; i++) { 
     // Remove everything except the CONFIG variables, Math.random() serves as testing display. 
     const marker = L.marker([(Math.random() * 0.05) - 0.03 + CONFIG.MAP.LATITUDE, (Math.random() * 0.05) - 0.03 + CONFIG.MAP.LONGITUDE], { 
      icon, 
      closeButton: false 
     }).addTo(map).bindPopup('<p class="c-popup__content"><a class="c-popup__link" href="#">Add pole to selection</a><span class="c-popup__address">Marnixstraat 246, 1016 TL, Amsterdam<span></p>', { 
      'className': 'c-popup' 
     }) 
      .on('click',() => { 
       $('.c-popup').css('width', 'auto'); 
      }); 
     markers.addLayer(marker); 
    } 

    map.addLayer(markers); 
} 

Side note: Je suis conscient de cette question: Leaflet Draw Plugin: How to hide/show drawing tools by Layer Type dynamically

Mais cette réponse ne répond pas tout à fait au problème que je rencontre, en plus, je préférerais éviter d'écrire un nouveau fu nction de réinitialiser mes contrôles

Answer 1

On dirait que le API documentation n'est pas exactement au même niveau que le source code (version v0.4.9).

1) Les documents ne sont pas explicites, mais les options circle sont de la même forme que les options polyline, mais elles ne les étendent pas directement. C'est à dire. en spécifiant metric sur polyline ne l'applique pas pour circle également. => Vous devez également spécifier l'option metric sur circle. (Même pour polygon et rectangle je suppose)

2) Même si l'option metric accepte un booléen, il doit être soit la chaîne "metric" ou utilisée conjointement avec l'option feet: false pour qu'elle prenne effet.

var drawControl = new L.Control.Draw({ 
    draw: { 
     circle : { 
      metric: 'metric' 
     } 
    } 
}); 

Ou:

var drawControl = new L.Control.Draw({ 
    draw: { 
     circle : { 
      metric: true, 
      feet: false 
     } 
    } 
}); 

Démo: http://playground-leaflet.rhcloud.com/qur/1/edit?html,output

Note: problème connu, voir Leaflet.draw issue #690. La solution de contournement proposée est exactement ce qui est décrit ci-dessus.