OpenLayers применяет старый стиль элементов - PullRequest
Новая
       10

OpenLayers применяет старый стиль элементов

0 голосов
/ 09 июля 2020

Я пытаюсь показать или скрыть элементы при щелчке.

У меня много точек с разными цветами, я пытаюсь изменить непрозрачность на 0/1.

Что мне удалось сделать устанавливает 2 разных стиля функций и использует setStyle при щелчке.

Я могу скрыть функцию, но когда я пытаюсь отобразить ее, она используется как функция OpenLayers по умолчанию. См. Примеры здесь:

enter image description here Picture of point when map is loaded

enter image description here Picture of point when I hide it

введите описание изображения здесь Изображение точки, когда я пытаюсь отобразить его (я хочу, чтобы он снова стал оранжевым, но его стиль по умолчанию)

Это фрагмент кода: 

selectedLayer
          .getSource()
          .forEachFeatureInExtent(extent, function (feature) {
            if (
              Object.values(Object.values(feature.get("info"))[0][2])[1] === t
            ) {
              if (e.target.className === "menu-selector") {
                feature.setStyle(style); // Apply OLD STYLE (style before hiding the feature)
              }

              if (e.target.className === "menu-selector2") {
                var style = feature.getStyle(); // Get current style (so I can reapply it later)
                feature.setStyle(
                  new ol.style.Style({
                    image: new ol.style.Circle({
                      radius: 0,
                      fill: new ol.style.Fill({
                        color: "rgba(0, 0, 0, 0)",
                      }),
                      stroke: new ol.style.Stroke({
                        color: [0, 0, 0, 0],
                        width: 0,
                      }),
                    }),
                  })
                ); // hide the feature
              }
            }
          });

Я нашел это также: 

feature.getStyle().getImage().setOpacity(0);

Но эта функция показывает / скрывает все точки с одинаковым стилем, а не только выбранный. Например, если я хочу скрыть 1 объект и его серый круг, он скроет все серые круги в экстенте.

1 Ответ

0 голосов
/ 09 июля 2020

Мне пришлось объявить переменную вне функции, сохранить старые стили в списке, затем l oop по списку и применить старые стили для каждой функции.

Надеюсь, код поможет кому-то другому. 

      var clone = [];
      var brojTocaka = 0;
      var i = 0;
      window.onclick = (e) => {
        if (
          e.target.className === "menu-selector2" ||
          e.target.className === "menu-selector"
        )
          $("#" + e.target.id).toggleClass("menu-selector menu-selector2");

        var t = e.target.innerText || e.target.textContent;

        selectedLayer
          .getSource()
          .forEachFeatureInExtent(extent, function (feature) {
            if (
              Object.values(Object.values(feature.get("info"))[0][2])[1] === t
            ) {
              if (e.target.className === "menu-selector2") {
                clone.push(feature.getStyle());
                console.log(clone[brojTocaka]);
                brojTocaka++;
                feature.setStyle(
                  new ol.style.Style({
                    image: new ol.style.Circle({
                      radius: 0,
                      fill: new ol.style.Fill({
                        color: "rgba(0, 0, 0, 0)",
                      }),
                      stroke: new ol.style.Stroke({
                        color: [0, 0, 0, 0],
                        width: 0,
                      }),
                    }),
                  })
                );
              }
              if (e.target.className === "menu-selector") {
                console.log(clone[i]);
                feature.setStyle(clone[i]);
                i++;
              }
            }
          });
      };
    });
...