Question

我有一个角度指令加载一个svg地图（使用amchart），我添加了数千个svg圆圈。最终一切正常，但我的浏览器似乎很痛苦，我需要（1）优化我的加载和（2）显示一个加载符号，可以持续到地图可以实际显示真实。今天我使用这种指令属性来知道何时加载了我的指令：

        directive('initialisation',['$rootScope',function($rootScope) {
              return {
                   restrict: 'A',
                   link: function($scope) {
                    var to;
                    var listener = $scope.$watch(function() {
                       clearTimeout(to);
                       to = setTimeout(function () {
                          listener();
                          $rootScope.$broadcast('initialised');
                       }, 50);
                   });
               }
            };

这对我来说并不好，因为我的加载符号（angular-material）会冻结，然后在地图可以渲染之前消失以留下空浏览器几秒钟。有关信息，我在地图div上使用ng-hide加载div和ng-show，这就是我应用它的方式：

$scope.$on('initialised', function() {

         $scope.$apply(function(){
            $scope.mapLoaded = true;
         });
    })

你知道解决我的（1）和（2）问题的方法吗？或者我应该寻找另一个js库来做到这一点？

谢谢

PS：这是我的map指令（图像是目前有20k条目的数组）：

 directive('amChartsLanguage', function() {
          return {
            restrict: 'E',
            replace:true,
            template: '<div id="mapLanguage" style="height: 1000px; margin: 0 auto"> </div>',
            link: function(scope, element, attrs) {


                var chart = false;

                var initChart = function() {
                    if (chart) chart.destroy();
                    var images = [];
                    var legendData = [];
                    for(var i=0 ; i < scope.languageZeppelin.length ; i ++ ) {
                        images.push( {
                            "type": "circle",
                            "width": 7,
                            "height": 7,
                            "color": scope.languageZeppelin[i].color,
                            "longitude": scope.languageZeppelin[i].lon,
                            "latitude": scope.languageZeppelin[i].lat
                          } );

                    }

                    var legend = new AmCharts.AmLegend();
                    legend.width="10%";
                    legend.height="300";
                    legend.equalWidths = false;
                    legend.backgroundAlpha = 0.5;
                    legend.backgroundColor = "#FFFFFF";
                    legend.borderColor = "#ffffff";
                    legend.borderAlpha = 1;
                    legend.verticalGap = 10;
                    legend.top = 150;
                    legend.left = 70;
                    legend.position = "left";
                    legend.maxColumns = 1;
                    legend.data = scope.legend; 

                    // build map
                    chart = AmCharts.makeChart( "mapLanguage", {
                      "type": "map",
                      "areasSettings": {
                        "unlistedAreasColor": "#15A892",
                        "autoZoom": true,
                        "selectedColor": "#FFCC00",
                        "color": "#909090"
                      },
                      "dataProvider": {
                        "map": "worldLow",
                        "getAreasFromMap": true,
                        "images": images,
                        "zoomLevel": 1,
                        "zoomLongitude": 6,
                        "zoomLatitude": 11
                      },
                      "export": {
                        "enabled": false
                      }
                    } );

                    chart.addLegend(legend);

                    chart.validateNow(legend);


                };
                initChart();

            }
        }
        })

Answer 1

我们在页面上有更多数据的角度。与糟糕的设计og architechture。加载粗糙的时间过长但是表现很好。我们使用d3

Angular：通过指令加载大量数据导致浏览器问题

1 个答案: