Рендеринг Icon на пользовательских плитах для пола с использованием OSM & Leaflet - PullRequest
Новая
       50

Рендеринг Icon на пользовательских плитах для пола с использованием OSM & Leaflet

0 голосов
/ 24 февраля 2019

Мне нужно преобразовать некоторые функции карт Google в Leaflet и OSM.У меня есть приложение для отслеживания посетителей внутри помещений, которое использует карты Google с пользовательскими плитками (изображение плана этажа в помещении).Он наносит маркеры на местоположения посетителей (в помещении), конвертируя координаты XY в Lat Lng.Это делается через 

function findLatLangFromImagePixel(imgPixel) {
    var scalingRatio = ImageWidth / 256;
    var pixel = { x: ((imgPixel.X) / scalingRatio), y: ((imgPixel.Y) / scalingRatio) };

    var point = new google.maps.Point(pixel.x + 0.5, pixel.y + 0.5);
    return map.getProjection().fromPointToLatLng(point);
}

enter image description here

В картах Leaflet я пытаюсь использовать следующий код для достижения тех же результатов (используя то же изображение / плитки): 

var x = ImageXYLocation.X;
            var y = ImageXYLocation.Y;
            var scalingRatio = ImageWidth / 256;
            var pixel = { x: ((x) / scalingRatio), y: ((y) / scalingRatio) };
var pointXY = L.point(pixel.x + 0.5, pixel.y +0.5);

            latlng = map.layerPointToLatLng(pointXY);
latlng.lng += 180;

Но я получаю разные результаты.Также я заметил, что при изменении разрешения моего экрана маркер меняет свое местоположение на карте помещений.Кажется, что положение маркера зависит от моего разрешения экрана или уровня масштабирования.enter image description here

И второй уровень масштабирования enter image description here

Обновление: Ниже приведен код инициализации карты: 

 if (map != null) {
            map.remove();
        }
        $("#map_canvas").html("");

        map = L.map('map_canvas', {
            minZoom: 1,
            maxZoom: 4,
            center: [0, 0],
            zoom: 1,
            crs: L.CRS.Simple,
        });
        var w = 6095,
            h = 3410;
        var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
        var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
        var bounds = new L.LatLngBounds(southWest, northEast);
        L.tileLayer('./tiles/{z}/{x}/{y}.png', {
            maxZoom: 16,
            minZoom: 0,
            continuousWorld: false,
            bounds: bounds,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        map.setZoom(5);
        map.setMaxBounds(bounds);

        map.zoomControl.setPosition('bottomright');

Обновление 2:

enter image description here

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

Спасибо за ваше руководство.Я был в состоянии найти решение.Я использовал следующий код, чтобы получить правильный LatLng 

var x = ImageXYLocation.X;
var y = ImageXYLocation.Y;
var scalingRatio = ImageWidth / 256;
var pixel = { x: ((x / scalingRatio) * Math.pow(2, map.getZoom())), y: ((y / scalingRatio) * Math.pow(2, map.getZoom())) };

var pointXY = L.point(pixel.x + 0.5, pixel.y +0.5);

latlng = map.unproject(L.point(pixel.x, pixel.y));
0 голосов
/ 24 февраля 2019

Кажется, что положение маркера зависит от моего разрешения экрана или уровня масштабирования.

Действительно.Вы используете layerPointToLatLng(), что в соответствии с документацией (выделение мое) ...

Учитывая координату пикселя относительно исходного пикселя, возвращает соответствующую географическую координату (для текущего уровня масштабирования ).

Листовка имеет любопытный способ скрыть сложности CRSs и проекций.Не видя больше кода, который вы используете для определения CRS карты, или границ вашего внутреннего изображения карты, невозможно дать какой-либо совет, кроме как «обратить внимание на то, что означают ваши координаты».

...