传单markercluster不识别layeroptions答案

【问题标题】：leaflet markercluster does not recognize layeroptions传单markercluster不识别layeroptions
【发布时间】：2015-11-19 23:46:19
【问题描述】：

我正在使用 angular-leaflet-directive 和 Leaflet.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-sn-p:

<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在不知道角度指令的情况下被初始化，但我不明白发生了什么。请帮忙！

更新：这是 plnkr 的简化版本：http://plnkr.co/edit/vVo3QWzlms8Gun3OhdjM?p=preview

【问题讨论】：

试试去掉showCoverageOnHover: false,之后多余的逗号（,），以防它让angular-leaflet-directive认为你的layerOptions无效？
@ghybs，感谢您的建议。它没有帮助。我还添加了一个最小的代码示例作为 plnkr。
@ghybs，因为您是 Leaflet.MarkerCluster.LayerSupport ...的作者，有没有一种简单的方法来说明标记属于哪个图层组（例如，使用某个标记属性），以便MarkerCluster.LayerSupport 自动按组聚类？
您可以根据需要创建任意数量的 MarkerClusterGroup，子标记将仅与同一 MCG 中的标记进行聚类。但结果可能会令人困惑，因为不同 MCG 的集群不会合并而是重叠，作为常规标记。使用 Angular，您只需将标记分隔在不同的 layer 中，并为每个标记创建一个单独的 markercluster：plnkr.co/edit/PrS1jictieCxy6ymm1n3?p=preview

标签： angularjs leaflet openstreetmap angular-leaflet-directive

【解决方案1】：

在您指定标记数据的 JSON 中，您必须使用 "layer" 而不是 "group" 来指示标记应进入的层的名称。

否则，它们将添加到与您创建的默认组不同并且您为其指定layerOptions 的默认组中。

更新的演示：http://plnkr.co/edit/vWI4uHZMSqU6w3BDnuEt?p=preview

【讨论】：