我在 Ionic2 / Angular2 typescript 项目中 . 我想[1]使用传单,它工作得很好,我可以做所有的基本操作,如添加/编辑标记等 .

但作为下一步,我需要从数据库动态加载我的标记并在 Map 上显示它们 . 作为数据库我正在使用 meteor ,所以我从服务器获取的数据是 Observable<marker[]> .

在其他 Map 系统中,可以通过html-source-code动态添加标记,例如this(伪代码):

<map>
   <marker *ngFor="let marker of markers | async">
</map>

据我所知, leaflet 是不可能的,所以我必须手动观察/订阅Observable . 在Observable的每次更改中,我都会获得一个新的完整 marker[] ,而不仅仅是一个新的单个标记 . 所以我有不同的选择如何解决这个问题 .

1) drop all markers and draw all new

实际上,我认为这是一个非常好的实际问题 . 看起来幕后很多无用的操作,不是吗?如果有50个标记我将删除它们49次并总共绘制 1275 标记(1 2 3 ... 50)

2) check new array and actual array for differences [2]

这是一个有点高级的基本想法...我将有一个实际显示的标记数组和一个新的可观察数组 . 我将检查存在于一个但不存在于另一个数组中的标记并添加新标记或删除已删除的标记 . 这将是对阵列的一些更多操作,但对于 Map 和UI要少得多 . 所以对于50个标记我只会绘制 50 并且只在必要时添加和删除 .

如果你能给我你的意见,或者我没有抓到任何东西,并且有更好的解决方案,那就太好了 . 非常感谢您提前,我期待您的意见 .


[1]对于我的项目,我需要一张支持离线使用的 Map ,所以我不能使用google-maps,afaik . 因此 OSM 因此 leaflet . 如果您使用其他/更好的东西,请告诉我 .

[2] https://stackoverflow.com/a/4026828/1904790