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 : 302
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 : 310
Taille : 47,9 Ko

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

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager