Leaflet кастомные координаты или сетка координат?

Question

UrbanSide @UrbanSide

Leaflet кастомные координаты или сетка координат?

Всем доброго времени суток,решил сделать небольшую админку под свой проект и не могу понять,как совместить координаты.
Есть карта оригинал: https://dayz.xam.nu/deerisle#location=6362.00;1480...
У нее например на координатах 6362.00;14807.00 определенная точка.
И есть мой вариант карты с этими же тайтлами: https://plnkr.co/edit/YPYOp2VnkOeu7YGR
Но у меня при клике на карте на том же самом месте,координаты: 6361.00;15561.00 что явно не совпадает с оригинальными.
Помогите тупому решить эту задачку.Второй день бьюсь пришел лишь к текущему варианту но он все равно не работает как надо...

Вопрос задан более года назад
156 просмотров

1 комментарий

Подписаться 1 Средний 1 комментарий

UrbanSide @UrbanSide Автор вопроса

map.on('click', function(e) {
		var maxCoord = 16384;

		// Преобразуем географические координаты клика в пиксели на глобальной карте
		var projectedPoint = map.project(e.latlng, 6); // Используем зум 6 для эталонного преобразования,на нем координаты совпадали отлично
		var globalPixelX = projectedPoint.x;
		var globalPixelY = projectedPoint.y;

		// Преобразуем глобальные пиксели в координаты вашей системы
		var customX = globalPixelX;
		var customY = globalPixelY;

		// Переводим Y-координаты от верхнего левого угла к нижнему левому углу
		var customYFromBottomLeft = maxCoord - customY;

		// Выводим координаты
		console.log('Ваши координаты от нижнего левого угла:', customX.toFixed(2), customYFromBottomLeft.toFixed(2));
	});

Смог с помощью GPT к такому придти,но не уверен в данном варианте.Может кто подскажет еще варианты какие?

UPD на данном скрине видны координаты "карты" и места где находится курсор.

По итогу у меня вот такой разброс получился.Но уже ближе к тому что я хочу.
"Прицел" там где маркер должен был быть.
Конвертация обратно таким кодом:

// Функция для установки маркера по кастомным координатам
function setMarker(maxCoord,customX, customY) {
    // Переводим Y-координаты от нижнего левого угла к верхнему левому углу
    var customYFromTopLeft = maxCoord - customY;

    // Преобразуем кастомные координаты в пиксели на глобальной карте
    var projectedPoint = L.point(customX, customYFromTopLeft);
    
    // Преобразуем пиксели на глобальной карте в географические координаты
    var latlng = map.unproject(projectedPoint, 6); // Используем зум 6 для обратного преобразования
    
    // Создаем маркер с указанными координатами
    var marker = L.marker(latlng).addTo(map);

    // Привязываем всплывающее окно (попап) к маркеру с указанным содержимым
    marker.bindPopup(popupContent);
}

// Пример использования функции для установки маркера по кастомным координатам
setMarker(16384, 6416.56, 14786.13, "<b>Местоположение</b><br>Широта: 6416.56<br>Долгота: 14786.13");

Разлет конечно не критичный,но хотелось бы более точно.
Ну и полигон или круг нарисовать соответственно тоже не реально таких размеров как надо...

P.S обновил код к такому,но маркер сбегает на 15-20 игровых метров вверх влево

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet Map Example</title>
  <!-- Подключаем стили Leaflet.js -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
	html,
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
	
	#map {
		background-color: #242f3d;
		width: 100%;
		height: 100%;
		cursor: url('http://localhost/cursors/scope6.png') 16 16, auto;
	}
	
	#info {
		display: none;
		/* Скрываем блок по умолчанию */
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translate(-50%);
		width: 50%;
		padding: 10px;
		border: none;
		border-radius: 3px;
		font-size: 12px;
		text-align: center;
		color: #222;
		background: #fff;
		z-index: 999;
	}
  </style>
</head>

<!-- Создаем контейнер для карты -->
	<div id="map"></div> <pre id="info"></pre>
<!-- Подключаем скрипты Leaflet.js -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<script>

    var width = 16348;
    var height = 16348;

    var minZoom = 2;
    var maxZoom = 6;
    var img = [
            width,  // original width of image
            height   // original height of image
    ];
    var zoom = zoomLevel();
    function zoomLevel() {
        return Math.ceil(
                Math.log(
                        Math.max(width, height) /
                        256
                    ) / Math.log(2)
                );
    };

    // create the map
    var map = L.map('map', {
        minZoom: minZoom,
        maxZoom: maxZoom,
        crs: L.CRS.Simple,
    });

    function project(coords) {
        var point = map.project(coords, zoom);
		console.log(point);
        return [point.x, (height - point.y)];
    }

    function unproject(coords) {
        var invertedY = height - coords[1];
        var point = L.point(coords[0], invertedY);
        var latLng = map.unproject(point, zoom);
        return [latLng.lat, latLng.lng];
    }

    //sets the max bounds on map
    var maxSouthWest = unproject([0, height]);
    var maxNorthEast = unproject([width, 0]);
    map.setMaxBounds(new L.LatLngBounds(maxSouthWest, maxNorthEast));
    
    map.setView(unproject([img[0] / 2, img[1] / 2]), maxZoom);

		var southWest = unproject([0, 0]);
    var northEast = unproject([width, height]);

    L.tileLayer('https://static.xam.nu/dayz/maps/deerisle/5.3/satellite/{z}/{x}/{y}.webp', {
        noWrap: true,
        bounds:  new L.LatLngBounds(southWest, northEast),
    }).addTo(map);
	function setPrecision(lat, lng, prec = 7) {
	  return {
		lat: Number(lat.toPrecision(prec)),
		lng: Number(lng.toPrecision(prec))
	  }
	}
	map.on('click', function(e) {
		var info = document.getElementById('info');
		info.innerHTML = `Координаты по карте:<br />${JSON.stringify(e.latlng)}<br />Игровые координаты:<br />${project(e.latlng)}`;
		info.style.display = 'block'; // Показываем блок при клике
	})
</script>
</html>

Подозреваю что project и unproject сжирает знаки после запятой...и дело в этом

Написано более года назад

Помогут разобраться в теме Все курсы