Яндекс карты перекрывают слой PBF
Имеется слой yandex карт в leaflet. Я пытаюсь отобразить второй слой из файла PBF. Яндекс карта этот слой "перекрывает". Если я использую OSM - все отображается правильно. В чем проблема? Мой код:
const yandexLayer = L.yandex();
function traffic() {
// https://tech.yandex.ru/maps/jsbox/2.1/traffic_provider
var actualProvider = new ymaps.traffic.provider.Actual({}, {
infoLayerShown: true
});
actualProvider.setMap(this._yandex);
}
//var mapboxUrl = "https://pkk.rosreestr.ru/arcgis/rest/services/Hosted/vt_anno_light/VectorTileServer/tile/{z}/{y}/{x}.pbf";
var mapboxUrl = "https://pkk.rosreestr.ru/arcgis/rest/services/Hosted/caddivsion/VectorTileServer/tile/{z}/{y}/{x}.pbf";
//var mapboxUrl = "https://pkk.rosreestr.ru/arcgis/rest/services/Hosted/BASEMAP_OSM/VectorTileServer/tile/{z}/{y}/{x}.pbf";
var mapboxVectorTileOptions = {
vectorTileLayerStyles: {
"Кадастровые округа": {
stroke: !0,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые округа/label": {
stroke: !1,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые округа:1": {
stroke: !0,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые округа:1/label": {
stroke: !1,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые округа:2": {
stroke: !0,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые округа:2/label": {
stroke: !1,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые районы": {
stroke: !0,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые районы/label": {
stroke: !1,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые районы:1": {
stroke: !0,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые районы:1/label": {
stroke: !1,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые районы:2": {
stroke: !0,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые районы:2/label": {
stroke: !1,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые кварталы": {
stroke: !0,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кадастровые кварталы/label": {
stroke: !1,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Здания_area": {
stroke: !0,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Здания": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Кварталы_all": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Дороги": {
stroke: !1,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Дороги_1m": {
stroke: !1,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Жд станции": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Железные дороги": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Парки": {
stroke: !1,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Реки (полигоны)": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Озера (полигоны)_all": {
stroke: !1,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Озера (полигоны)_area": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Острова": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Растительность_1mln ": {
stroke: !1,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Гидрография линии:2": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Гидрография линии:1": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Здания_3d": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Населенные пункты (полигоны)": {
stroke: !0,
color: "#D20404",
opacity: 0.5,
weight: 1
},
"Кварталы_AREA_100": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
"Кварталы_AREA_500": {
stroke: !0,
color: "#D20404",
opacity: 0.50,
weight: 1
},
},
minNativeZoom: 4,
// rendererFactory: L.canvas.tile,
rendererFactory: L.svg.tile,
// interactive: true
};
var mapboxPbfLayer = L.vectorGrid.protobuf(mapboxUrl, mapboxVectorTileOptions);
var center = [67.6755, 33.936];
var map = L.map('map', {
layers: [yandexLayer],
inertia: false,
center: center,
zoom: 16,
zoomAnimation: false
});
map.attributionControl
.setPosition('bottomleft')
.setPrefix('');
function addkad() {
map.addLayer(mapboxPbfLayer);
}
onZoomend();
map.on('zoomend', onZoomend);
function onZoomend() {
const zoomlevel = map.getZoom();
if (zoomlevel) {
addkad();
}
}
var marker = L.marker(center, {
draggable: true
}).addTo(map);
map.locate({
setView: true,
maxZoom: 14
})
.on('locationfound', function(e) {
marker.setLatLng(e.latlng);
});