Leaflet not displaying the second layer from a PBF file

Viewed 65

I am trying to display the second layer from a PBF file. But it is only displayed if there is no first layer. They are not displayed together. Here is my code:

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);
    });

The layer from the PBF file is not displayed. If I remove the layer "yandexLayer" - it is displayed.

var map = L.map('map', {
//    layers: [yandexLayer],
    inertia: false,
    center: center,
    zoom: 16,
    zoomAnimation: false
});

One layer

There is a feeling that one layer overlaps the other. What am I doing wrong?

0 Answers
Related