Leaflet.markercluster：缩放时性能下降

Question

我正在渲染一百万个geojson数据，这是Polygon的类型。 这在渲染数据时提供了更好的性能。 但是当缩放地图时，性能会非常慢。

如何避免此问题？

我正在使用事件zoomstart和zoomend来显示微调器。

这是在6或8秒后开始的。 缩放开始后，Leaflet.markercluster需要将近30秒到1分钟才能完成缩放。

我的Anuglar指令代码：

    (function () {
        'use strict';
        angular.module('leafLet', [])
        .factory('leafLetService', function () {
            var leafLetService = {};
            return leafLetService;
        })
            .directive('leafLet', ['leafLetService', '$timeout', function (leafLetService, $timeout) {
                return {
                    restrict: 'AE',
                    scope: {
                        item: '=leafLet',
                        options: '=?options',
                        events: '=?events',
                        sharingValue: '=?sharingValue'
                    },
                    link: function (scope, $element, attrs, ngModel) {
                        var map = null, myLayer = null;
                        scope.events = scope.events || {};
                        scope.options = {
                            center: null,
                            zoom: null
                        };
                        scope.events.addData = addData;
                        var markers = null;
                        var element = document.getElementById(attrs.attrId);
/**Create a map object**/
                        function createMap() {
                            $(document).ready(function () {
                                $timeout(function () {
                                    map = L.map(attrs.attrId);

                                    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                                        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                    }).addTo(map);

                                    createLayer();
                                    if (scope.events && typeof scope.events['mapCreated'] === "function") {
                                        scope.events['mapCreated']();
                                    }
                                    $(element).hide();
                                }, 0);
                            });

                        }

/**Create the layer and add to the map**/
                        function createLayer() {
                            myLayer = L.geoJSON().addTo(map);
                        }

/**Bind zooming detection for the map**/
                        function onZooming() {
                            map.on("zoomstart", function (e) {
                                map.spin(true);
                            });
                            map.on("zoomend", function (e) { map.spin(false); });
                        }

/**Add geojson data to the existing map. This will help to add data partially to the map**/
                        function addData(geoJsonData) {
                            //myLayer.addData(data);
                            $(element).show();
                            markers = markers || L.markerClusterGroup();

                            var geoJsonLayer = L.geoJson(geoJsonData);
                            markers.addLayer(geoJsonLayer);

                            map.addLayer(markers);
                            map.eachLayer(function (layer) {
                                if (!layer.on) return;

                                layer.on('loading', function (event) {
                                    map.spin(true);
                                });

                                layer.on('load', function (event) {
                                    map.spin(false);
                                });
                            }, this);
                            map.fitBounds(markers.getBounds());

                            onZooming();

                        }

/**Initial function to be called**/
                        function init() {
                            createMap();
                        }

/**Initial function calling.**/
                        init();
                    }
                };
            }]);

    }());