我如何将 supercluster v 7.1.2 与 openlayers v6.12.0 一起使用 在javascript中。 版本 6 似乎与 ol-supercluster 不兼容。 https://github.com/fjorgemota/ol-supercluster 我不使用 node.js 或 npm。 代码是
//la source
var centroides_prescriptionsSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = serveurInrap + '/geoserver/inrap/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=inrap:vue_emprisecentroide_activite&outputFormat=json&SRSNAME=EPSG:4326&' + 'bbox=' + extent.join(',') + ',' + 'EPSG:3857'
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var onError = function() {
centroides_prescriptionsSource.removeLoadedExtent(extent);
}
xhr.onerror = onError;
xhr.onload = function() {
if (xhr.status == 200) {
centroides_prescriptionsSource.addFeatures(centroides_prescriptionsSource.getFormat().readFeatures(xhr.responseText, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
})); //pour adapter la projection à celle de la view
} else {
onError();
}
}
xhr.send();
},
strategy: ol.loadingstrategy.bbox
});
const cluster = new Supercluster({
radius: 40,
//minZoom: 1,
maxZoom: 16,
map: function (props) {
return {
coordinates: props.geometry.coordinates,
count: 1
};
}
});
// Ajouter les points à l'instance de Supercluster
cluster.load(centroides_prescriptionsSource.getFeatures().map(function (feature) {
return {
geometry: {
type: 'Point',
coordinates: ol.proj.transform(feature.getGeometry().getCoordinates(), 'EPSG:3857', 'EPSG:4326')
},
properties: feature.getProperties()
};
}));
// Créer une couche pour les marqueurs de cluster
const clusterLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: function (feature) {
const size = feature.get('features').length;
const style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10 + Math.min(size, 10),
fill: new ol.style.Fill({
color: '#3399CC'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
});
return style;
}
});
// Ajouter la couche de marqueurs de cluster à la carte
var prescriptionsLayers = new ol.layer.Group({
title: 'Prescriptions',
openInLayerSwitcher: false, //true,
layers: [
prescriptionAutreswfs,prescriptionDiagnosticswfs, prescriptionFouilleswfs, clusterLayer
],
type: 'group'
});
map.addLayer(prescriptionsLayers);
// Dessiner les marqueurs de cluster sur la carte
function drawCluster() {
const extent = map.getView().calculateExtent(map.getSize());
const zoom = map.getView().getZoom();
const clusters = cluster.getClusters(extent, zoom);
clusterLayer.getSource().clear();
clusterLayer.getSource().addFeatures(clusters.map(function (cluster) {
const feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(cluster.geometry.coordinates, 'EPSG:4326', 'EPSG:3857')),
features: cluster.properties.cluster ?
cluster.properties.cluster.map(function (props) {
return new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(props.geometry.coordinates, 'EPSG:4326', 'EPSG:3857')),
properties: props.properties
});
}) : [new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(cluster.geometry.coordinates, 'EPSG:4326', 'EPSG:3857')),
properties: cluster.properties
})]
});
return feature;
}));
}
// Mettre à jour les marqueurs de cluster lorsque la carte change
map.on('moveend', function () {
drawCluster();
});
集群没有显示,当我放大时,我得到错误 TypeError: p is undefined in reference to the supercluster code