Использование плиток Mapzen с Leaflet

Question

Мое чтение документации Leaflet и Mapzen предполагает, что для использования собственного провайдера листов с Leaflet необходимо сделать всего две вещи:

1. Укажите поставщика плитки в L.tilelayer(urlTemplateToTileProvider)
2. Установите этого провайдера на MapZen

var urlTemplateToTileProvider =
  'http://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=apiKey'

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

http://tile.mapzen.com/mapzen/vector/v1/all/14/8471/5583.mvt?api_key=apiKey

действительно загрузил некоторые - непонятные для меня - данные.

Я также попытался использовать два других формата, упомянутых в документации Mapzen (.json а также .geojson) но с точно таким же результатом. Учитывая, что последние два формата возвращают данные, читаемые человеком, я проверил их для моей тестовой плитки в моем браузере, и данные действительно для области, которую я хочу использовать.

Как ни странно, документы и учебники Leaflet запрашивают слой листов PNG (http://{s}.tile.osm.org/{z}/{x}/{y}.png), а не необработанные данные.

Очевидно, я делаю что-то не так здесь. Я был бы очень признателен всем, кто мог бы помочь.

Answer 1

Слой листов предназначен для растровых плиток (т.е. простых изображений, например, в формате PNG).

Mapzen поставляет векторные плитки. Чтобы использовать их с Leaflet, вы можете использовать плагин, например, Leaflet.VectorGrid ( лицензия)

Отображение векторных данных с сеткой (нарезанные векторные плитки GeoJSON или protobuf) в Leaflet 1.0.0

Смотрите демо, которое включает в себя плитки из Mapzen

var mapzenTilesUrl = "https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key={apikey}";
var mapzenVectorTileOptions = {
  rendererFactory: L.canvas.tile,
  attribution: '<a href="https://mapzen.com/">&copy; MapZen</a>, <a href="http://www.openstreetmap.org/copyright">&copy; OpenStreetMap</a> contributors',
  vectorTileLayerStyles: vectorTileStyling,
  apikey: 'KEY',
};
var mapzenTilesPbfLayer = L.vectorGrid.protobuf(mapzenTilesUrl, mapzenVectorTileOptions);

Поскольку у вас есть необработанные данные в векторных листах, вам нужно предоставить спецификацию стилей (vectorTileStyling)