angularjs - Angular 谷歌地图动态折线有很多点

Question

我有一条折线，可以包含很多点，也可以根据用户行为进行更改，我目前正在使用 Angular Google maps 1.2.x及用人策略如下:

 myService.getPoints(id)
     .success(function(data){
          //in other controller have $scope.p = pService
          pService.Polyline = [];

          for(var i=0;i<data.length;i++){
              var p = {
                  latitde : data.Latitudefield,
                  longitude : data.Longitudefield
               }
               pService.Polyline.push(p);
          }
     })

这是可行的，但是当点数很多时(大约4000点或更多)，应用程序变得非常慢，可以使用什么策略来处理这个问题？

Answer 1

我就是这样做的，以获得更快的渲染速度。

   $scope.trackings = [{
        id: 1,
        geotracks: [{
            latitude: 23.0,
            longitude: 72.58
        }, {
            latitude: 23.1,
            longitude: 72.58
        }]
    }, {
        id: 2,
        geotracks: [{
            latitude: 24.0,
            longitude: 72.58
        }, {
            latitude: 23.1,
            longitude: 71.58
        }]
    }];

<div class="row" ng-if="map.show">
    <ui-gmap-google-map center="map.center" zoom="map.zoom">
        <ui-gmap-polylines models="trackings" path="'geotracks'" static="true"></ui-gmap-polylines>
    </ui-gmap-google-map>
</div>

这里的关键是 static="true"。我必须将其全部包装在 ng-if="map.show"中，当数据准备好时我将其设置为 true，因为 static 关键字使其成为静态的(而不是异步的)。希望这有帮助:)

引用号:http://angular-ui.github.io/angular-google-maps/#!/api/polylines

static: Boolean property which indicates that the Polyline coordinates are static.(I.e. will not change).

Declaring a static path will improve the performance of the directive as it does not need to monitor every coordinate in the path for changes during the Angular $digest cycle.

Notes:

Declaring a static path implies that it is not editable. As a result, the editable parameter will be ignored.

For static paths, the path attribute will watched by reference so the path may be changed in its entirety and the map will update.

Changes to the static declaration are ignored after the directive is instantiated. (NOT WATCHED)