vue中opanlayers使用overlay插入div到地图

vue中opanlayers使用overlay插入div到地图
效果：

代码：

/**
   * 加载网格不通过原因的标注
   */
  loadUnpassReason(unpassReason) {
    if (unpassReason) {
      // 加载不通过原因的标注-加载到格网的中心点上
      this.loadOverlay(unpassReason);
    } else {
      // 清除不通过原因标注
      this.removeOverlay();
    }
  }
  
/**
   * 生成unpassReason显示的div
   * @param unpassReason
   */
  generateDiv(unpassReason) {
    // 创建一个div元素
    const divElement = document.createElement('div');

    // 设置div的属性和样式
    divElement.id = 'areaCenterDiv';
    divElement.style.zIndex = '99999';
    divElement.style.background = 'rgba(255, 255, 255, 1)';
    divElement.style.borderRadius = '10px';
    divElement.style.padding = '5px 8px';

    // 创建一个显示文本的元素
    const textElement = document.createElement('div');
    textElement.innerText = unpassReason;
    textElement.style.fontSize = '13px';
    textElement.style.color = 'black';
    textElement.style.textAlign = 'center';
    textElement.style.margin = '0 3px';
    divElement.appendChild(textElement);

    return divElement;
  }

/**
   * 加载overlay到地图
   */
  loadOverlay(unpassReason) {
    this.removeOverlay();
    const centerCoordinate = this.map.getView().getCenter();
    // 创建一个Overlay对象
    const overlay = new Overlay({
      element: this.generateDiv(unpassReason),
      positioning: 'center-center',
      stopEvent: false,
      position: centerCoordinate, // 设置Overlay对象的位置
      id: 11,
    });

    this.state.overlay = overlay;

    // 将Overlay添加到地图中
    this.map.addOverlay(overlay);
  }

/**
   * 移除地图上区域所有的中心点div
   */
  removeOverlay() {
    if (this.state.overlay) {
      this.map.removeOverlay(this.state.overlay);
    }
    this.state.overlay = null;
  }