Sun marker position render outside main view at an

问题:

i have a Sun maker with a 30min update thanks to Leaflet.Realtime, but here the Sun render outside the main view, (you have to scroll right to see the Sun).

i did try worldCopyJump: true, and things like:

var lat = data.solar_lat;
var lng = (data.solar_lon - 360);

but i am stuck on this silly thing, full example with the leaflet playground bellow:

https://playground-leaflet.rhcloud.com/haco/edit?html,js,output

any help to make the Sun shine on earth "main view" ?

回答1:

I guess it all depends on what you call "main view".

The data source you are using correctly reports the vertical projection of the Sun on Earth as coordinates within [-90; 90] degrees latitude and [-180; 180] degrees longitude, as most standards expect.

It is currently at:

"solar_lat":-22.41390593196, "solar_lon":106.2319043175

(i.e. somewhere off West Australia)

This "main view" is centered around the [0, 0] position (somewhere off West / Central Africa), in particular around the Greenwich meridian (somewhere close to London), i.e. with Europe in the center of the "main" map.

Updated playground showing only that "main" view: https://playground-leaflet.rhcloud.com/hefu/1/edit?html,js,output

If you have grown up in the US, you may be more familiar with Americas being shown in the center of the map, with Australia on its left hand side and Europe on the right.

Source: http://www.freeworldmaps.net/world/america-centric/

If you want to match that view (Americas in the center), you could simply wrap your longitude whenever the original data is more East than the Greenwich meridian for example.

function wrapAroundAmericas(latlng) {
  var lng = latlng.lng;

  return L.latLng(
    latlng.lat,
    lng > 0 ? lng - 360 : lng
  );
}

Demo: https://playground-leaflet.rhcloud.com/faru/1/edit?html,js,output