我真的可以使用一些帮助来设置标记聚类选项。到目前为止，我已经构建了地图，并且能够单击按钮并显示图层。现在，我再次检查了我要群集的层是否是单点。格式是这样的：
{
"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
}
}
它继续进行了约14,000条记录。我可以显示它，但希望它可以与群集一起使用。也许我导入错误，或者我只是对使用它有错误的想法。使用常规的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);
//
}
}
ngOnInit中的服务只是HTTPClient请求。功能是所有按钮，并且层出现在（单击）上。我在考虑也许使用if（）语句在将图层的数据插入clusterMarkerGroup之前检查是否已加载该图层的数据，但我认为我已经死了。
感谢您提出任何建议，谢谢。
哦！我的角度json看起来像这样
"assets": [
{
"glob": "**/*",
"input": "node_modules/leaflet/dist/images",
"output": "leaflet/"
},
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/leaflet/dist/leaflet.css",
"node_modules/leaflet.markercluster/dist/MarkerCluster.css",
"node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
"src/styles.css"
],
"scripts": [
"node_modules/leaflet/dist/leaflet.js",
"node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js"
]
资产中的一部分在那里，因为我也尝试了ngx-leaflet。但是我不知道该怎么做。
编辑：据我安装的版本
"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"
不确定我应该使用哪种类型的传单标记集群。我应该删除其中之一吗。可能是问题所在吗？
如果我将最后一个函数addServce更改为此：
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);
}
该层出现了，所以我知道它正在工作。.
编辑：我应该使用异步/等待吗？
已解决： 我是个白痴。我会把这个留给遇到此问题的其他任何人。订阅有三个参数。最后一个参数是完成。所以在我的点击功能中，我只是这样设置它：
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)
})
}