Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用带AngularJS传单指令的PruneCluster_Javascript_Angularjs_Leaflet_Angular Leaflet Directive - Fatal编程技术网

Javascript 使用带AngularJS传单指令的PruneCluster

Javascript 使用带AngularJS传单指令的PruneCluster,javascript,angularjs,leaflet,angular-leaflet-directive,Javascript,Angularjs,Leaflet,Angular Leaflet Directive,我在使用PruneCluster加载geojson数据的集群标记时遇到问题。群集不显示,控制台中也没有错误以帮助排除故障。以下是我当前的controller.js代码: angular.module('bizvizmap').controller('controller', [ '$scope', '$http', '$filter', 'leafletData', function ($scope, $http, $filter, leafletData){ $sco

我在使用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);
        });
]);
angular.module('bizvizmap').controller('controller')[
“$scope”、“$http”、“$filter”、“传单数据”,
函数($scope、$http、$filter、数据){
$scope.center={
拉脱维亚:39.5500507,
液化天然气:-105.7820674,
缩放:4
},
$scope.defaults={
滚轮缩放:错误
},
$scope.events={
地图:{
启用:['zoomstart','drag','click','mousemove'],
逻辑:“发射”
}
},
$scope.layers={
基层:{
osm:{
名称:“OpenStreetMap”,
url:'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
键入:“xyz”
}
},
标记:{}
},
$scope.map=null;
getMap(“bizvizmap”)。然后(函数(map){
$scope.map=map;
});
功能渲染器(数据、地图){
var markerLayer=新的pruneclusterforleaft();
对于(变量i=0;i
我的代码的问题是它没有访问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);
        });
功能渲染器(数据、地图){
var markerLayer=新的pruneclusterforleaft();
对于(变量i=0;i