浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

WebAPI文档全面上新

新增示例代码、在线运行等功能,帮助您实现快速接入,前往体验吧!

体验新版
更新时间:2020-06-23
瓦片图简介

iOS地图SDK支持自定义瓦片图层(TileOverlay), 该图层支持开发者添加自有瓦片数据。该图层可随地图的平移、缩放、旋转等操作做相应的变换,它仅位于底图之上(即瓦片图层将会遮挡底图,不遮挡其他图层),瓦片图层的添加顺序不会影响其他图层(例如:POI搜索图层、我的位置图层等)的叠加关系,适用于开发者拥有某一区域的地图,并希望使用此区域地图覆盖百度地图相应区域的情况。

自定义瓦片图使用场景

通过瓦片图层可对基础底层地图添加额外的特性,如:某个商场的室内信息、某个景区的详情等等。自定义图层类是BMKTileOverlay,它定义了能添加到基础底层地图的图片集合。

瓦片划分规则

添加瓦片图层的前提是使用球面墨卡托投影生成了相应的瓦片,并按照生成的格式部署在您的服务器上。

百度地图SDK根据不同的比例尺将地图划分成若干个瓦片,并且以中心点经纬度(0,0)开始计算瓦片,当地图显示缩放级别增大时,每一个瓦片被划分成4 个瓦片。

如: 地图级别为0时,只有1张瓦片;地图级别为1时,会分成4 张瓦片;地图级别为2时,会分成4的2次方 = 16 张瓦片。依次类推,地图级别为n时,总共划分的瓦片为:4的n次方。为了保证瓦片的显示效果,第n级的瓦片显示的地图level范围为[n - 0.5, n + 0.5)。

瓦片图加载

本地加载

将图片打包于应用内,适用于图片较小且不需要频繁变更,通过继承BMKSyncTileLayer实现。

1新建BMKLocalSyncTileLayer类
Objective-C
Swift
/**
 @brief 通过同步方法获取瓦片数据,是一个抽象类,需要通过继承该类,并重载 tileForX:y:zoom: 方法
 瓦片图片是jpeg或者png格式,size为256x256
 */
@interface BMKLocalSyncTileLayer: BMKSyncTileLayer
@end

#pragma mark - BMKLocalSyncTileLayer
@implementation BMKLocalSyncTileLayer
/**
 @brief 通过同步方法获取瓦片数据,子类必须实现该方法
        这个方法会在多个线程中调用,需要考虑线程安全
 @param (x, y, zoom)x,y表示瓦片的行列号,zoom为地图的缩放等级
 @return UIImage所对应瓦片的UIImage对象
*/
- (UIImage *)tileForX:(NSInteger)x y:(NSInteger)y zoom:(NSInteger)zoom {
    NSString *imageName = [NSString stringWithFormat:@"%ld_%ld_%ld.jpg", zoom, x, y];
    UIImage *image = [UIImage imageNamed:imageName];
    return image;
}
@end
import UIKit

class BMKLocalSyncTileLayer: BMKSyncTileLayer {
    /**
        通过同步方法获取瓦片数据
        
        @param x 瓦片图层x坐标
        @param y 瓦片图层y坐标
        @param zoom 瓦片图层的比例尺大小
        @return (x,y,zoom)对应瓦片的UIImage对象
        */
       override func tileFor(x: Int, y: Int, zoom: Int) -> UIImage! {
           let imageName: String = String(format: "%ld_%ld_%ld.jpg", arguments: [zoom, x, y])
           if let image: UIImage = UIImage(named: imageName) {
               return image
           } else {
               return nil
           }
       }
}
2创建BMKLocalSyncTileLayer对象
Objective-C
Swift
//初始化BMKLocalSyncTileLayer的实例
    BMKLocalSyncTileLayer *syncTile = [[BMKLocalSyncTileLayer alloc] init];
//初始化BMKLocalSyncTileLayer的实例
let syncTile: BMKLocalSyncTileLayer = BMKLocalSyncTileLayer()
3设置BMKLocalSyncTileLayer的可见最大/最小Zoom值
Objective-C
Swift
//syncTile的最大Zoom值,默认21,且不能小于minZoom
syncTile.maxZoom = 17;
//syncTile的最小Zoom值,默认3
syncTile.minZoom = 16;
//syncTile的最大Zoom值,默认21,且不能小于minZoom
syncTile.maxZoom = 17
//syncTile的最小Zoom值,默认3
syncTile.minZoom = 16
4将BMKLocalSyncTileLayer对象添加到BMKMapView中
Objective-C
Swift
/**
向地图View添加Overlay,需要实现BMKMapViewDelegate的-mapView:viewForOverlay:
方法来生成标注对应的View
@param overlay 要添加的overlay
 */
 [_mapView addOverlay:syncTile];
