Discussion :

[labarre2002]

BOnsoir

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





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

[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 ...

[Doksuri]

@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 javascript :

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
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)

[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+

[SpaceFrog]

Ha en effet si y'a du zoom et du crop ...

[NoSmoking]

Bonjour,

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.

[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

[Doksuri]

@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)