ol (OpenLayers) Principiante

Documentación oficial: OpenLayers - Bienvenido

Con lo que entré en contacto es que el mapa se usa en el proyecto después de descargarlo usando npm como complemento.

1. En el mapa, primero encapsule y exponga un método para montar en Vue

import WhrdMap from './whrd-map/WhrdMap.vue'
import { optConfig } from './whrd-map/option.config'

WhrdMap.install = function (Vue, opts = {}) {
  optConfig.request = opts.request || window.axios

  Vue.component(WhrdMap.name, WhrdMap)

  Vue.prototype.$mapEventHub = Vue.prototype.$mapEventHub || new Vue()
}

export default WhrdMap

 2. Después de instalar el complemento en el proyecto, active el método expuesto por el mapa en el archivo utilizado y el valor que debe asignarse

this.$mapEventHub.$emit("setzoom-popup",15)

3. Suscríbete en la página del mapa

this.doSubscribe("setzoom-popup", this.setZoomAndonEvent);

4. Definir el disparador del método de la suscripción

 doSubscribe(message, callback) {
      // 订阅
      this.$mapEventHub.$on(message, callback);
      // 取消订阅 - 回收处理
      this.$once("hook:beforeDestroy", () => {
        this.$mapEventHub.$off(message, callback);
      });
    },

5. Defina un método Aquí está el método incorporado de ol para operar en el mapa

    setZoomAndonEvent(zoom) {
      this.showZoom = zoom;
      let map = this.getMap();
      let mapView = (map && map.getView()) || null;
      if (mapView) {
        mapView.on("change:resolution", this.resolutionChange);
      }
    },