Xcode - Google街景api 3D全景

Question

我的目标是使用谷歌街景API向用户显示一个完整的全景可滚动街景图像。基本上，API为我提供了许多图像，我可以在其中改变方向，高度，缩放，位置等。我可以检索所有这些，并希望将它们缝合在一起并查看它。第一个问题是，你知道任何资源来演示这个完整的谷歌街景演示工作吗？用户可以到处滑动来移动街景，就像旧的iOS 5地图街景一样，我相信我们都会怀念……

如果没有，我基本上会下载数百张在垂直和水平方向上不同的照片。有没有一个库、API、资源或方法可以让我把所有这些照片拼接在一起，形成一个大的全景图，这样用户就可以在小iPhone屏幕上滑动查看大的全景图了？

感谢大家！

Answer 1

我拼凑了一个快速实现，为您演示了其中的许多内容。有一些优秀的开源库可以让业余版的StreetView变得非常简单。你可以在GitHub上查看我的演示：https://github.com/ocrickard/StreetViewDemo

您可以使用Google中的标题和间距参数来生成StreetView。这些瓷砖可以按照Bilal和Geraud.ch的建议排列在UIScrollView中。然而，我真的很喜欢JCTiledScrollView，因为它包含了一个非常好的注释系统，可以像谷歌一样在图像上添加图钉，而且它的数据源/代理结构使得一些非常简单的图像处理变得非常简单。

我的实现的重要部分如下：

- (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;
}

现在，为了获得谷歌拥有的360度无限滚动效果，你必须在观察UIScrollView的contentOffset的observeValueForKeyPath方法中做一些小把戏。我已经开始实现它了，但是还没有完成。其思想是，当用户到达视图的左侧或右侧时，scrollView的contentOffset属性被推送到scrollView的另一侧。如果您可以使内容正确对齐，并且contentSize设置得恰到好处，那么这应该是可行的。

最后，我应该指出的是，谷歌StreetView系统每秒只能有10张图片，所以你必须限制你的请求，否则设备的IP地址将被列入黑名单一段时间(我家的互联网现在在接下来的几个小时内无法接收StreetView请求，因为我一开始不明白这一点)。

Answer 2

您需要使用UIScrollView，将其clipSubviews属性设置为true，根据图像将所有图像添加到UIScrollView和UIScrollView的contentsOffset中。

Answer 3

您应该使用本文中描述的方法：http://mobiledevelopertips.com/user-interface/creating-circular-and-infinite-uiscrollviews.html

你将不得不做一些工厂来转换图像到合适的尺寸和你的视窗(iPhone/iPad)。然后添加一些按钮，您可以单击这些按钮转到下一个位置。

不幸的是，如果你想转到地球版本(而不是管状版本)，我认为你需要去全openGL来在这个3D表面上显示图像。