/**
向地图View添加Overlay,需要实现BMKMapViewDelegate的-mapView:viewForOverlay:
方法来生成标注对应的View
@param overlay 要添加的overlay
 */
mapView.add(syncTile)
5实现BMKMapViewDelegate回调,返回瓦片图层View
Objective-C
Swift
#pragma mark - BMKMapViewDelegate
/**
 根据overlay生成对应的BMKOverlayView

 @param mapView 地图View
 @param overlay 指定的overlay
 @return 生成的覆盖物View
 */
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay {
    if ([overlay isKindOfClass:[BMKTileLayer class]]) {
        BMKTileLayerView *view = [[BMKTileLayerView alloc] initWithTileLayer:overlay];
        return view;
    }
    return nil;
}
//MARK:BMKMapViewDelegate
func mapView(_ mapView: BMKMapView!, viewFor overlay: BMKOverlay!) -> BMKOverlayView! {
    if overlay .isKind(of: BMKTileLayer.self) {
        let view: BMKTileLayerView = BMKTileLayerView.init(tileLayer: overlay as? BMKTileLayer)
        return view
    }
    return nil
}
6运行程序

效果如下图:

tiledMap001.jpg

在线加载

使用在线下载,将图片存放于开发者提供的服务中,提供给SDK一个URL模板,适用于图片需要随时变更,下面举例说明添加在线瓦片图层的步骤:

1URL模版

URL模版(URLTemplate)是一个包含"{x}","{y}","{z}"的字符串,"{x}","{y}"表示tile的坐标,"{z}"表示当tile显示的级别。"{x}","{y}","{z}"会被tile的坐标值所替换,并生成用来加载tile图片数据的URL 。例如: http://server/path?x={x}&y={y}&z={z}。

2创建BMKURLTileLayer对象
Objective-C
Swift
/**
 @brief 通过提供url模板的方法,提供数据源。不应该继承该类,且必须通过initWithURLTemplate:
 方法来初始化,瓦片图片是jpeg或者png格式,size为256x256
 */
BMKURLTileLayer *urlTileLayer = [[BMKURLTileLayer alloc] initWithURLTemplate:@"http://api0.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20150601&customid=light"];
/**
 @brief 通过提供url模板的方法,提供数据源。不应该继承该类,且必须通过initWithURLTemplate:
 方法来初始化,瓦片图片是jpeg或者png格式,size为256x256
 */
let urlTile: BMKURLTileLayer = BMKURLTileLayer.init(urlTemplate: " http://online1.map.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20190528")
3设置BMKURLTileLayer的可见最大/最小Zoom值
Objective-C
Swift
urlTileLayer.maxZoom = 21;
urlTileLayer.minZoom = 17;
//urlTile的最大Zoom值,默认21,且不能小于minZoom
urlTile.maxZoom = 21
//urlTile的最小Zoom值,默认3
urlTile.minZoom = 17
4设置BMKURLTileLayer的可渲染区域
Objective-C
Swift
//urlTile的可渲染区域,默认世界范围
urlTileLayer.visibleMapRect = BMKMapRectMake(32994258, 35853667, 3122, 5541);
//urlTile的可渲染区域,默认世界范围
urlTile.visibleMapRect = BMKMapRectMake(32994258, 35853667, 3122, 5541)
5将BMKURLTileLayer对象添加到BMKMapView中
Objective-C
Swift
[_mapView addOverlay:urlTileLayer];
mapView.add(urlTile)
6实现BMKMapViewDelegate回调,返回瓦片图层View
Objective-C
Swift
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay {
    if ([overlay isKindOfClass:[BMKTileLayer class]]) {
        BMKTileLayerView *view = [[BMKTileLayerView alloc] initWithTileLayer:overlay];
        return view;
    }
    return nil;
}
/**
 根据overlay生成对应的BMKOverlayView
 
 @param mapView 地图View
 @param overlay 指定的overlay
 @return 生成的覆盖物View
 */
func mapView(_ mapView: BMKMapView!, viewFor overlay: BMKOverlay!) -> BMKOverlayView! {
    if overlay.isKind(of: BMKTileLayer.self) {
        let view: BMKTileLayerView = BMKTileLayerView.init(tileLayer: overlay as? BMKTileLayer)
        return view
    }
    return nil
}
7实现BMKMapViewDelegate回调,返回瓦片图层View

当前地图等级为17(_mapView.zoomLevel = 17;)效果如下图:

tiledMap002.jpg

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消