Angular 角形6应用中的小叶簇标记？

我真的需要一些帮助来设置标记集群选项。到目前为止，我已经构建了地图，能够单击按钮并显示图层。现在，我已经仔细检查了我要聚集的层是否是一个单点。格式如下：

{
"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                -00.0000,
                00.000
            ]
        },
        "properties": {
            "mileage": 13.0767,
            "drivetime": 27.8,
            "schedule_t": 2
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                -00.00000,
                0.0000
            ]
        },
        "properties": {
            "mileage": 40.1342,
            "drivetime": 52.0333,
            "schedule_t": 2
        }
    }

它只需要再创造大约14000张唱片。我可以让它显示出来，但希望它与集群一起工作。也许我输入错误，或者我只是对如何使用它有错误的想法。使用常规javascript，我编写了如下内容

lyrPeople = new L.GeoJSON.AJAX("{% url 'people' %}", {

            });

            lyrPeopleMarkers = L.markerClusterGroup();
            lyrPeople.on('data:loaded', function(){
                lyrPeopleMarkers.addLayer(lyrPeople);
            });

看起来很滑稽的{%%}是在我使用纯django时出现的

我不得不使用.on（'data:loaded'），因为我相信AJAX使它成为一个异步请求

这就是我的组件的整个代码

import { Component, OnInit } from '@angular/core';
import { NewService } from '../services/NewService.service';
declare let L;
import 'leaflet';
import 'leaflet.markercluster';


@Component({
  selector: 'app-leaflet-classic',
  templateUrl: './leaflet-classic.component.html',
  styleUrls: ['./leaflet-classic.component.css']
})
export class LeafletClassicComponent implements OnInit {

  stores: any;
  customers: any;
  map: any;
  services: any;


constructor(private newService: NewService) {

  }

  ngOnInit() {
    this
    .newService
    .getStores()
    .subscribe(storedata => {

      this.stores = storedata;
    })

    this
    .newService
    .getCustomers()
    .subscribe(customerdata => {
      this.customers = customerdata;
    })

    this
    .newService
    .getService()
    .subscribe(servicedata => {
      this.services = servicedata;
      console.log(this.services)
    })

  this.map = L.map('map').setView([46.478919, -109.549211], 6);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);


  }

    addStores() {
      const geoJsonMarkerOptions = {
        radius:7,
        fillColor: '#ff7800',
        color: '#000',
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
      };

        L.geoJSON(this.stores, {
          pointToLayer: function(feature, latlng) {
            return L.circleMarker(latlng, geoJsonMarkerOptions)
          }
        }).addTo(this.map);
    }

    addCustomers() {

      const geoJsonMarkerOptions2 = {
        radius:4,
        fillColor: '#00BFFF',
        color: '#000',
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
      };



    L.geoJSON(this.customers, {
      pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, geoJsonMarkerOptions2)
      }
    }).addTo(this.map);



    }

    addService() {
    // const group = L.markerClusterGroup();
    // const test = L.geoJSON(this.services)
    // group.addLayer(test);
    // group.addTo(this.map);
    // 
    }

  }

资产中的部分在那里，因为我也试图用ngx传单来实现这一点。但我在这方面比这更差

编辑：我安装了哪些版本

"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@asymmetrik/ngx-leaflet": "^4.0.0",
"@types/leaflet": "^1.2.8",
"@types/leaflet-markercluster": "^1.0.3",
"@types/leaflet.markercluster": "^1.0.3",
"core-js": "^2.5.4",
"leaflet": "^1.0.3",
"leaflet.markercluster": "^1.3.0",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"

不确定我应该使用哪种类型的传单标记群集。。我是否应该删除其中一个。。这可能是问题所在吗

如果我将最后一个函数addserve更改为：

addService() {

  const geoJsonMarkerOptions3 = {
    radius: 3,
    fillColor: '#FFFF00',
    color: '#000',
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
  };

    L.geoJSON(this.services, {
      pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, geoJsonMarkerOptions3);
      }
    }).addTo(this.map);

}

图层显示了，所以我知道它正在工作

编辑：我应该使用异步/等待吗

已解决： 我是个白痴。我会把这件事留给任何遇到这件事的人。subscribe有三个参数。最后一个参数是“完成”。因此，在我的单击功能中，我只是将其设置为：

addService() {

  this
.newService
.getService()
.subscribe(servicedata => {
  this.services = servicedata;
},
(error) => {
  console.log('error');
},
() => {
console.log('complete');
console.log(this.services)

const newlayer = L.geoJSON(this.services)
const group = L.markerClusterGroup();
group.addLayer(newlayer)
group.addTo(this.map)

})
}

addService() {

  this
.newService
.getService()
.subscribe(servicedata => {
  this.services = servicedata;
},
(error) => {
  console.log('error');
},
() => {
console.log('complete');
console.log(this.services)

const newlayer = L.geoJSON(this.services)
const group = L.markerClusterGroup();
group.addLayer(newlayer)
group.addTo(this.map)

})
}