Insérer l'options wrap: false Geodesic

**Pierre95** · 16/12/2022, 17h00

Bonjour,
Très novice en leaflet, j'ai un script qui fonctionne bien, mais j'aimerais le modifier pour la raison suivante:
Certaines lignes traversent l'antiméridien et dans se cas cette ligne est coupée en 2.
je sais qu'il existe une option wrap à geodesic qui, mise à false permet de ne tracer qu'une ligne.
Voici mon script:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
 
	<title>CPS-SE</title>
 
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
 
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>	
	<script src="fichiergeojson" type="text/javascript"></script>
	<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
	<style>
                html, body {
                        height: 100%;
                        margin: 0;
                }
                .leaflet-container {
                        height: 400px;
                        width: 600px;
                        max-width: 100%;
                        max-height: 100%;
                }
        </style>
 
</head>
<body>
 
<div id="map" style="width: 1920px; height: 1080px;"></div>
<script>
 
        var map = L.map('map').setView([Lat, Lon], 13);
 
        var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                        'Imagery © <a href="https://www.mapbox.com/">Mapbox CPS-SE</a>',
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1
        }).addTo(map);
                                        
        map.fitBounds([
    [MaxLat, MaxLon],
    [MinLat, MinLon]]);
        
        L.control.scale().addTo(map);
        
        const geodesic = new L.Geodesic().addTo(map); /* Affiche les ligne géodésiques*/
        geodesic.fromGeoJson(waypoints);
        
        /*function pointFilter(feature) {
        if (feature.geometry.type === "Point") return true
    }*/
        
        var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#000",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 1
        };
        
        var LineOptions = {
        opacity: 0,
        fillOpacity:0};
 
        L.geoJSON(waypoints, {
                filter : function (feature){ return feature.geometry.type==="Point"},
                pointToLayer: function (feature, latlng) {
                        if (feature.geometry.type === "Point") {
                                return new L.circleMarker(latlng, geojsonMarkerOptions);
                                                                                                        }},
                        onEachFeature:onEachFeature}).addTo(map);
                
        function onEachFeature(feature, layer){
                if(feature.properties && feature.properties.name){
                        layer.bindPopup("<b>" + feature.properties.name + "</b>" + "<BR>" +
                        feature.properties.latitude +"<BR>" +
                        feature.properties.longitude);}}
        
        var DBPPLat = 'DepLat';
        var DBPPLon = 'DepLon';
        var ABPPLat = 'DesLat';
        var ABPPLon = 'DesLon';
                
        var DBPP = L.marker([Dlat, Dlon]).addTo(map)
                        .bindPopup('<b>Departure Bang Protected Point.</b><br>' + DBPPLat + '<br>' + DBPPLon);
    
        var ABPP = L.marker([Alat, Alon]).addTo(map)
                        .bindPopup('<b>Arrival Bang Protected Point.</b><br>' + ABPPLat + '<br>' + ABPPLon);                      
</script>
 
</body>
</html>

Où dois-je placer l'option wrap?

merci de votre aide

Cordialement
Pierre

**mathieu** · 16/12/2022, 20h34

montrez nous un exemple de code qu'on puisse tester avec une ligne qui a le souci.

**Pierre95** · 17/12/2022, 10h23

Bonjour,

Merci de votre réponse.

En fait ma question est simplement de savoir où placer l'option {wrap: false} de Geodesic.

Merci d'avance

Pierre

**NoSmoking** · 17/12/2022, 17h58

Bonjour,

où placer l'option {wrap: false} de Geodesic.

dans l'initialisation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const geodesic = new L.Geodesic(lesLatLng, {
  wrap: false,
}).addTo(map);

**Pierre95** · 18/12/2022, 10h41

Bonjour,

Merci de votre réponse.
Si j'ai bien compris, je doit modifier mon script comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
const geodesic = new L.Geodesic({wrap: false}).addTo(map); /* Affiche les ligne géodésiques*/
        geodesic.fromGeoJson(waypoints);

