我如何使用 supercluster v 7.1.2 和 openlayers v6.12.0 [关闭]

问题描述 投票:0回答:0

我如何将 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

openlayers openlayers-6 supercluster
© www.soinside.com 2019 - 2024. All rights reserved.