NGV: プラグイン-jsチュートリアル-php.cn

NGV: プラグイン

DDD

リリース： 2024-10-30 02:45:02

オリジナル

340 人が閲覧しました

NGV: plugins

このエピソードでは、モダン 3D ビューアフレームワークである NGV のプラグインのアプローチを見ていきます。これは NGV シリーズの一部です。

開発者をターゲットにする

1 つのアプローチは、「クリックするだけで有効にする」ソリューションを開発者以外のエンドユーザーにターゲットにすることです。欠点は、多くの追加のコードやドキュメントを作成して保守する必要があるため、時間がかかり、厳格なものになることです。
その結果、私たちは開発者をターゲットにし、開発者が簡単にできるようにすることに重点を置いています。実際、プラグインや再利用可能なコードの周りには、git、ES モジュール、docker など、活用できるテクノロジーがたくさんあります...
もう 1 つの大きな簡素化は、外部プラグインを使用しないことです。ソフトウェアを拡張するには、ユーザーがプロジェクトをフォークしてビルドする必要があります。

保守性・再利用性

プラグインは保守可能なソリューションに適しています。プラグインを使用すると、何がコアで何がそうでないのかを考える必要があります。拡張可能または置き換え可能であるべきもの。抽象化やインターフェイスを導入する必要があります。これにより、コードがより分離され、理解しやすくなります。さらに、コア開発者以外の人々が API を理解できるようにドキュメントと手順を作成します。これにより、誰にとっても非常に簡単になります。

例として、低レベルの Cesium コードをアプリケーションコードから分離するプラグイン ngv-plugin-cesium-widget を作成しました。私たちは数十のアプリケーションを用意する予定です。プラグインに共通のコードがあることで、アプリケーション間でコードだけでなく概念も共有できるようになります。このプラグインは汎用であり、それを構成するためのインターフェイスが公開されています。プラグインはあらゆる構成を処理でき、将来性があります。

@customElement('ngv-plugin-cesium-widget')
export class NgvPluginCesiumWidget extends LitElement {
  public viewer: CesiumWidget;

  @property({type: Object})
  cesiumContext: IngvCesiumContext;

  @property({type: Object})
  modelCallback: (name: string, model: Model) => void;

ログイン後にコピー

拡張・カスタマイズ

プラグインシステムを使用すると、ユーザーは設定を超えた権限を得ることができます。このソリューションはカスタマイズしたり、拡張したりすることもできます。

たとえば、すべての地理空間アプリケーションには検索バーがありますが、異なるバックエンド、異なる形式、異なる機能など、同じものはありません。

検索プラグインには事前定義されたプロバイダー (例: OpenstreetMap Nominatim) が付属しており、独自のプロバイダー (例: Pelias、Photon など) を提供できます。

これらのプロバイダーはそのアプリケーションから独立しており、簡単に共有したりアップストリームに提供したりできます。

さらに、検索プラグインは、基礎となるインターフェイスに従っている限り、別の実装で完全に置き換えることができます。

    for (const pc of descr.config.providers) {
      const initialize = providerInitializers[pc.name];
      if (!initialize) {
        console.error("could not find provider", pc.name, "skipping it");
        continue;
      }
      const provider = initialize(pc.config);
      this.providers.push(provider);
    }

    this.autocomplete = new Autocomplete(this.autocompleteRef.value, {

      search: this.search.bind(this),
      onSubmit: this.onSubmit.bind(this),
      renderResult: this.renderResult.bind(this),
      getResultValue: this.getResultValue.bind(this),
    });

ログイン後にコピー