Cluster data GeoJSON dengan PruneCluster

Question

Saya mencoba membuat cluster dengan kategori menggunakan PruneCluster di sekitar lapisan GeoJSON saya.

Sebagai contoh di GitHub Mereka membuat beberapa marker secara acak kemudian menambahkannya ke cluster.

Saya melakukan hal yang sama, saya mendapatkan coord dari lapisan GeoJSON, menyimpannya dalam variabel lalu menambahkannya ke Prunecluster sebagai berikut:

leafletView.BuildLeafletClusterIcon = function(cluster) {
        var e = new L.Icon.MarkerCluster();

        e.stats = cluster.stats;
        e.population = cluster.population;
        return e;
    };

    var colors = ['rgb(10, 94, 219)', 'rgb(253, 152, 1)', 'rgb(3, 180, 11)'],
        pi2 = Math.PI * 2;

    L.Icon.MarkerCluster = L.Icon.extend({
        options: {
            iconSize: new L.Point(44, 44),
            className: 'prunecluster leaflet-markercluster-icon'
        },

        createIcon: function() {
            // based on L.Icon.Canvas from shramov/leaflet-plugins (BSD licence)
            var e = document.createElement('canvas');
            this._setIconStyles(e, 'icon');
            var s = this.options.iconSize;
            e.width = s.x;
            e.height = s.y;
            this.draw(e.getContext('2d'), s.x, s.y);
            return e;
        },

        createShadow: function() {
            return null;
        },

        draw: function(canvas, width, height) {

            var lol = 0;

            var start = 0;
            for (var i = 0, l = colors.length; i < l; ++i) {

                var size = this.stats[i] / this.population;


                if (size > 0) {
                    canvas.beginPath();
                    canvas.moveTo(22, 22);
                    canvas.fillStyle = colors[i];
                    var from = start + 0.14,
                        to = start + size * pi2;

                    if (to < from) {
                        from = start;
                    }
                    canvas.arc(22, 22, 22, from, to);

                    start = start + size * pi2;
                    canvas.lineTo(22, 22);
                    canvas.fill();
                    canvas.closePath();
                }

            }

            canvas.beginPath();
            canvas.fillStyle = 'white';
            canvas.arc(22, 22, 18, 0, Math.PI * 2);
            canvas.fill();
            canvas.closePath();

            canvas.fillStyle = '#555';
            canvas.textAlign = 'center';
            canvas.textBaseline = 'middle';
            canvas.font = 'bold 12px sans-serif';

            canvas.fillText(this.population, 22, 22, 40);
        }
    });


let myLayerOptionsArbre = {

        pointToLayer: createCustomIcon,
        onEachFeature: function(feature, layer) {
            layer.bindTooltip(feature.properties.titre);
            layer.on({
                click: onMarkerClick
            });
            coordsArb.push(feature.geometry.coordinates);

        }
    }

var arb = arbres
    var arbre = new L.GeoJSON(arb, myLayerOptionsArbre)

var ap = {}

    for (var i = 0; i < coordsAP.length; i++) {

        ap = new PruneCluster.Marker(coordsAP[i][1], coordsAP[i][0]);
        console.log(typeof ap)
        console.log("hey", coordsAP[i][1])
        ap.category = AIRES_PROTEGEES;
        leafletView.RegisterMarker(ap);
    }

leafletView.ProcessView();
    mymap.addLayer(leafletView)

Sekarang di peta saya, saya memiliki cluster di sekitar penanda baru dan lapisan GeoJSON. Ketika saya membaca dokumen tersebut, saya menemukan bahwa Prunecluster tidak mendukung GeoJSON. Sekarang jika saya hanya bekerja dengan penanda, Bagaimana saya bisa melampirkannya ke properti fitur geojson, karena saya sedang membangun sembulan khusus dengan fungsi yang onMarkerClickdipanggil saat fitur geojson diklik.

Jadi jika Anda memiliki ide tentang bagaimana mencapainya, saya akan senang.

Answer 1

Jika Anda ingin menampilkan penanda dengan PruneClusterplugin, Anda tidak dapat menggabungkannya dengan menampilkan penanda yang sama melalui lapisan GeoJSON.

Jika penanda Anda berasal dari data GeoJSON, Anda dapat menggunakan Leaflet L.geoJSONuntuk melakukan iterasi melalui fitur / titik, tetapi penanda harus dibuat hanya dengan instance PruneCluster.Markerobjek.

Karena penanda yang dibuat dengan PruneClusterplugin bukan penanda Leaflet standar, Anda tidak dapat menetapkan munculan atau penangan acara ke penanda tersebut menggunakan metode Leaflet standar. Ada solusi untuk ini dalam bentuk PrepareLeafletMarker(leafletMarker, data)metode penggantian (lihat dokumen dihttps://github.com/SINTEF-9012/PruneCluster). Parameter pertama leafletMarkeradalah penanda Leaflet standar tempat Anda dapat menerapkan semua metode penanda standar untuk membuat keterangan alat, munculan, penangan peristiwa, dll. Parameter kedua adalah data, yang berisi data dari dataproperti penanda , yang disediakan pada saat pembuatan penanda, misalnya:

var marker = new PruneCluster.Marker(latLng.lat, latLng.lng);
marker.data.properties = feature.properties;
leafletView.RegisterMarker(marker);

Untuk marker dari contoh di atas, data.propertiesakan berisi semua properti fitur.

Di bawah ini adalah contoh sederhana membuat PruneClusterpenanda dari sumber GeoJSON geojsonData. Popup ditugaskan ke penanda dari properti fitur name, dan setelah klik penanda semua properti fitur ditampilkan di konsol.

var map = L.map("map", {
  attributionControl: false,
  zoomControl: false
}).setView(new L.LatLng(41.89, 12.49), 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  detectRetina: true,
  maxNativeZoom: 17
}).addTo(map);

var leafletView = new PruneClusterForLeaflet();
leafletView.Cluster.Size = 160;

leafletView.PrepareLeafletMarker = function(leafletMarker, data) {
  leafletMarker.bindPopup(data.properties.name);
  leafletMarker.on('click', function(evt){
    console.log(data);
  });
};

L.geoJSON(geojsonData, {
  pointToLayer: function(feature, latLng) {
    var marker = new PruneCluster.Marker(latLng.lat, latLng.lng);
    marker.data.properties = feature.properties;
    leafletView.RegisterMarker(marker);
  }
});

map.addLayer(leafletView);