Есть ли способ применить класс CSS к функции Openlayers 5.3? - PullRequest
Новая
       11

Есть ли способ применить класс CSS к функции Openlayers 5.3?

0 голосов
/ 02 июля 2019

У нас есть более 2000 точек карты для рисования на карте открытых слоев (5.3.2). Производительность - большая проблема, поскольку мы: * создание векторного слоя, * добавление объекта на точку (для расположения всплывающей подсказки), * добавление наложения на точку (для значка материала с применением класса css "blink_me" в зависимости от флага на точку), * добавление одного наложения при наведении курсора мыши для отображения всплывающей подсказки, динамически заполненной любыми данными, относящимися к функции, обнаруженной в этом месте наведения.

Чтобы уменьшить проблемы с производительностью, я уже переместил стиль объекта на векторный слой, но я также хочу удалить наложения для каждой точки (не всплывающей подсказки) и переместить значок карты на объект. Единственная проблема заключается в том, что, похоже, нет способа применить класс css к объекту объекта, даже если он может содержать HTMLImageElement.

Похоже, вы когда-то могли задавать className для imageDiv обратно в openlayers 2 ( OpenLayers: добавление (css-) класса к маркеру? ), чтобы что-то подобное было бы идеально. 

      // map pin that used to be set on overlay
      const divelement = document.createElement('i');
      divelement.classList.add('material-icons', 'text-outline');
      if (element[4]) { divelement.classList.add('blink_me'); }
      divelement.innerHTML = 'place';
      divelement.style.fontSize = '32px';
      divelement.style.width = '32px';
      divelement.style.height = '32px';
      divelement.style.color = element[3];

      // feature containing location, styles etc
      const pointFeature = new Feature({
        name: 'myFeature',
        geometry: point,
        index: element[2]
      });

// Feature style without that "blink_me" class added and using an image, rather than a material icon font letter.
// I'd look at moving the feature style back to the actual feature away from the vector layer like so if I can set a class on each feature style according to a flag.
      pointFeature.setStyle(
        new Style({
          image: new Icon(/** @type {module:ol/style/Icon~Options} */{
            anchor: [0.5, 0.96],
            color: element[3],
            crossOrigin: 'anonymous',
            src: 'assets/outline_place_black_18dp.png'
          })
        })
      );
      this.multiPointSource.addFeature(pointFeature);
...