Estoy tratando de crear un script de usuario para ampliar la funcionalidad de la aplicación Leaflet.js para un juego en línea: https://dayz.ginfo.gg/chernarusplus/#c=-12;-156;1 Tengo problemas para crear una función para convertir coordenadas en los valores de latitud/longitud que usa leaflet.js .
El mapa en sí tiene 15 360 x 15 360 metros (desde la perspectiva de los juegos). He determinado experimentalmente el ancho/alto del mapa usando los valores de lat/long de leaflet.js .
El siguiente código crea un círculo en las 4 esquinas y el centro.
// Top right corner: [83.81, 167.2] // Bottom left corner: [-88.81, -180] // Lat/long "height/width" of the map var b = {x: 86.31, y: 173.6}; // Centre of the map (lat/long) var h = {x: -2.5, y: -6.4}; L.circleMarker([hx + bx, hy + by], {radius: 10}).addTo(iZurvive._map); L.circleMarker([hx + bx, hy - by], {radius: 10}).addTo(iZurvive._map); L.circleMarker([hx - bx, hy + by], {radius: 10}).addTo(iZurvive._map); L.circleMarker([hx - bx, hy - by], {radius: 10}).addTo(iZurvive._map); L.circleMarker([hx, hy], {radius: 10}).addTo(iZurvive._map); Cuando intenté crear una función que tradujese la posición de un juego (coordenadas x/y en metros) al valor de latitud/longitud utilizado por leaflet.js , no obtuve la ubicación correcta. Probé esto aún más tratando de hacer un círculo a mitad de camino entre el centro y la esquina inferior izquierda, pero eso también estaba compensado; código a continuación
// Should be halfway between centre and bottom left corner, but it isn't L.circleMarker([hx - (bx / 2), hy - (by / 2)], {radius: 10}).addTo(iZurvive._map);Esta imagen muestra dónde debe estar el círculo medio (marcado en rojo):
Mi función para convertir entre las coordenadas del juego y leaflet.js lat/long es la siguiente, aunque probarla produce resultados que se compensan considerablemente:
const MAP_SIZE = 15360; function circle(_x, _y) { var scale = {x: MAP_SIZE / (bx * 2), y: MAP_SIZE / (by * 2)}; var coords = {x: _x / scale.y, y: _y / scale.y}; L.circleMarker([hx - bx + coords.x, hy - by + coords.y], {radius: 10}).addTo(iZurvive._map); } // Should be bottom left of the map but is moreso left centre circle(4420, 2840);Se corrigió usando la función L.LocUtil.pointToCoords y los valores de escala almacenados en variables globales para la aplicación leaflet.js .
El siguiente código coloca correctamente un marcador en las coordenadas x, y proporcionadas (por ejemplo, 1000, 1000):
var t = L.LocUtil.pointToCoords({x: 1000, y: 1000}, iZurvive._locSearch.options.scalingParams) L.circleMarker(t, {radius: 10}).addTo(iZurvive._map);