openlayers之鼠标浮动显示feature的名称并高亮显示

<template>
  <div
    class="my-road-text-popup"
    ref="popup"
  >{{roadText}}</div>
</template>

<script>
import Select from 'ol/interaction/Select';
import VectorLayer from 'ol/layer/Vector';
import { Vector as VectorSource } from 'ol/source';
import {
  readEncWkt,
  createOtherPolygonStyle,
  createCircelStyle,
  createTextStyle,
} from '@/utils/geoUtil';
import { Style } from 'ol/style';
import { pointerMove } from 'ol/events/condition';
import Overlay from 'ol/Overlay';
import { darkGrayColor, grayColor, lightBLueColor } from '@/api/mapConfig';

export default {
  name: 'ReferenceLayer',
  props: {
    map: Object,
    refDateList: {},
    codeList: {},
  },
  data() {
    return {
      roadText: undefined,
      layerList: [],
      overlay: undefined,
    };
  },
  mounted() {
    this.initOverlay();
  },
  methods: {
    //移除图层
    removeLayers() {
      if (this.layerList.length > 0) {
        for (let layer of this.layerList) {
          this.map.removeLayer(layer);
        }
      }
      this.layerList = [];
      this.roadText = '';
    },
    initLayer(arr) {
      for (let item of arr) {
        let layer = new VectorLayer({
          code: 'con_' + item.id,
          name: item.layerName,
          groupName: '参考数据',
          style: function (feature) {
            return feature.get('style');
          },
          source: new VectorSource({ wrapX: false }),
        });
        switch (item.layoutLayerType) {
          case 'plane':
            layer.setZIndex(1);
            break;
          case 'line':
            layer.setZIndex(2);
            break;
          case 'point':
            layer.setZIndex(3);
            break;
        }
        this.layerList.push(layer);
        this.map.addLayer(layer);
      }
      this.initHoverSelected();
    },
    initHoverSelected() {
      let selectPointerMove = new Select({
        condition: pointerMove,
        layers: this.layerList,
        style: (feature) => {
          const pro = feature.getProperties();
          if (pro.type === 'point') {
            return this.pointStyle(pro.name, lightBLueColor);
          } else if (pro.type === 'plane') {
            return createOtherPolygonStyle(lightBLueColor, 2);
          } else {
            return createOtherPolygonStyle(lightBLueColor, 10);
          }
        },
      });
      this.map.addInteraction(selectPointerMove);
      selectPointerMove.on(['select', 'remove', 'add'], (e) => {
        this.overlay.setPosition(undefined);
        let features = e.target.getFeatures().getArray();
        if (features.length == 0) {
          return;
        }
        let feature = features[0];
        let pro = feature.getProperties();
        //清除选中的样式
        // selectPointerMove.getFeatures().clear();
        if (pro.type === 'point') {
          return;
        }
        this.roadText = pro.name;
        this.overlay.setPosition(e.mapBrowserEvent.coordinate);
      });
    },
    pointStyle(name, color) {
      const dom = {
        textAlign: 'center',
        color: darkGrayColor,
        font: '12px sans-serif',
        offsetY: -10,
      };
      return new Style({
        image: createCircelStyle(color, 4),
        text: createTextStyle(name, dom),
      });
    },
    initOverlay() {
      let dom = this.$refs.popup;
      this.overlay = new Overlay({
        element: dom,
        autoPan: false,
        // offset: [10, 10],
      });
      this.map.addOverlay(this.overlay);
    },
    addFeatures(arr) {
      if (arr && arr.length > 0) {
        arr.forEach((polygon) => {
          let feature = readEncWkt(polygon.theGeom);
          let pro = {
            name: polygon.name,
            type: polygon.layoutLayerType,
            layerCode: 'con_' + polygon.collectLayoutLayerId,
          };
          if (pro.type === 'point') {
            feature.set('style', this.pointStyle(pro.name, darkGrayColor));
          }
          if (pro.type === 'line') {
            feature.set('style', createOtherPolygonStyle(darkGrayColor, 10));
          }
          if (pro.type === 'plane') {
            feature.set('style', createOtherPolygonStyle(darkGrayColor, 1));
          }
          feature.setProperties(pro);
          this.layerList
            .find((layer) => layer.getProperties().code === pro.layerCode)
            .getSource()
            .addFeature(feature);
        });
      }
    },
    clearFeatures() {
      this.roadText = '';
      if (this.layerList.length > 0) {
        for (let layer of this.layerList) {
          layer.getSource().clear();
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my-road-text-popup {
  font-size: 14px;
}
</style>