我在Ionic2 / Angular2
打字稿项目中。我希望[1]使用传单,它工作得很好,我可以做所有的基本操作,如添加/编辑标记等等。
但是作为下一步,我需要从数据库动态加载我的标记并在地图上显示它们。作为数据库,我使用meteor
,因此我从服务器获取的数据位于Observable<marker[]>
。
在其他地图系统中,可以通过html-source-code动态添加标记,例如this(伪代码):
<map>
<marker *ngFor="let marker of markers | async">
</map>
据我所知,这对leaflet
是不可能的,所以我必须手动观察/订阅Observable。在Observable的每次更改中,我都会获得一个新的完整marker[]
,而不仅仅是一个新的单个标记。
所以我有不同的选择如何解决这个问题。
1)放弃所有标记并绘制所有新标记
我认为这是最基本也最简单的想法,但实际上我并不认为这是一个非常好的想法。看起来幕后很多无用的操作,不是吗?如果有50个标记我将删除它们49次并总共绘制 1275 标记(1 + 2 + 3 + ... + 50)
2)检查新数组和实际数组的差异 [2]
这是一个有点高级的基本想法...我将有一个实际显示的标记数组和一个新的可观察数组。我将检查存在于一个但不存在于另一个数组中的标记并添加新标记或删除已删除的标记。这将是对阵列的一些更多操作,但对于地图和UI要少得多。因此,对于50个标记,我只会绘制 50 ,只在必要时添加和删除。
如果你可以就此提出你的意见,或者我没有抓到任何东西并且有一个更好的解决方案,那就太好了。非常感谢您提前,我期待您的意见。
[1]对于我的项目,我需要一张支持离线使用的地图,因此我无法使用google-maps,afaik。因此OSM
因此leaflet
。如果你使用别的/更好的,请告诉我。