高效的自定义平铺地图,具有自定义缩放级别和缩放系数

Question

我必须在iOS5/6(iPhone)上实现一个非常自定义的平铺地图图层/视图,它将图块作为图像和/或数据(JSON)从服务器加载.它就像谷歌地图,但在某些非常具体的点,所以我不能轻易使用如下的解决方案:

1. 谷歌地图或
2. route-me(由MapBox使用)
3. CATiledLayer 与...结合 UIScrollView

问题是:由于我的特定规格,没有一个解决方案确实对我有所帮助.如果你认为,有一个合适的解决方案,请告诉我!

如果没有:
帮我找到最适合我案例的解决方案!

"但为什么我不能使用这些漂亮的解决方案？"
有一些限制,必须知道:

1. 我们只使用3个缩放级别(0,1和2)

2. 每个瓷砖在下一个缩放级别(=缩放因子3)中有9个子弹(不像大多数其他套件中的4个子弹 = zoomfactor 2)

3. 第一层的初始大小为(以像素为单位/点为一半)768*1024.
   第二层宽三倍(zoomfactor 3 !!!) - > 2304*3072
   第三层同样宽,高于第二层 - > 6912*9216

4. 来自服务器的每个磁贴都是256x256像素

5. 所以每个子层的数量是瓷砖数量的9倍(第一层为12,第二层为108,第三层为972)

6. 每个磁贴都有一个背景图像(大小约为6KB)(从服务器加载为图像)和前景信息(从服务器加载每个磁贴的JSON - 大小为10-15KB)
   - >前景信息JSON包含覆盖图像(例如谷歌中的流量)或要绘制到局部切片坐标空间的局部切片信息(如注释,但每个切片)

7. 我想将整个背景磁贴缓存在磁盘上,因为它们永远不会改变

8. 要么我想在一定时间内缓存每个图块的overlay-tile-images/overlay-tile-information,直到它应该再次重新加载

9. 缩放应该是捏合和双击

我的一些考虑因素:

1. 缓存不是问题.我通过CoreData或类似的方式做到这一点

2. 我想到了一个UIScrollView,以显示平滑的滚动

3. 我想使用捏,所以每次突破下一个缩放级别时,我都必须绘制下一个缩放级别的瓷砖

4. 内容应该只在可见区域绘制(对我来说,在iPhone 5 320x500上)

5. 应删除不可见的切片,以提高内存效率.但是,不应该立即删除它们,只有当一块瓷砖远离可见中心的一定像素/点时才会被删除.应该有一个"显示缓存",即时显示瓷砖,只是加载和显示.或者那里有更好的技术吗？

6. 我可以异步地从磁盘或服务器加载背景,因为我知道哪些图块是可见的.我也是使用tile-JSON.然后我提取瓷砖的JSON信息("覆盖直接图像或信息,如城市名称,我必须将其绘制到瓷砖中")并绘制或加载覆盖(从DB /光盘或服务器)

7. UIScrollView是否足够高效以处理平铺视图的最大大小

8. 我应该使用CALayer作为子图层来绘制吗？我应该使用Quartz直接在大画布上画画吗？

现在轮到你了 !!!

Answer 1

我想出了一个非常简洁的解决方案（自定义 TiledLayer 实现）：

我不再使用 CATiledLayer 作为滚动视图的内容视图。相反，我向其中添加了一个 CALayer 子类，并将我的图块作为子层添加到其中。每个图块都包含图块位图作为内容。当使用滚动视图放大时，我根据当前缩放级别手动切换图块。那很完美！！！

如果有人想了解实现的细节 -> 没问题，请写一条评论，我将其发布在这里。

编辑：

实施细节：

事实上，实现非常简单：

1. 将 UIScrollView 添加到您的视图/控制器视图
2. 将 UIView（从现在起称为tileView）作为 contentView 添加到 ScrollView - 大小与 ScrollView 大小相同（这是完全缩小模式 - 因子 1）
3. 激活缩放（我的最小缩放系数为 1，最大缩放系数为 9）
4. 现在，当您将图像放入 中时tileView，放大到级别 9 将给出非常不清晰的像素化图像 - 这就是我们想要的（我将解释原因）
5. 如果您喜欢放大时清晰的图像，您应该添加 CALayer 实例 ( tiles)addSublayer:到tileView
6. 假设您的 ZoomFactor 为 3（我的意思是第0 层中有 1 个图块 - ZoomFactor 1将由第 1 层中的3x3 = 9 个图块组成- ZoomFactor 3）
   1. 在第 0 层中，假设您放置了具有 243x243（3 倍可除以 3）像素的 3x4 块（作为 的子层tileView）。您将相同大小的平铺图像放置为CALayer contents。缩放到ZoomFactor 3会使它们变得模糊（就像旧的谷歌地图一样）
   2. 当您点击ZoomFactor 3时，从超级图层中删除所有 12 个图层，并将它们替换为小 3 倍的图层（81x81 像素）。您总共获得了 9 倍以上的层数。
   3. 现在您的图块层小了 3 倍，关键在于.contents的属性CALayer。即使图层是 81x81，内容（您的图像）仍然是全分辨率，这意味着如果您将 243x243 像素图像作为 81x81 像素 CALayer 平铺的内容，在ZoomFactor 3上 它看起来像 243x243 像素平铺！

您可以在任何更深的 ZoomFactor (3,9,12) 上使用它。磁贴变得越来越小，但是将原始图像设置为内容，磁贴将在它们所处的确切缩放因子下看起来清晰锐利。

如果您希望您的图块即使在 ZoomFactors 之间也看起来清晰，您必须将图像设置为 3 倍高.contents。然后，即使在您通过下一个缩放级别之前，您的图块也会清晰锐利。

您必须弄清楚的一件事是，在传递 ZoomLevel 因子时删除图层上的所有图块效率不高。您只需更新矩形中的可见图块即可。

不是所有解决方案中最好的，但它确实有效，如果有人做了一个设计良好的库，也许这有可能成为一个干净的解决方案。