Question

我们有2000多个地图点可以绘制openlayers（5.3.2）地图。性能是一个大问题，因为我们是： *创建矢量层， *为每个点添加一个特征（用于工具提示的位置）， *为每个点添加一个叠加层（对于根据每个点的标志应用css类“ blink_me”的材质图标）， *在鼠标悬停时添加一个叠加层，以显示工具提示，动态填充该悬停位置上检测到的功能所特有的任何数据。

为减少性能问题，我已经将要素的样式移到了矢量层，但是我还想删除每个点的叠加层（不是工具提示），并将地图图标移到要素上。唯一的问题是，即使它可以容纳HTMLImageElement，似乎也无法将CSS类应用于功能对象。

您似乎曾经能够在openlayers 2（OpenLayers: Adding a (css-)class to a marker?）中将imageDiv上的className设置回去，所以类似的东西很完美。

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

有没有一种方法可以将CSS类应用于Openlayers 5.3功能？

0 个答案: