Cartographier la longitude et la latitude d une ville

Version imprimable

10/10/2023, 20h09
labarre2002

1 pièce(s) jointe(s)

Cartographier la longitude et la latitude d une ville

BOnsoir

je realise une page web qui comporte une image puis une zone de selection

Pièce jointe 645102

quand je clique dans la zone de droite sur une ville

sur la carte il doit s 'afficher un cercle sur une ville précise sur l' image de gauche.
le soucis est que c ' est une image en jpg pas un service de géolocalisation ou une map google.
la consigne est de le réaliser en js pure?

Pourrais-je avoir des pistes SVP ?

Merci
11/10/2023, 08h39
SpaceFrog

Une piste:
le coin en haut à gauche de ton image a pour coordonnées 0,0
si tu connais ses coordonnées géographiques absolues en lat. et long. et le différentiel d'un pixel il ne te reste plus qu'a faire des additions ...

@SpaceFrog, c'est plus complique que ca, ca depend de la projection de la carte.
de plus, il faut connaitre les bounds (les coins) de l'image qu'il affiche.

Code:

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
const initialResolution = 156543.03392804062;
const originalShift = 2 * Math.PI * 6378137 / 2;
// converts Lat,Lon(Pixels) to Lat,Lon(Meters)
function convertPixelToMeter(pixel, zoom) { // pixel est sous la forme {lat:number,lon:number} et zoom:number
    const resolution = initialResolution / Math.pow(2, zoom);
    return {
        lon: pixel.lon * resolution - originalShift,
        lat: pixel.lat * resolution - originalShift
    };
}
 
// converts Lat,Lon(Meters) to Lat,Lon(Degree)
function convertMeterToDeg(meter) { // meter est sous la forme {lat:number,lon:number}
    let lon = (meter.lon / originalShift) * 180;
    let lat = (meter.lat / originalShift) * 180;
    lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2);
    return {
        lon: lon,
        lat: lat
    };
}
 
// si besoin, dans l'autre sens :
 
// converts Lat,Lon(Deg) to Lat,Lon(Meters)
function convertLatLonToMeters(latlon) { // latlon est sous la forme {lat:number,lon:number}
    let lon = latlon.lon * originalShift / 180;
    let lat = Math.log(Math.tan((90 + latlon.lat) * Math.PI / 360)) / (Math.PI / 180);
    lat = lat * originalShift / 180;
    return {lon: lon, lat: lat};
}
 
// converts Lat,Lon(Meters) to Lat,Lon(Pixels)
function convertMetersToPixel(meters) { // meters est sous la forme {lat:number,lon:number}
    const resolution = initialResolution / 2 ** map.getZoom();//zoom actuel de la carte
    return {
        lon:(meters.lon + originalShift) / resolution,
        lat:(meters.lat + originalShift) / resolution
    };
}

tu pourras trouver d'autres explications sur ce site https://www.maptiler.com/google-maps...nds-projection

=> en bas de la page, il y a plein de function (c'est en python, mais c'est facilement convertible en JS)

11/10/2023, 11h13
sylvain257

Bonjour,

J'ai plusieurs questions :

Pourquoi ne pas travailler avec mapbox ou leaflet ?
Comment récupères-tu ta donnée géographique ? A ce moment là, tu formes un geojson que tu appelles via une requête AJAX ou un addSource/addLayer (mapbox/maplibre), ta donnée est remontée dans ta colonne de droite avec un simple click sur l'entité.

A+
11/10/2023, 13h58
SpaceFrog

Ha en effet si y'a du zoom et du crop ...
12/10/2023, 11h11
NoSmoking

Bonjour,

Citation:

Envoyé par labarre2002

le soucis est que c ' est une image en jpg pas un service de géolocalisation ou une map google.

donc ce n'est pas déconnant que de faire une simple règle de trois une fois les limites, lat/lng, de l'image connues.
26/10/2023, 21h22
labarre2002

Bonsoir et merci pour vos réponses

@doksuri

ton code est réalisé par toi ou trouvé sur un site ?
j essaie de le comprendre
30/10/2023, 03h11
Doksuri

Citation:

Envoyé par labarre2002

@doksuri

ton code est réalisé par toi ou trouvé sur un site ?
j essaie de le comprendre

realise par moi, "traduis" depuis le code du site maptiler.com (cite plus haut)
16/12/2023, 19h34
labarre2002

Bonsoir

@NoSmoking

quand tu parles de règle de trois
c est de cela:

si 100px=1degre

puis rajouter les latitudes !!!
16/12/2023, 23h08
eleydet

Bonsoir,

Si vous optez pour les tuiles d'OpenStreetMap, vous trouverez les formules de calcul sur le site :
http://eleydet.free.fr/SNT/TP/JS_OSM/index.html