我拼凑了一个快速实现来为您做很多这样的演示。有一些优秀的开源库可以让街景的业余版本变得非常简单。你可以在 GitHub 上查看我的演示：https://github.com/ocrickard/StreetViewDemo
您可以使用 Google StreetView API 中的航向和俯仰参数来生成图块。正如 Bilal 和 Geraud.ch 所建议的那样，这些图块可以排列在 UIScrollView 中。不过，我真的很喜欢 JCTiledScrollView，因为它包含一个非常好的注释系统，可以像 Google 一样在图像上添加图钉，而且它的数据源/委托结构可以进行一些非常直接的图像处理。
我的实现的主要部分如下：
- (UIImage *)tiledScrollView:(JCTiledScrollView *)scrollView imageForRow:(NSInteger)row column:(NSInteger)column scale:(NSInteger)scale
{
float fov = 45.f / scale;
float heading = fmodf(column*fov, 360.f);
float pitch = (scale - row)*fov;
if(lastRequestDate) {
while(fabsf([lastRequestDate timeIntervalSinceNow]) < 0.1f) {
//continue only if the time interval is greater than 0.1 seconds
}
}
lastRequestDate = [NSDate date];
int resolution = (scale > 1.f) ? 640 : 200;
NSString *path = [NSString stringWithFormat:@"http://maps.googleapis.com/maps/api/streetview?size=%dx%d&location=40.720032,-73.988354&fov=%f&heading=%f&pitch=%f&sensor=false", resolution, resolution, fov, heading, pitch];
NSError *error = nil;
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:path] options:0 error:&error];
if(error) {
NSLog(@"Error downloading image:%@", error);
}
UIImage *image = [UIImage imageWithData:data];
//Distort image using GPUImage
{
//This is where you should try to transform the image. I messed around
//with the math for awhile, and couldn't get it. Therefore, this is left
//as an exercise for the reader... :)
/*
GPUImagePicture *stillImageSource = [[GPUImagePicture alloc] initWithImage:image];
GPUImageTransformFilter *stillImageFilter = [[GPUImageTransformFilter alloc] init];
[stillImageFilter forceProcessingAtSize:image.size];
//This is actually based on some math, but doesn't work...
//float xOffset = 200.f;
//CATransform3D transform = [ViewController rectToQuad:CGRectMake(0, 0, image.size.width, image.size.height) quadTLX:-xOffset quadTLY:0 quadTRX:(image.size.width+xOffset) quadTRY:0.f quadBLX:0.f quadBLY:image.size.height quadBRX:image.size.width quadBRY:image.size.height];
//[(GPUImageTransformFilter *)stillImageFilter setTransform3D:transform];
//This is me playing guess and check...
CATransform3D transform = CATransform3DIdentity;
transform.m34 = fabsf(pitch) / 60.f * 0.3f;
transform = CATransform3DRotate(transform, pitch*M_PI/180.f, 1.f, 0.f, 0.f);
transform = CATransform3DScale(transform, 1.f/cosf(pitch*M_PI/180.f), sinf(pitch*M_PI/180.f) + 1.f, 1.f);
transform = CATransform3DTranslate(transform, 0.f, 0.1f * sinf(pitch*M_PI/180.f), 0.f);
[stillImageFilter setTransform3D:transform];
[stillImageSource addTarget:stillImageFilter];
[stillImageFilter prepareForImageCapture];
[stillImageSource processImage];
image = [stillImageFilter imageFromCurrentlyProcessedOutput];
*/
}
return image;
}
现在，为了获得 Google 的完整 360 度无限滚动效果，您必须在观察 UIScrollView 的 contentOffset 的 observeValueForKeyPath 方法中做一些诡计。我已经开始实施这个，但没有完成它。这个想法是，当用户到达视图的左侧或右侧时，滚动视图的contentOffset 属性被推送到滚动视图的另一侧。如果您可以使内容正确对齐，并且您将 contentSize 设置得恰到好处，那么这应该可以工作。
最后，我要注意的是，谷歌街景系统有每秒 10 张图片的限制，所以你必须限制你的请求，否则设备的 IP 地址将被列入黑名单一段时间（我的家庭互联网是现在在接下来的几个小时内从街景请求中消失了，因为我一开始不明白这一点）。