Pouvez vous confirmer?

Cordialement
Pierre

**Pierre95** · 18/12/2022, 11h52

Bonjour,

dans mon précédent post, je proposais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
const geodesic = new L.Geodesic({wrap: false}).addTo(map); /* Affiche les ligne géodésiques*/
        geodesic.fromGeoJson(waypoints);

J'obtiens une erreur de script avec ce code.

en testant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const geodesic = new L.Geodesic().addTo(map); /* Affiche les ligne géodésiques*/
        geodesic.fromGeoJson(waypoints, {wrap: false} );

je n'ai pas d'erreur, mais ma route est coupée au méridien 180°

Nom : Capture.JPG
Affichages : 208
Taille : 50,0 Ko

merci de vos lumières.
Pierre

le reste de la route se situe loin sur la carte:

Nom : Capture1.JPG
Affichages : 208
Taille : 47,9 Ko

**mathieu** · 18/12/2022, 13h48

vous avez un exemple d'utilisation là :
https://github.com/henrythasler/Leaf...e-antimeridian

**Pierre95** · 18/12/2022, 14h43

Bonjour,
Oui, j'ai vu cet exemple, mais mes données sont incluses dans un fichier GeoJson et non dans des constantes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 const geodesic = new L.Geodesic().addTo(map); /* Affiche les ligne géodésiques*/
        geodesic.fromGeoJson(waypoints);

**NoSmoking** · 18/12/2022, 16h16

J'obtiens une erreur de script avec ce code.

le constructeur attend un tableau de latLng en premier paramètre avant les options, donc il te faudrait écrire plutôt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const geodesic = L.geodesic([], {  // passage d'un array vide
  wrap: false,
}).addTo(map);

ou en absence de méthode setOptions

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const geodesic = new L.Geodesic().addTo(map); /* Affiche les ligne géodésiques*/
geodesic.fromGeoJson(waypoints);
// ajout de l'option
geodesic.options.wrap=false;

**Pierre95** · 19/12/2022, 09h12

Bonjour,

Je viens de tester vos deux suggestions, malheureusement sans succès.
Dans les 2 cas le résultat est le même que sur mes captures d'écrans ci-dessus...

Pierre

**NoSmoking** · 19/12/2022, 11h29

Je viens de tester vos deux suggestions, malheureusement sans succès.

sur base de ce code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Geodesic</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
#map {position: absolute;left: 0;top: 0;right: 0;bottom: 0;}
</style>
</head>
<body>
<div id="map"></div>
<script>
"use strict";
const oMap = L.map('map', {}).setView([45, -180], 2);
 
new L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  "attribution": "&copy; <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
}).addTo(oMap);
 
const markerA = L.marker(new L.LatLng(45.0, -240.0), {
  draggable: true
}).addTo(oMap);
 
const markerB = L.marker(new L.LatLng(45.0, -120.0), {
  draggable: true
}).addTo(oMap);
 
const geojson = {
  "type": "LineString",
  "coordinates": [
    [-120.0, 45.0],
    [120.0, 45.0]
  ]
};
const geodesic = L.geodesic([], {
  weight: 2,
  opacity: 0.5,
  color: "#F00",
  //wrap: false,
}).addTo(oMap);
 
// ajout de l'option avant les données
geodesic.options.wrap=false;
geodesic.fromGeoJson(geojson);
 
markerA.on('drag', (e) => {
  geodesic.setLatLngs([e.latlng, markerB.getLatLng()])
});
markerB.on('drag', (e) => {
  geodesic.setLatLngs([markerA.getLatLng(), e.latlng])
});
</script>
</body>
</html>

j'obtiens :
• avec options par défaut soit : wrap = true :

Nom : wrap-default-true.png
Affichages : 196
Taille : 10,0 Ko

