angular - Angular 上的 Mapbox GL JS MarkerClusterGroup

Question

我正在使用 MapBox GL 和 Leaflet 库在 Ionic / Angular 中制作应用程序。无论如何，我碰巧在实现 L.MarkerClusterGroup () 函数时遇到了问题。目前我使用一个函数从firebase加载每个标记的数据，这工作正常，但将图层添加到地图以将每个标记添加到 MarkerClustergroup 对象。

这是我用来实例化地图的函数

getCurrentCoordinates() {
    this.geolocation.getCurrentPosition().then((resp) => {
      this.latitude = resp.coords.latitude;
      this.longitude = resp.coords.longitude;
      this.map = new mapboxgl.Map({
        container: 'mapBox',
        style: 'mapbox://styles/cherniakovsky/ckn3idmad27xu17r1fb13a6rx',
        center: [this.longitude, this.latitude],
        zoom: 16.15,
        maxZoom: 18,
        cluster: true,
        clusterMaxZoom: 14,
        clusterRadius: 50
        });
     }).catch((error) => {
       console.log('Error getting location', error);
     });
  }

这工作正常，然后我用下一个函数加载标记

  loadPins() {

    for (const rec of this.chatRooms) {
      const icons: Record<string, { icon: string }> = {
        rec: {
          icon: rec.img.filepath,
        },
      };
      let el = window.document.createElement('div');
      el.id = 'avatar';
      el.style.backgroundImage = 'url(' + rec.img.filepath + ')';
      el.style.width = '50px';
      el.style.height = '50px';
      el.style.borderRadius = '50%';
      el.style.backgroundSize = '50px';
      el.draggable = true;
      const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(this.definePopup(rec));
      const latlngM = L.latLng(rec.location.longitude, rec.location.latitude);
      this.marcadores =
      new mapboxgl.Marker(el).setLngLat({lon: rec.location.longitude, lat: rec.location.latitude }).setPopup(popup).on('popupopen', e => {
      this.elementRef.nativeElement.querySelector('.chat-link')
        .addEventListener('click', () => this.openChat(rec));
      }).addTo(this.map);
      this.clusters.addLayer(L.marker(latlngM));
      this.map.addLayer(this.clusters);
    }
}

最后，该函数加载标记但不将它们聚集在一起。变量 this.clusters 是瞬时的，如下所示：

  clusters = new L.MarkerClusterGroup({

    polygonOptions: {
      fillColor: '#3887be',
      color: '#3887be',
      weight: 2,
      opacity: 1,
      fillOpacity: 0.5
    }
  });

我在互联网示例中看了很多，但是当我尝试将图层添加到地图时，会收到很多未定义图层的错误消息。我不明白为什么。感谢阅读

标签： angularionic-frameworkleafletmapbox-glmapbox-marker