[WebGIS デザインモード] (1) マップの単一インスタンスを作成する

I.はじめに

背景: WebGIS システムを開発する場合、同じマップ インスタンスを表示/呼び出しする必要がある複数のインターフェイスまたは複数の関数が存在します。

現時点では、シングルトン設計パターンを開発に使用できます。

1. クラスのインスタンスが 1 つだけであることを保証し、そのインスタンスへのグローバル アクセス ポイントを提供します
2. 主にグローバルに使用されるクラスの頻繁な作成と破棄の問題を解決します

2. 単純なマップ シングルトンを実装する

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
  }
}

実験: マップをレンダリングするためのコンテナとして 1 つのインターフェイスに 2 つの div を作成します。

<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>

ページがロードされると、mapID を持つ div にグローブが最初にレンダリングされます。この時点で、コンソールを見ると、印刷されたターゲットが実際に表示されます。次に、ボタンをクリックすると、ターゲットが変更されていないことがわかりますmap

。map

同時、this.mapA === mapB

3つ目、ついに

さらに、プロキシ モードを介してマップ シングルトンの作成を拡張し、プロキシ シングルトンを実現することもできます。(ただし、まだあまり熟練していないので、後で更新します)