使用带有 AngularJS Leaflet 指令的 PruneCluster

Question

我在使用 PruneCluster 加载 geojson 数据的集群标记时遇到问题。集群不会显示，控制台中也没有任何错误可以帮助排除故障。这是我当前的 controller.js 代码：

 angular.module('bizvizmap').controller('controller', [
    '$scope', '$http', '$filter', 'leafletData',
    function ($scope, $http, $filter, leafletData){
    $scope.center = {
        lat: 39.5500507,
        lng: -105.7820674,
        zoom: 4
            },
    $scope.defaults = {
        scrollWheelZoom: false
            },
    $scope.events = {
            map: {
            enable: ['zoomstart', 'drag', 'click', 'mousemove'],
            logic: 'emit'
            }
            },
    $scope.layers = {
            baselayers: {
            osm: {
            name: 'OpenStreetMap',
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            type: 'xyz'
                    }
                },
            markers:{}
    },

    $scope.map = null;
    leafletData.getMap("bizvizmap").then(function(map){
        $scope.map = map;
    });
    function renderMarkers(data, map){
        var markerLayer = new PruneClusterForLeaflet();
        for (var i=0; i < data.length; i++){
            var marker = new PruneCluster.Marker(data[i].geometry.coordinates[1], data[i].geometry.coordinates[0]);
            markerLayer.RegisterMarker(marker);
        }
        map.addLayer(markerLayer);
        markerLayer.ProcessView();
    }
    $scope.geojson = {};
    $http.get('data/bizvizmap.geojson').success(function (data){
            $scope.data = data;
            // Render clustered markers
            renderMarkers(data, $scope.map);
        });
]);

Answer 1

我的代码的问题是它没有访问 GeoJson 文件中的功能，并且无法显示聚类标记。我按如下方式解决了这个问题：

 function renderMarkers(data, map){
        var markerLayer = new PruneClusterForLeaflet();
        for (var i=0; i < data.length; i++){
            var marker = new PruneCluster.Marker(data[i].geometry.coordinates[1], data[i].geometry.coordinates[0]);
            markerLayer.RegisterMarker(marker);
        }
        map.addLayer(markerLayer);
        markerLayer.ProcessView();
    }
    $scope.geojson = {};
    $http.get('data/bizvizmap_final.geojson').success(function (data){
            $scope.data = data;
            // Render clustered markers
            renderMarkers(data.features, $scope.map);
        });

使用带有 AngularJS Leaflet 指令的 PruneCluster

Using PruneCluster with AngularJS Leaflet Directive

javascript

angularjs

leaflet

angular-leaflet-directive