• avec options par défaut soit : wrap =false :

Nom : wrap-false.png
Affichages : 185
Taille : 10,5 Ko

par contre à noter qu'il faut ajouter l'option avant l'intégration des données JSON.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
geodesic.options.wrap=false;
geodesic.fromGeoJson(geojson);

... contrairement à ce que j'ai écris précédemment.

**Pierre95** · 19/12/2022, 14h41

Merci de votre réponse.

Malheureusement, en suivant votre conseil et avec le code ci dessous ça ne fonctionne toujours pas.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
 
	<title>CPS-2023</title>
 
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
 
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>	
	<script src="fichiergeojson" type="text/javascript"></script>
	<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
 
	<style>
                html, body {
                        height: 100%;
                        margin: 0;
                }
                .leaflet-container {
                        height: 400px;
                        width: 600px;
                        max-width: 100%;
                        max-height: 100%;
                }               
        </style>	
</head>
<body>
 
<div id="map" style="width: 1920px; height: 1080px;"></div>
<script>
 
        var map = L.map('map').setView([Lat, Lon], 4);
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">Concorde Performance System 2023'
         }).addTo(map);
                                        
        //map.fitBounds([
    //[MaxLat, MaxLon],
    //[MinLat, MinLon]]);
        
        L.control.scale().addTo(map);
        
        
        const geodesic = new L.Geodesic().addTo(map);   /* Affiche les ligne géodésiques*/
        geodesic.options.wrap = false;
        geodesic.fromGeoJson(waypoints);
        
        
        
        function pointFilter(feature) {
        if (feature.geometry.type === "Point") return true
    }
        
        var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#000",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 1
        };
        
        var LineOptions = {
        opacity: 0,
        fillOpacity:0};
 
        L.geoJSON(waypoints, {
                filter : function (feature){ return feature.geometry.type==="Point"},
                pointToLayer: function (feature, latlng) {
                        if (feature.geometry.type === "Point") {
                                return new L.circleMarker(latlng, geojsonMarkerOptions);
                                                                                                        }},
                        onEachFeature:onEachFeature}).addTo(map);
                
        function onEachFeature(feature, layer){
                if(feature.properties && feature.properties.name){
                        layer.bindPopup("<b>" + feature.properties.name + "</b>" + "<BR>" +
                        feature.properties.latitude +"<BR>" +
                        feature.properties.longitude);}}
        
        //var DBPPLat = 'DepLat';
        //var DBPPLon = 'DepLon';
        //var ABPPLat = 'DesLat';
        //var ABPPLon = 'DesLon';
        
                
        //var DBPP = L.marker([Dlat, Dlon]).addTo(map) //
                        //.bindPopup('<b>Departure Bang Protected Point.</b><br>' + DBPPLat + '<br>' + DBPPLon);
    
        //var ABPP = L.marker([Alat, Alon]).addTo(map) //= (Alat != 0) && (Alon != 0)
                        //.bindPopup('<b>Arrival Bang Protected Point.</b><br>' + ABPPLat + '<br>' + ABPPLon);            
</script>
 
</body>
</html>

Nom : Capture1.JPG
Affichages : 183
Taille : 47,9 Ko

Je ne vois pas où se situe mon erreur...
A tout hasard, je vous joins le fichier geoJson utilisé avec les données utilisées.

Merci de votre aide.
Pierre

**Pierre95** · 20/12/2022, 10h02

Bonjour,
Je pense que le soucis est dû au fait que mon tracé est constitué de plusieurs tronçons de ligne et non d'une seule comme dans votre exemple.
Je vais creuser en ce sens et reviendrai vers vous avec quelques progrès je l'espère...

Cordialement
Pierre

**NoSmoking** · 20/12/2022, 12h20

Je pense que le soucis est dô ...

mais pas que !

