NGV: 플러그인-JS 튜토리얼-php.cn

NGV: 플러그인

DDD

풀어 주다： 2024-10-30 02:45:02

원래의

250명이 탐색했습니다.

NGV: plugins

이번 에피소드에서는 최신 3D 뷰어 프레임워크인 NGV용 플러그인 접근 방식을 살펴보겠습니다. NGV 시리즈의 일부입니다.

개발자 타겟팅

한 가지 접근 방식은 '클릭만으로 활성화' 솔루션을 통해 개발자가 아닌 최종 사용자를 대상으로 하는 것입니다. 단점은 많은 추가 코드와 문서를 작성하고 유지 관리해야 하기 때문에 시간이 많이 걸리고 까다롭다는 점입니다.
결과적으로 우리는 개발자를 대상으로 하고 그들이 쉽게 사용할 수 있도록 하는 데 중점을 둡니다. 실제로 우리가 활용할 수 있는 플러그인과 재사용 가능한 코드에는 git, ES 모듈, docker 등 많은 기술이 있습니다.
또 다른 큰 단순화 방법은 외부 플러그인이 없다는 것입니다. 소프트웨어를 확장하려면 사용자가 프로젝트를 포크하고 빌드해야 합니다.

유지관리성/재사용성

플러그인은 유지 관리 가능한 솔루션에 좋습니다. 플러그인을 사용하면 무엇이 핵심이고 무엇이 아닌지 생각해야 합니다. 확장 가능하거나 교체 가능해야 하는 것. 추상화와 인터페이스를 도입해야 코드를 더욱 격리하고 이해하기 쉽게 만들 수 있습니다. 또한 핵심 개발자 외부의 사람들이 API를 이해하는 데 도움이 되는 문서와 지침을 작성하면 모든 사람이 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),
    });

로그인 후 복사