[Modo de diseño WebGIS] (1) Crear una única instancia de un mapa

I. Introducción

Antecedentes : cuando se desarrolla un sistema WebGIS, hay múltiples interfaces o múltiples funciones que necesitan ver/llamar a la misma instancia de mapa.

En este momento, puede utilizar el patrón de diseño singleton para el desarrollo.

1. Garantiza que solo haya una instancia de una clase y proporciona un punto de acceso global a ella
2. Resolver principalmente el problema de la creación y destrucción frecuente de una clase utilizada globalmente.

2. Implementar un singleton de mapa simple

Cree un singleton de mapa simple usando la clase es6:

export class CesiumMap {
    
    
  constructor (target, Option = viewerOption) {
    
    
  
    // 首次使用构造器实例
    if (!CesiumMap.instance) {
    
    
      this.target = target
      this.map = new Cesium.Viewer(target, Option)
      
      // 将this挂载到CesiumMap这个类的instance属性上
      CesiumMap.instance = this
    }
    return CesiumMap.instance
  }
}

Experimento : Cree dos divs en una interfaz como contenedores para renderizar mapas.

<template>
  <div>
    <button @click="showInstance">看看地球</button>
    
    <div id="map" style="width: 100%;height: 100%;"></div>
    <div id="other" style="width: 100%;height: 100%;"></div>
  </div>
</template>

<script>
import {
    
     CesiumMap } from '@/utils/createCesium.js'

export default {
    
    
  data () {
    
    
    return {
    
    
      mapA: {
    
    }
    }
  },
  mounted () {
    
    
    this.mapA = new CesiumMap('map') // 将地图渲染到id为map的div上
    console.log('mapInstance: ', this.mapA)
  },
  methods: {
    
    
    showInstance () {
    
    
      const mapB = new CesiumMap('other') // 将地图渲染到id为other的div上
      console.log('mapInstance点击按钮: ', mapB)
      console.log('mapInstance一样吗: ', this.mapA === mapB) // 结果为true
    }
  }
}
</script>

Cuando se cargue la página, mapprimero se representará un globo en el div con id. En este momento, miramos la consola y el objetivo impreso es, en efecto. map

Luego hacemos clic en el botón y encontramos que el objetivo no ha cambiado. map

Mismo tiempo,this.mapA === mapB

tres, finalmente

Además, también podemos expandir la creación de singletons de mapa a través del modo proxy para realizar singletons de proxy . (Pero aún no soy muy hábil, actualizaré más tarde)