YMAPs JS API v3 очередность слоев на карте

В третьей версии АПИ при стандартном добавлении маркеров с балунами, открывающимися по клику, не могу установить очередность слоев. Нужно поднять слой popup над слоем маркеров.

Пробовала заменить стандартный new YMapDefaultFeaturesLayer({}) на добавление слоя через YMapLayer согласно документации, но получаю ошибку this.map.addChild( new YMapLayer({ source: 'featureSource', type: 'features', zIndex: 2010, }) ); Код самого вызова карты

export async function mainMap({mapClass}) {
  const mapContainer = document.querySelector(mapClass);
  if(!mapContainer) return; 

  await ymaps3.ready;
  const {YMapComplexEntity, YMap, YMapDefaultSchemeLayer, YMapLayer, YMapDefaultFeaturesLayer, YMapMarker} = ymaps3;
  const ZOOM_RANGE = {min: 2, max: 20};


  const getCoordsMinMax = (arr, position) => arr
    .map((item) => Number(item[position]))
    .sort((a, b) => a - b);

  class NewMap {
    constructor(mapContainer) {
      this.mapItems = document.querySelectorAll('[data-coords]');
      this.bounds = [];
      this.center = []; 
      this.map = null;
      this.container = mapContainer;
      
      this.init();
    }

    init() {
      this.bounds = this.getBounds();
      this.center =  this.getCenter();
      this.map = new YMapsHandler(this.bounds, this.center, this.mapItems, this.container);
    }

    getBounds() {
      const square = [...this.mapItems]
        .map((item) => item.dataset.coords.split(','));
      const langs = getCoordsMinMax(square, 0);
      const lats = getCoordsMinMax(square, 1);
      return  [[langs[1], lats[1]], [langs[langs.length - 1], lats[lats.length - 1]]];
    }

    getCenter() {
      return JSON.parse(JSON.stringify(this.bounds)).reduce((curr, acc) => {
        if (!curr) {
          curr = acc;
        } else {
          curr[0] = Number(((curr[0] + acc[0]) / 2).toFixed(6));
          curr[1] = Number(((curr[1] + acc[1]) / 2).toFixed(6));
        }
        return curr;
      });
    }
  }

  class YMapsHandler {
    constructor(mapBounds, center, markers, container) {
      this.mapBounds = mapBounds;
      this.map = null;
      this.center = center;
      this.container = container;
      this.markers = markers;
      this.YMapMarker = null;
      this.activePoint = null;
      this.changeCenterHandler = this.changeCenterHandler.bind(this);
      this.activatePopup = this.activatePopup.bind(this);
      this.init();
    }

    init() {
      this.container = this.container;
      if (!this.container) throw new Error('Укажите валидный контейнер для карты')
      this.createMap();
    }

    changeCenterHandler(center) {
      this.map.update({location: {
        center: center, 
        duration: 4000,
      }});
    }

    activatePopup({coords, popup}) {
      console.log(popup)
      this.changeCenterHandler(coords);
      this.activatePopup = popup
    }

    async createMap() {
      this.YMapMarker = YMapMarker;
      this.map = await new YMap (
        this.container,
        {location: {
            bounds: this.mapBounds, 
          },
          zoomRange: ZOOM_RANGE
        },
        [
          new YMapDefaultSchemeLayer({}),
          new YMapDefaultFeaturesLayer({}),
        ]
      );

      await this.setMarkers()
    }

    async setMarkers() {
      this.markers.forEach((marker) => {
        const coords = marker.dataset.coords
          .split(',')
          .map((item) => Number(item));
        this.map.addChild(new CustomMarkerWithPopup(
          {
            coordinates: coords,
            popupContent: marker.innerHTML,
            type: marker.dataset.type,
            id: marker.dataset.id,
            callback: this.activatePopup,
          }))
      });
    }

    destroyMap() {
      this.map.destroy();
      this.map = null;
    }
  };

  class CustomMarkerWithPopup extends YMapComplexEntity {
    constructor(props) {
      super(props);
      this._popupOpen = false;
      this.activePopup = null;
    }

    _onAttach() {
      this._createPopup();
      this._createMarker();
      this._correctPopup();
    }

    _onDetach() {
      this._marker = null;
    }

    _onUpdate(props) {
      if (props.coordinates) {
        this._marker.update({
          coordinates: props.coordinates, 
          popup: this._marker,
        })
      }
    }

    _createPopup() {
      const popupElement = document.createElement('div');
      popupElement.className = 'map-popup';

      const textElement = document.createElement('div');
      textElement.className = 'popup__text';
      textElement.innerHTML = this._props.popupContent;

      const closeButton = document.createElement('button');
      closeButton.classList = 'popup__close btn';
      closeButton.onclick = () => {
        this._popupOpen = false;
        this._correctPopup();
      }

      popupElement.append(textElement, closeButton);
      this._popup  = popupElement;
    }

    _createMarker() {
      const container = document.createElement('div');
      const marker = document.createElement('img');
      marker.className = 'map-marker';
      marker.src = `../img/pin-${this._props.type}.png`;
      marker.dataset.id = this._props.id;
      marker.onclick = () => {
        this._popupOpen = true;
        this._correctPopup();
        this.activePopup = marker;
        this._props.callback({coords: this._props.coordinates, popup: marker});
      }

      container.append(marker, this._popup);

      this._marker = new YMapMarker({
        coordinates: this._props.coordinates}, 
        container);
      this.addChild(this._marker); 
    }

    _correctPopup() {
      if (this._popupOpen) {
        this._popup.style.display = 'flex';
      } else {
        this._popup.style.display = 'none';
      }
    }
  }

  new NewMap(mapContainer);
};

подскажите, как поменять очередность слоев при таком выборе


Ответы (0 шт):