如何在 MKOverlayView 上显示图像？

Question

更新：

使用 MKOverlayView 投影在 MKMapView 上的图像使用 Mercator 投影，而我用作输入数据的图像使用 WGS84 投影。有没有办法将输入图像转换为正确的投影WGS84 ->墨卡托，无需平铺图像，可以即时完成吗？

通常，您可以使用程序 gdal2tiles 将图像转换为正确的投影。 然而，输入数据每十五分钟改变一次，因此图像必须每十五分钟转换一次。因此转换必须即时完成。我还希望由 Mapkit 完成平铺，而不是由我自己使用 gdal2tiles 或 GDAL 框架完成。

更新结束

我目前正在开发一个项目，该项目显示世界某些地区的降雨雷达。雷达图像由 EUMETSAT 提供，他们提供可以加载到 Google Earth 或 Google Maps 中的 KML 文件。如果我在 Google 地图中加载 KML 文件，它会完美显示，但如果我在 MKMapView 上使用 MKOverlayView 绘制图像，则图像会稍微有点问题。

例如，左侧显示 Google 地图，右侧则在 MKMapView 上显示相同的图像。

可以在 Google 地图，该图像使用的卫星是“Meteosat 0 Degree”卫星。

两个图像覆盖的表面大小相同，这是 KML 文件中的 LatLonBox，它指定地面叠加层边界框的顶部、底部、右侧和左侧的对齐位置。

  <LatLonBox id="GE_MET0D_VP-MPE-latlonbox">
        <north>57.4922</north>
        <south>-57.4922</south>
        <east>57.4922</east>
        <west>-57.4922</west>
        <rotation>0</rotation>
  </LatLonBox>

我使用这些参数创建一个名为 RadarOverlay 的新自定义 MKOverlay 对象，

[[RadarOverlay alloc] initWithImageData:[[self.currentRadarData objectAtIndex:0] valueForKey:@"Image"] withLowerLeftCoordinate:CLLocationCoordinate2DMake(-57.4922, -57.4922) withUpperRightCoordinate:CLLocationCoordinate2DMake(57.4922, 57.4922)];

自定义 MKOverlay 对象的实现； RadarOverlay

- (id) initWithImageData:(NSData*) imageData withLowerLeftCoordinate:(CLLocationCoordinate2D)lowerLeftCoordinate withUpperRightCoordinate:(CLLocationCoordinate2D)upperRightCoordinate
{
     self.radarData = imageData;

     MKMapPoint lowerLeft = MKMapPointForCoordinate(lowerLeftCoordinate);
     MKMapPoint upperRight = MKMapPointForCoordinate(upperRightCoordinate);

     mapRect = MKMapRectMake(lowerLeft.x, upperRight.y, upperRight.x - lowerLeft.x, lowerLeft.y - upperRight.y);

     return self;
}

- (CLLocationCoordinate2D)coordinate
{
     return MKCoordinateForMapPoint(MKMapPointMake(MKMapRectGetMidX(mapRect), MKMapRectGetMidY(mapRect)));
}

- (MKMapRect)boundingMapRect
{
     return mapRect;
}

自定义 MKOverlayView 的实现，RadarOverlayView

- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
{
    RadarOverlay* radarOverlay = (RadarOverlay*) self.overlay;

    UIImage *image          = [[UIImage alloc] initWithData:radarOverlay.radarData];

    CGImageRef imageReference = image.CGImage;

    MKMapRect theMapRect    = [self.overlay boundingMapRect];
   CGRect theRect           = [self rectForMapRect:theMapRect];
    CGRect clipRect     = [self rectForMapRect:mapRect];

    NSUserDefaults *preferences = [NSUserDefaults standardUserDefaults];
    CGContextSetAlpha(context, [preferences floatForKey:@"RadarTransparency"]);

    CGContextAddRect(context, clipRect);
    CGContextClip(context);

    CGContextDrawImage(context, theRect, imageReference);

    [image release]; 
}

当我下载图像时，我翻转图像，以便可以在 MKOverlayView 中轻松绘制图像。

size_t width    = (CGImageGetWidth(imageReference) / self.scaleFactor);
size_t height   = (CGImageGetHeight(imageReference) / self.scaleFactor);

// Calculate colorspace for the specified image
CGColorSpaceRef imageColorSpace = CGImageGetColorSpace(imageReference);

// Allocate and clear memory for the data of the image
unsigned char *imageData = (unsigned char*) malloc(height * width * 4);
memset(imageData, 0, height * width * 4);

// Define the rect for the image
CGRect imageRect;
if(image.imageOrientation==UIImageOrientationUp || image.imageOrientation==UIImageOrientationDown) 
    imageRect = CGRectMake(0, 0, width, height); 
else 
    imageRect = CGRectMake(0, 0, height, width); 

// Create the imagecontext by defining the colorspace and the address of the location to store the data
CGContextRef imageContext = CGBitmapContextCreate(imageData, width, height, 8, width * 4, imageColorSpace, kCGImageAlphaPremultipliedLast);

CGContextSaveGState(imageContext);

// Scale the image to the opposite orientation so it can be easylier drawn with CGContectDrawImage
CGContextTranslateCTM(imageContext, 0, height);
CGContextScaleCTM(imageContext, 1.0, -1.0);

