Как я могу использовать Leaflet с сервером mbtiles, указав ограничивающие рамки вместо уровня масштабирования и координаты плитки x, y в URL-адресе

Задний план

Я использую следующие клиентские и серверные технологии:

Картографический сервер как контейнер от https://github.com/consbio/mbtileserver/
Библиотека Leaflet's для Angular 7

Как описано здесь: https://leafletjs.com/reference-0.7.7.html#tilelayer элемент управления TileLayer использует шаблон URL: 'http: // {s} .somedomain.com / blabla / {z} / {x} / {y} .png'

Требование

Мой клиент попросил меня заменить указанный выше картографический сервер другим, развернутым в его сети.
Я хотел бы поддержать новый сервер, внося минимальные изменения в клиент (в частности, я хотел бы продолжить использование Leaflet элемент управления картой).

Что я пробовал

У меня есть пример клиента, который использует новый сервер. Пример написан на React и также использует элемент управления Leaflet map.

Однако я заметил, что URL-адрес, который он отправляет на сервер, не использует указанный выше шаблон. Скорее, он включает строку запроса и параметры типа BBox, которые, как я полагаю, относятся к ограничивающим рамкам.

К сожалению, у меня нет ни исходного кода клиента, ни полного URL-адреса в качестве примера.

Вопрос

Может кто-нибудь помочь мне понять:

Действительно ли consbio / mbtileserver поддерживает шаблон URL-адреса, который использует ограничивающие прямоугольники вместо z, x, y?
Предполагая, что библиотека Leaflet Angular может делать то же самое, что и библиотека Leaflet React в примере, какие изменения мне нужно внести в конфигурацию элемента управления картой для ее поддержки?

angular leaflet mbtiles

David Sackstein 01.01.2021 источник

Ответы (1)

arrow_upward
0
arrow_downward

Я не нашел 100% правильного ответа, но у меня есть несколько шагов, которые могут вам помочь. Но я понятия не имею, как может работать часть mbtileserver.

Если вы хотите получить границы плитки, вы можете использовать частный метод L.GridLayer._tileCoordsToBounds(coordsOfTile)

Теперь вам нужно изменить URL-адрес создания плитки, для этого создайте новый класс плитки и перезапишите функцию getTileUrl:

L.CustomTile = L.TileLayer.extend({
    getTileUrl: function (coords) {
      var bbox = this._tileCoordsToBounds(coords).toBBoxString();
      console.log(bbox);
      var url = L.TileLayer.prototype.getTileUrl.call(this, coords);
      return url + '&bbox='+ bbox;
    },
  });

Затем добавьте плитки на карту:

new L.CustomTile('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
  }).addTo(map);

Затем будут запрашиваться такие плитки, как:

https://a.tile.openstreetmap.org/6/31/23.png?bbox=-5.625,40.979898069620155,0,45.089035564831036

Вы можете просто удалить шаблоны, если они не нужны {s}, {z}, ...

Если вы не знаете, как должен выглядеть URL-адрес, будет действительно сложно реализовать собственный запрос ...

Также я не думаю, что вам нужно это использовать, но я знаю, что это WMS Layers, добавление строки bbox к URL-адресу: Leaflet-Src

И, пожалуйста, проверьте свою версию буклета, самая новая версия - 1.7.1, потому что вы связали документацию с 0.7.7.

Falke Design 01.01.2021