Problème avec Leaflet et Leaflet Draw : Uncaught TypeError : Impossible de lire la propriété (lire « longueur ») de non défini dans vue-leaflet.draw.js ? 20d6:8

Question

mounted() {
 this.initMap();
},
methods: {
initMap() {
  this.map = L.map('mapContainer').setView([48.856663, 2.351556], 12);
  this.tileLayer = L.tileLayer(
      "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
      {
        attribution: '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: "mapbox/satellite-streets-v11",
        accessToken: "token",
      }
  );
  this.tileLayer.addTo(this.map);
  var drawnItems = new L.FeatureGroup();
  this.map.addLayer(drawnItems);
  var drawControl = new L.Control.Draw({
    edit: {
      featureGroup: drawnItems
    }
  });
  this.map.addControl(drawControl);

  this.map.on(L.Draw.Event.CREATED, function(event){
    let layer = event.layer;
    console.log(`start ${layer}`);
    drawnItems.addLayer((layer))
  })
 },
},
}

leaflet.draw.js?20d6:8 Uncaught TypeError : Impossible de lire la propriété non définie (lire 'longueur')

Après la première interaction avec la carte, une erreur apparaît dans la console et la forme ne peut plus être dessinée

UPD : passer au dessin mapbox

Answer 1

J'ai utilisé un code similaire pour dessiner des polygones sur un fond de carte et j'ai rencontré des problèmes similaires en utilisant Vue3 avec un dépliant et un dessin de dépliant. Après avoir dessiné le polygone, j'obtiens un certain nombre d'erreurs dans la console, probablement déclenchées par des événements de survol de la souris.

Uncaught TypeError: this._markers is undefined
in leaflet-draw.js:162:18

La cause première du problème n'a pas encore été trouvée, mais la raison peut être que leaflet-draw n'est plus conforme à la bibliothèque de base de Leaflet (juste une supposition). Le dernier commit sur Github remonte à 2018, et il existe une longue liste de problèmes et de demandes d'extraction ouvertes, tandis que Leaflet lui-même est constamment mis à jour.

Ce problème peut également survenir lors de l'utilisation de cette bibliothèque avec Vue.

Avez-vous essayé de créer la fonctionnalité ci-dessus à l'aide de Vanilla JS ?

Answer 2

C'est ainsi que j'ai résolu le problème. Au lieu de Leaflet, Utilisez MapBox et le dessin MapBox fonctionne dans Vue 3