if(image.imageOrientation==UIImageOrientationLeft) 
{
    CGContextRotateCTM(imageContext, M_PI / 2);
    CGContextTranslateCTM(imageContext, 0, -width);
}
else if(image.imageOrientation==UIImageOrientationRight) 
{
    CGContextRotateCTM(imageContext, - M_PI / 2);
    CGContextTranslateCTM(imageContext, -height, 0);
} 
else if(image.imageOrientation==UIImageOrientationDown) 
{
    CGContextTranslateCTM(imageContext, width, height);
    CGContextRotateCTM(imageContext, M_PI);
}

// Draw the image in the context
CGContextDrawImage(imageContext, imageRect, imageReference);
CGContextRestoreGState(imageContext);

翻转图像后，我对其进行操作，然后将其作为 NSData 对象存储在内存中。

图像看起来像是被拉伸了，但在图像的中心（位于赤道处）看起来还不错。

Answer 1

您是否已经看过 WWDC 2010 视频中的“第 127 节 - 使用叠加层自定义地图”？其中一个示例采用地震数据，给出 0.5 x 0.5 度区域的地震风险并绘制它们。您的雷达数据看起来相似，基于正方形。示例代码有一个名为 HazardMaps 的完整应用程序，它获取此数据并使用 MKMapPoints 创建覆盖图。如果您还没有看过这个视频，我认为它会给您提供很多有用的信息。他还谈到了转换为墨卡托投影。

另一件需要检查的事情是 EUMETSAT 数据所在的坐标系（基准面）。Google 地图使用名为 WGS 的系统-84，这是一个通用标准。但还有许多其他标准可以给出世界不同地区更准确的位置。如果您在 Google 地图中使用不同标准的纬度和经度，您的所有点都会有一定的偏差。偏移量并不一致，它会随着您在地图上移动而变化。 Google 地图可能会智能处理数据并即时转换为 WGS-84。

您可以通过查看 KML 来了解更多详细信息。我查看了但找不到带有矩形的最终 KML。也许它提供了有关元数据中使用的坐标系的信息。

Answer 2

我不确定这是否会影响缩放问题，但在您的 OverlayView 代码中，您为每个地图图块绘制整个图像。

您是否尝试过只绘制在mapRect中可见的图像部分？

当我在使用 MKOverlayViews 时遇到问题时，绘制覆盖层的矩形 (self.overlay.boundingRect) 和 mapRect （传递到 drawMapRect）对我很有帮助。不过，我不确定绘制 mapRect 对您的情况是否有帮助。

无论如何，这是我用来绘制矩形的函数，以防您想尝试一下

-(void)drawRect:(MKMapRect)rect inContext:(CGContextRef)context withLineWidth:(float)lineWidth andColor:(CGColorRef)color
{

    double maxx = MKMapRectGetMaxX(rect);
    double minx = MKMapRectGetMinX(rect);
    double maxy = MKMapRectGetMaxY(rect);
    double miny = MKMapRectGetMinY(rect);

    CGPoint tr = [self pointForMapPoint:(MKMapPoint) {maxx, maxy}];
    CGPoint br = [self pointForMapPoint:(MKMapPoint) {maxx, miny}];
    CGPoint bl = [self pointForMapPoint:(MKMapPoint) {minx, miny}];
    CGPoint tl = [self pointForMapPoint:(MKMapPoint) {minx, maxy}];

    CGMutablePathRef cgPath = CGPathCreateMutable();
    CGPathMoveToPoint(cgPath, NULL, tr.x, tr.y);
    CGPathAddLineToPoint(cgPath, NULL, br.x, br.y);
    CGPathAddLineToPoint(cgPath, NULL, bl.x, bl.y);
    CGPathAddLineToPoint(cgPath, NULL, tl.x, tl.y);
    CGPathAddLineToPoint(cgPath, NULL, tr.x, tr.y); 

    CGContextSaveGState(context);
    CGContextAddPath(context, cgPath);
    CGContextSetStrokeColorWithColor(context, color);
    CGContextSetLineJoin(context, kCGLineJoinRound);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, lineWidth);
    CGContextStrokePath(context);
    CGPathRelease(cgPath);  
    CGContextRestoreGState(context);
}

Answer 3

我的猜测是，谷歌地图正在非线性拉伸图像以补偿地图投影，而您的代码/苹果的代码则不然。

一种可能的解决方案是将覆盖图像细分为更小的矩形，并为每个矩形单独调用 MKMapPointForCooperative()。那么数据就会更接近正确。

Answer 4

WGS-84数据使用UTM投影，MKMapView使用墨卡托投影。您使用不同的方法将 3D 对象映射到 2D 表面，因此不会给出相同的结果。

您需要进入 GDAL 并将传入图像移动到不同的投影。如果你弄清楚了请告诉我，因为这并不容易

Answer 5

您的图像/叠加层很可能不再成比例（即它已被拉伸）。我在自己的应用程序中看到过这种情况，其中视图的中心是正确的，但是当您远离赤道向任一极（屏幕的顶部和底部）移动时，地图/叠加层变得越来越扭曲。

显然，您正在通过scaleFactor缩放图像。首先我会看一下。

size_t width    = (CGImageGetWidth(imageReference) / self.scaleFactor);
size_t height   = (CGImageGetHeight(imageReference) / self.scaleFactor);

测试代码以查看缩放是否是罪魁祸首的另一个好方法是将 MKMapView 缩小到覆盖图像的大小。不要管覆盖图像，如果它不再扭曲，那么您就知道问题所在了。

Answer 6

Apple 有一个来自 WWDC 的示例应用程序，可以解析 KML 并将其显示在地图上。如果您是付费开发者，您可以从 iTunes 中的 WWDC 视频页面访问它。我建议使用他们的解析器。