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);
        });

将PruneCluster与AngularJS Leaflet指令一起使用

1 个答案: