openlayers + geoserver + vue3.0

openlayers
geoserver.vue 代码

<template>
  <div>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <div id="popup" class="ol-popup">
      <a id="popup-closer" class="ol-popup-closer" href="#"></a>
      <div id="popup-content"></div>
    </div>
  </div>
</template>
<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import TileWMS from 'ol/source/TileWMS'
import View from 'ol/View'
import {Vector as VectorSource, XYZ} from 'ol/source'
import {defaults as defaultControls} from 'ol/control'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import Overlay from 'ol/Overlay'
import {toLonLat} from 'ol/proj'
import {toStringHDMS} from 'ol/coordinate'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import {Icon, Style} from 'ol/style'

export default {
  name: 'geoserverMap',
  data: function () {
    return {
      title: 'geoserver'
    }
  },
  mounted () {
    this.initNew()
    let aa = {
      x: 106.51042127821181,
      y: 29.601409233940974
    }
    this.lonlatTomercator(aa);
  },