Листовка markercluster не распознает слоистых опций

Question

Я использую директиву angular-leaflet и Leaflet.markercluster. Я могу загрузить маркеры в сервис, и теперь я хочу представить маркеры на карте. Маркеры печатаются и группируются стандартным способом markercluster.

Кажется, что моя конфигурация не распознается markercluster вообще. Все, что я настраиваю в оверлеях, похоже, не учитывается. Вот мой код JavaScript:

front_app.factory('SiteWorkingsFactory', function ($http) {

    var _placemarks = function () {
        return $http({
            method: 'GET',
            url: '/map/getMarkersLeaflet',
        }).then(function (result) {
            return result.data;
        });
    };

    return {        
        placemarks: _placemarks
    };
});

front_app.controller('MapController', ['$scope', 'SiteWorkingsFactory', function ($scope, SiteWorkingsFactory) {

    var markerPromise = SiteWorkingsFactory.placemarks();
    markerPromise.then(function (result) {
        $scope.markers = result;
    });

    angular.extend($scope, {
        initial_center: {
            lat: 51.06073,
            lng: 13.71877,
            zoom: 16
        },
        map_defaults: {
            zoomControlPosition: 'topleft',
            tileLayerOptions: {
                detectRetina: true,
                reuseTiles: true,
            },
            doubleClickZoom: true
        },
        layers: {
            baselayers: {
                osmbase: {
                    name: 'OpenStreetMap (XYZ)',
                    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    type: 'xyz'
                }
            },
            overlays: {
                eiqcluster: {
                    name: "eiqcluster",
                    type: "markercluster",
                    visible: true,
                    layerOptions: {
                        singleMarkerMode: true,
                        showCoverageOnHover: false,
                    }
                },
            }
        }
    });

}]);

и HTML-фрагмент:

<div class="mapcontrollerstyles" ng-controller="MapController">
    <leaflet id="map" defaults="map_defaults" lf-center="initial_center" layers="layers" markers="markers"></leaflet>
</div>

JSON, который загружен, выглядит так:

{
    "1":{"lat": 51.06075495, "lng": 13.71900225, "group": "eiqcluster", "properties": {"name": "xyz", "project_type": "model_project", "id": 1}},
    "2":{"lat": 51.0582824267003, "lng": 13.7182974815369, "group": "eiqcluster", "properties": {"name": "xyz2", "project_type": "other", "id": 2}}, 
    "3":{"lat": 51.0620861, "lng": 13.7194437, "group": "eiqcluster", "properties": {"name": "xyz3pe", "project_type": "other", "id": 3}}
}

Я надеялся, что layerOptions для markercluster будут выполнены, но это не так. У меня есть подозрение, что markercluster инициализируется, не зная об угловой директиве, но я не понимаю, что происходит. Пожалуйста помоги!

Обновление: вот уменьшенная версия как plnkr: http://plnkr.co/edit/vVo3QWzlms8Gun3OhdjM?p=preview

Answer 1

В JSON, где вы указываете свои данные маркеров, вы должны использовать "layer" вместо "group" чтобы указать название слоя, маркеры должны войти.

В противном случае они добавляются в группу по умолчанию, которая отличается от той, которую вы создаете, и для которой вы указываете layerOptions,

Обновленная демонстрация: http://plnkr.co/edit/vWI4uHZMSqU6w3BDnuEt?p=preview