Leaflet - Как сохранить оригинальную систему координат эффективной при использовании слоя листов? - PullRequest
Новая
       30

Leaflet - Как сохранить оригинальную систему координат эффективной при использовании слоя листов?

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

В моем приложении Leaflet я использовал для отображения фонового слоя с помощью ImageOverlay. Но поскольку изображение слишком большое и замедляет обработку листовок, я переключаюсь на метод листов. Я использовал gdal2tiles-leaflet для создания своих плиток. Работало нормально.

Но теперь моя декартова система координат, в которой проецируется мой фоновый слой (я использую Leaflet CRS Simple), более не эффективна.

Вот мои характеристики изображения:

  • ширина : 21002 px
  • высота : 14694 px
  • разрешение : 0,02 (1 метр = 50px)

Вот границы моего изображения при использовании ImageOverlay : enter image description here

Вот границы моего изображения при использовании TileLayer : enter image description here

И вот как это выглядит, когда я отображаю их вместе: enter image description here

Кто-нибудь знает, что происходит?

1 Ответ

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

По предложению @TomazicM я исследовал плагин leaflet-rastercoords , который дополняет gdal2tiles-leaflet .Основываясь на этом, я реализовал API, который позволяет преобразовывать координаты либо в растр , либо в декартово .

Для этого я сначала делаю leaflet-rastercoords код, доступный в единственном методе: 

export let loadLeafletRastercoordsPlugin = (L: any) => {
    // rastercoords.js source code
}

Затем я написал класс для обработки преобразования координат: 

import * as L from 'leaflet';
import { loadLeafletRastercoordsPlugin } from './leaflet-rastercoords';

export class RasterCoords {

    public rc: any;
    public map: L.Map;
    public rasterWidth: number;
    public rasterHeight: number;
    public resolution: number;

    constructor(map: L.Map, rasterWidth: number, rasterHeight: number, resolution: number) {
        loadLeafletRastercoordsPlugin(L);
        this.rc = new L['RasterCoords'](map, [rasterWidth, rasterHeight]);
        this.map = map;
        this.rasterWidth = rasterWidth;
        this.rasterHeight = rasterHeight;
        this.resolution = resolution;
    }

}

С одним методом для проецирования растровых координат висходная ортонормированная плоскость моего изображения, основанная на его ширине, высоте и разрешении, а также при расположении оси Y снизу вверх: 

public project(coordinates: L.LatLngTuple): L.LatLngTuple {
    coordinates = this.applyResolution(coordinates);
    const projectedCoordinates = this.rc.project(
        coordinates
    );

    return this.applyCartesianProjection([projectedCoordinates.y, projectedCoordinates.x] as L.LatLngTuple);
}

private applyResolution(coordinates: L.LatLngTuple): L.LatLngTuple {
    return coordinates.map((v: number) => v * this.resolution) as L.LatLngTuple;
}

private applyCartesianProjection(coordinates: L.LatLngTuple): L.LatLngTuple {
    return [(this.rasterHeight * this.resolution) - coordinates[0], coordinates[1]];
}

И одним методом для " unproject"декартовы координаты (т.е. точка-точка ретропроцесса, что делает метод проект ): 

public unproject(coordinates: L.LatLngTuple): L.LatLngTuple {
    coordinates = this.unapplyResolution(this.unapplyCartesianProjection(coordinates));

    return this.rc.unproject([coordinates[1], coordinates[0]]);
}

private unapplyResolution(coordinates: L.LatLngTuple): L.LatLngTuple {
    return coordinates.map((v: number) => v / this.resolution) as L.LatLngTuple;
}

private unapplyCartesianProjection(coordinates: L.LatLngTuple): L.LatLngTuple {
    return [Math.abs(coordinates[0] - (this.rasterHeight * this.resolution)), coordinates[1]];
}

Затем API помогает мне эффективно добавлять объекты в мою карту на основе их декартовой системы.координаты: 

const imageWidth = 21002;
const imageHeight = 14694;
const imageResolution = 0.02;
const map = L.map('map');
const rc = new RasterCoords(map, imageWidth, imageHeight, imageResolution);
map.setView(rc.unproject([imageWidth, imageHeight]), 2);
L.tileLayer('./image/{z}/{x}/{y}.png', {
    noWrap: true
}).addTo(map);
new L.CircleMarker(this.rc.unproject([293, 420])).addTo(map);
...