Si l'on considère l'exemple : Drawing over the antimeridian, on s'aperçoit qu'il y a « aménagement » des valeurs de longitude, exemple du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const Tokyo = new L.LatLng(35.47, 139.15 + 360);    // these points are in another map section
const Sydney = new L.LatLng(-33.91, 151.08 + 10 * 360); // but will get shifted accordingly

Partant de ce constat tu n'arriveras à un résultat qu'en aménageant tes données.

Sur base de ton fichier JSON j'ai réussis à obtenir le bon résultat en mettant en place cette fameuse « bidouille »

Je te livre le code complet du test, sur base tu tien en ne gardant que ce qui m’intéressait.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
 * préparation des données pour prise en compte
 * - on incrémente de 360 les valeurs INF à 0 pour la méthode geodesic.fromGeoJson,
 *    avec centrage carte sur Lng = 180
 * - on décrémente de 360 les valeurs SUP à 0 pour les deux méthodes,
 *    avec centrage carte sur Lng = -180
 * nota : cela à quand même des limites notamment avec des points en Europe par exemple
 **/
const newLatLng = [];
const obj = waypoints.features;     // pointe sur les features chargées
for (o in obj) {
  const type = obj[o].geometry.type;
  let coords = obj[o].geometry.coordinates;
  // nota : [Leaflet.Geodesic] fromGeoJson() - Type "Point" not supported.
  // mais il faut ajuster quelque soit la méthode utilisée
  if ("Point" === type) {
    // on réajuste
    if (coords[0] > 0) {
      coords[0] -= 360;
    }
  }
  if ("LineString" === type) {
    coords.forEach((c) => {
      // on inverse lng et lat et on store
      newLatLng.push(new L.LatLng(c[1], c[0]));
      // et/ou on réajuste
      if (c[0] > 0) {
        c[0] -= 360;
      }    
    })
  }
}
const map = L.map('map').setView([60, -180], 3);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">Concorde Performance System 2023'
}).addTo(map);
 
L.control.scale().addTo(map);
 
if (0) {
  // pour test avec waypoints modifié
  const geodesic = new L.Geodesic().addTo(map);
  geodesic.options.wrap = false;
  geodesic.fromGeoJson(waypoints);
  map.fitBounds(geodesic._bounds);
}
else {
  // pour test avec newLatLng crée
  const geodesic = new L.Geodesic([newLatLng], {
    wrap: false
  }).addTo(map);
  map.fitBounds(geodesic._bounds);
}
 
const geojsonMarkerOptions = {
  radius: 8,
  fillColor: "#000",
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 1
};
 
function onEachFeature(feature, layer) {
  if (feature.properties && feature.properties.name) {
    layer.bindPopup("<b>" + feature.properties.name + "</b>" + "<BR>" +
      feature.properties.latitude + "<BR>" +
      feature.properties.longitude);
  }
}
 
L.geoJSON(waypoints, {
  filter: function(feature) {
    return feature.geometry.type === "Point"
  },
  pointToLayer: function(feature, latlng) {
    if (feature.geometry.type === "Point") {
      return new L.circleMarker(latlng, geojsonMarkerOptions);
    }
  },
  onEachFeature: onEachFeature
}).addTo(map);

La « bidouille » des données ne permet pas de couvrir tous les cas, points en Europe vers l'Asie en passant par l'Amérique par exemple. Il faudrait approfondir la chose concernant les décalages voire peut-être les traiter différemment dans ton L.geoJSON(waypoints...).

**Pierre95** · 21/12/2022, 10h16

Bonjour,

Merci de vos recherches.

Je vois que nous arrivons à un conclusion très similaire.

J'ai fait des tests avec un fichier geoJSON modifié manuellement et tout fonctionne.
Je travaille actuellement pour le modifier par programme en conditionnant les modifications au sens du vol et à son départ/arrivée.

Merci encore pour votre collaboration.

Cordialement
Pierre

Insérer l'options wrap: false Geodesic [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager