Блог

Я использую карты Google для углового (https://timdeschryver.dev/blog/google-maps-as-an-angular-component) и это прекрасно работает, за исключением случаев, когда есть большое количество маркеров. Затем визуализация маркеров значительно замедляется. Мне интересно, есть ли способ улучшить скорость рендеринга.

59 маркеров мгновенно отображаются:

35 000 маркеров могут занять до часа:

Вот мой шаблон:

 <div class="map-container">
    <google-map
      #map
      height="100%"
      width="100%"
      [zoom]="zoom"
      [center]="center"
      [options]="mapOptions">
        <!-- clustered markers -->
        <map-marker-clusterer imagePath="assets/img/clusters/cluster_green">
          <map-marker
            *ngFor="let site of okSitesBound"
            [position]="site.position"
            [label]="site.type"
            [title]="site.displayName"
            [icon]="site.pinIcon"
            fit="true"
            [options]="okPinOptions">
          </map-marker>
        </map-marker-clusterer>
        <!-- unclustered markers -->
        <map-marker
          *ngFor="let site of notOkSitesBound"
          [position]="site.position"
          [label]="site.type"
          [title]="site.displayName"
          [icon]="site.pinIcon"
          fit="true"
          [options]="notOkPinOptions">
        </map-marker>
    </google-map>
  </div>
 

Here is my typescript:

   private subscribeToSiteDataReady(): void {
    this._siteDataReady.subscribe((ready: boolean) => {
      if (ready) {
        this.okSitesBound = this._okSitesUnbound;
        this.notOkSitesBound = this._notOkSitesUnbound;
        this.map.fitBounds({
          east: this._eastMostLng,
          west: this._westMostLng,
          north: this._northMostLat,
          south: this._southMostLat
        });
      }
    });
  }
 

^ Идея здесь заключается в том, что, когда все данные для выводов загружаются в несвязанные массивы (_okSitesUnbound и _notOkSitesUnbound), я вызываю событие _siteDataReady, и подписка назначает несвязанные массивы связанным массивам (привязанным к шаблону). Я делаю это таким образом, потому что хочу отделить загрузку данных от рендеринга выводов, поэтому я привязываю данные к шаблону ТОЛЬКО тогда, когда он полностью загружен. Это говорит мне о том, что медленный рендеринг контактов является проблемой с самой картой.

Вот некоторые вещи, которые я пробовал:

• Кластеризация: как вы можете видеть из приведенного выше кода, у меня включена кластеризация (https://github.com/angular/components/tree/master/src/google-maps/map-marker-clusterer). Но кластеризация вступает в силу только для небольших объемов данных (она немедленно отображает значок кластера). Но с большими объемами данных, похоже, требуется сначала отобразить все контакты перед кластеризацией (и, честно говоря, мне еще предстоит увидеть, как контакты завершают визуализацию с большими объемами данных, поэтому я на самом деле вообще не видел кластеризации с большими объемами данных; Я предполагаю, что кластеризация происходит после визуализации контактов).
• MarkerManager: Эта статья (http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/) говорит, что MarkerManager можно использовать для повышения производительности рендеринга pin-кодов. Но это, похоже, доступно только для карт Google (https://www.npmjs.com/package/@googlemaps/markermanager), а не карты Google для Angular (@angular/google-maps 12.0.3). Я попытался создать экземпляр MarkerManager, как это:

 mgr = new google.maps.plugins.markermanager.MarkerManager(map, {});
 

…(взято из следующего примера: https://github.com/googlemaps/v3-utility-library/blob/master/packages/markermanager/examples/google_northamerica_offices.html), но он не распознает пространство имен плагинов в google.maps.

Есть ли способ ускорить отображение пинов на картах Google для Angular?