Question

您好，我正在使用angular7开发带有1600个标记的地图。但加载速度很慢。

在我的.ts文件中，我有一个函数可以从json文件中读取纬度和经度：

private _populate() {
        this.httpClient.get('assets/latlongs.json').subscribe((res: any[]) => {
            res.forEach(y => {
                this._markers.push(y);
            }); });
        console.log('Markers : ');
        console.log(this._markers);
    }

我在ngafterview中呼叫_populate()：

ngAfterViewInit() {
        this._populate();
    }

我的json文件格式（实际上我的json有1600个LatLongs）：

[
  {
    "latitude": 12.9407495,
    "longitude": 80.9471344
  },
  {
    "latitude": 12.9407495,
    "longitude": 80.9471344
  }
]

最后是我的html：

<div style="height: 422px">
         <x-map #xmap [Options]="_options" [Box]="_box">
                <x-cluster-layer [GridSize]="150" [ClusteringEnabled]="true" [UseDynamicSizeMarkers]="true" [DynamicMarkerBaseSize]="18" [DynamicMarkerRanges]="_ranges" >
                    <x-map-marker *ngFor="let m of _markers; let i=index" [Latitude]="m.latitude" [Longitude]="m.longitude" [Title]="'User ' + i.toString()" [IconInfo]="_iconInfo">
                        <x-info-box [DisableAutoPan]="true" [Title]="'User ' + i.toString() + ' Details'" [Description]="'Hi, We can Load <strong>This User Info Here</strong>.'">
                            <x-info-box-action [Label]="'Click Me'" (ActionClicked)="_click(i)"></x-info-box-action>
                        </x-info-box>
                    </x-map-marker>
                </x-cluster-layer>
            </x-map>
        </div>

我可以做什么来更快地加载？谢谢

Answer 1

对于您拥有的典型用例，我建议您不要一次对所有坐标运行* ngFor，而应该做一些事情，例如最初显示浏览器当前视口中的标记以及随着用户滚动您应该动态创建更多标记，以便一次显示所有1600个标记，这显然会减慢速度。这是典型的延迟加载用例。

如何使用很多标记来更快地制作角度图

1 个答案: