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
P粉818561682
P粉818561682 2024-03-26 22:04:24
0
2
352

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

P粉818561682
P粉818561682

répondre à tous(2)
P粉395056196

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 ?

P粉211600174

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal