浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
(以“{{iossdk-sidebar}} <div class="bluetitle"><div class="services-title-text">瓦片图简介</div></div> iOS地图SDK支持自定义瓦片图层(TileOverlay), 该...”为内容创建页面)
 
 
(未显示1个用户的1个中间版本)
第2行: 第2行:
 
<div class="bluetitle"><div class="services-title-text">瓦片图简介</div></div>
 
<div class="bluetitle"><div class="services-title-text">瓦片图简介</div></div>
 
iOS地图SDK支持自定义瓦片图层(TileOverlay), 该图层支持开发者添加自有瓦片数据。该图层可随地图的平移、缩放、旋转等操作做相应的变换,它仅位于底图之上(即瓦片图层将会遮挡底图,不遮挡其他图层),瓦片图层的添加顺序不会影响其他图层(例如:POI搜索图层、我的位置图层等)的叠加关系,适用于开发者拥有某一区域的地图,并希望使用此区域地图覆盖百度地图相应区域的情况。
 
iOS地图SDK支持自定义瓦片图层(TileOverlay), 该图层支持开发者添加自有瓦片数据。该图层可随地图的平移、缩放、旋转等操作做相应的变换,它仅位于底图之上(即瓦片图层将会遮挡底图,不遮挡其他图层),瓦片图层的添加顺序不会影响其他图层(例如:POI搜索图层、我的位置图层等)的叠加关系,适用于开发者拥有某一区域的地图,并希望使用此区域地图覆盖百度地图相应区域的情况。
 
 
<div class="bluetitle"><div class="services-title-text">自定义瓦片图使用场景</div></div>
 
<div class="bluetitle"><div class="services-title-text">自定义瓦片图使用场景</div></div>
 
 
通过瓦片图层可对基础底层地图添加额外的特性,如:某个商场的室内信息、某个景区的详情等等。自定义图层类是BMKTileOverlay,它定义了能添加到基础底层地图的图片集合。
 
通过瓦片图层可对基础底层地图添加额外的特性,如:某个商场的室内信息、某个景区的详情等等。自定义图层类是BMKTileOverlay,它定义了能添加到基础底层地图的图片集合。
 
 
<div class="bluetitle"><div class="services-title-text">瓦片划分规则</div></div>
 
<div class="bluetitle"><div class="services-title-text">瓦片划分规则</div></div>
 
 
添加瓦片图层的前提是使用球面墨卡托投影生成了相应的瓦片,并按照生成的格式部署在您的服务器上。
 
添加瓦片图层的前提是使用球面墨卡托投影生成了相应的瓦片,并按照生成的格式部署在您的服务器上。
  
第14行: 第10行:
  
 
如: 地图级别为0时,只有1张瓦片;地图级别为1时,会分成4 张瓦片;地图级别为2时,会分成4的2次方 = 16 张瓦片。依次类推,地图级别为n时,总共划分的瓦片为:4的n次方。为了保证瓦片的显示效果,第n级的瓦片显示的地图level范围为[n - 0.5, n + 0.5)。
 
如: 地图级别为0时,只有1张瓦片;地图级别为1时,会分成4 张瓦片;地图级别为2时,会分成4的2次方 = 16 张瓦片。依次类推,地图级别为n时,总共划分的瓦片为:4的n次方。为了保证瓦片的显示效果,第n级的瓦片显示的地图level范围为[n - 0.5, n + 0.5)。
 
 
<div class="bluetitle"><div class="services-title-text">瓦片图加载</div></div>
 
<div class="bluetitle"><div class="services-title-text">瓦片图加载</div></div>
 
 
'''{{bluepoint}}本地加载'''
 
'''{{bluepoint}}本地加载'''
  
 
将图片打包于应用内,适用于图片较小且不需要频繁变更,通过继承BMKSyncTileLayer实现。
 
将图片打包于应用内,适用于图片较小且不需要频繁变更,通过继承BMKSyncTileLayer实现。
 
+
<div class="devguide"><div class="leftborderbg" style="height:820px"></div><div class="devguideorder"><span>1</span>新建BMKLocalSyncTileLayer类<br/></div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">/**
<div class="devguide"><div class="leftborderbg" style="height:820px"></div><div class="devguideorder"><span>1</span>新建BMKLocalSyncTileLayer类<br/></div><div class="devguidecenter"><pre class="prettyprint codestyle">/**
+
 
  @brief 通过同步方法获取瓦片数据,是一个抽象类,需要通过继承该类,并重载 tileForX:y:zoom: 方法
 
  @brief 通过同步方法获取瓦片数据,是一个抽象类,需要通过继承该类,并重载 tileForX:y:zoom: 方法
 
  瓦片图片是jpeg或者png格式,size为256x256
 
  瓦片图片是jpeg或者png格式,size为256x256
第41行: 第34行:
 
     return image;
 
     return image;
 
}
 
}
@end
+
@end</pre>
</pre>
+
<pre class="code_item prettyprint codestyle">import UIKit
</div><div class="devguideorder"><span>2</span>创建BMKLocalSyncTileLayer对象</div><div class="devguidecenter"><pre class="prettyprint codestyle">//初始化BMKLocalSyncTileLayer的实例
+
 
     BMKLocalSyncTileLayer *syncTile = [[BMKLocalSyncTileLayer alloc] init];
+
class BMKLocalSyncTileLayer: BMKSyncTileLayer {
</pre>
+
    /**
</div><div class="devguideorder"><span>3</span>设置BMKLocalSyncTileLayer的可见最大/最小Zoom值</div><div class="devguidecenter"><pre class="prettyprint codestyle">//syncTile的最大Zoom值,默认21,且不能小于minZoom
+
        通过同步方法获取瓦片数据
 +
       
 +
        @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
 +
          }
 +
      }
 +
}</pre>
 +
</div></div></div><div class="devguideorder"><span>2</span>创建BMKLocalSyncTileLayer对象</div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">//初始化BMKLocalSyncTileLayer的实例
 +
     BMKLocalSyncTileLayer *syncTile = [[BMKLocalSyncTileLayer alloc] init];</pre>
 +
<pre class="code_item prettyprint codestyle">//初始化BMKLocalSyncTileLayer的实例
 +
let syncTile: BMKLocalSyncTileLayer = BMKLocalSyncTileLayer()</pre>
 +
</div></div></div><div class="devguideorder"><span>3</span>设置BMKLocalSyncTileLayer的可见最大/最小Zoom值</div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">//syncTile的最大Zoom值,默认21,且不能小于minZoom
 
syncTile.maxZoom = 17;
 
syncTile.maxZoom = 17;
 
//syncTile的最小Zoom值,默认3
 
//syncTile的最小Zoom值,默认3
syncTile.minZoom = 16;
+
syncTile.minZoom = 16;</pre>
</pre>
+
<pre class="code_item prettyprint codestyle">//syncTile的最大Zoom值,默认21,且不能小于minZoom
</div><div class="devguideorder"><span>4</span>将BMKLocalSyncTileLayer对象添加到BMKMapView中</div><div class="devguidecenter"><pre class="prettyprint codestyle">/**
+
syncTile.maxZoom = 17
 +
//syncTile的最小Zoom值,默认3
 +
syncTile.minZoom = 16</pre>
 +
</div></div></div><div class="devguideorder"><span>4</span>将BMKLocalSyncTileLayer对象添加到BMKMapView中</div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">/**
 +
向地图View添加Overlay,需要实现BMKMapViewDelegate的-mapView:viewForOverlay:
 +
方法来生成标注对应的View
 +
@param overlay 要添加的overlay
 +
*/
 +
[_mapView addOverlay:syncTile];</pre>
 +
<pre class="code_item prettyprint codestyle">/**
 
向地图View添加Overlay,需要实现BMKMapViewDelegate的-mapView:viewForOverlay:
 
向地图View添加Overlay,需要实现BMKMapViewDelegate的-mapView:viewForOverlay:
 
方法来生成标注对应的View
 
方法来生成标注对应的View
 
@param overlay 要添加的overlay
 
@param overlay 要添加的overlay
 
  */
 
  */
[_mapView addOverlay:syncTile];
+
mapView.add(syncTile)</pre>
</pre>
+
</div></div></div><div class="devguideorder"><span>5</span>实现BMKMapViewDelegate回调,返回瓦片图层View</div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">#pragma mark - BMKMapViewDelegate
</div><div class="devguideorder"><span>5</span>实现BMKMapViewDelegate回调,返回瓦片图层View</div><div class="devguidecenter"><pre class="prettyprint codestyle">#pragma mark - BMKMapViewDelegate
+
 
/**
 
/**
 
  根据overlay生成对应的BMKOverlayView
 
  根据overlay生成对应的BMKOverlayView
第72行: 第93行:
 
     }
 
     }
 
     return nil;
 
     return nil;
}
+
}</pre>
</pre>
+
<pre class="code_item prettyprint codestyle">//MARK:BMKMapViewDelegate
</div><div class="devguideorder"><span>6</span>运行程序</div><div class="devguidecenter">
+
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
 +
}</pre>
 +
</div></div></div><div class="devguideorder"><span>6</span>运行程序</div><div class="devguidecenter">
 
效果如下图:
 
效果如下图:
  
 
http://mapopen-pub-iossdk.cdn.bcebos.com/newIos/tiledMap001.jpg
 
http://mapopen-pub-iossdk.cdn.bcebos.com/newIos/tiledMap001.jpg
 
 
</div></div>
 
</div></div>
 
 
'''{{bluepoint}}在线加载'''
 
'''{{bluepoint}}在线加载'''
  
 
使用在线下载,将图片存放于开发者提供的服务中,提供给SDK一个URL模板,适用于图片需要随时变更,下面举例说明添加在线瓦片图层的步骤:
 
使用在线下载,将图片存放于开发者提供的服务中,提供给SDK一个URL模板,适用于图片需要随时变更,下面举例说明添加在线瓦片图层的步骤:
 
 
<div class="devguide"><div class="leftborderbg" style="height:820px"></div><div class="devguideorder"><span>1</span>URL模版<br/></div><div class="devguidecenter">
 
<div class="devguide"><div class="leftborderbg" style="height:820px"></div><div class="devguideorder"><span>1</span>URL模版<br/></div><div class="devguidecenter">
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}。
+
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}。 http://server/path?x={x}&y={y}&z={z}。]
 
+
</div><div class="devguideorder"><span>2</span>创建BMKURLTileLayer对象</div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">/**
</div><div class="devguideorder"><span>2</span>创建BMKURLTileLayer对象</div><div class="devguidecenter"><pre class="prettyprint codestyle">/**
+
 
  @brief 通过提供url模板的方法,提供数据源。不应该继承该类,且必须通过initWithURLTemplate:
 
  @brief 通过提供url模板的方法,提供数据源。不应该继承该类,且必须通过initWithURLTemplate:
 
  方法来初始化,瓦片图片是jpeg或者png格式,size为256x256
 
  方法来初始化,瓦片图片是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"];
+
BMKURLTileLayer *urlTileLayer = [[BMKURLTileLayer alloc] initWithURLTemplate:@"http://api0.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20150601&customid=light"];</pre>
</pre>
+
<pre class="code_item prettyprint codestyle">/**
</div><div class="devguideorder"><span>3</span>设置BMKURLTileLayer的可见最大/最小Zoom值</div><div class="devguidecenter"><pre class="prettyprint codestyle">urlTileLayer.maxZoom = 21;
+
@brief 通过提供url模板的方法,提供数据源。不应该继承该类,且必须通过initWithURLTemplate:
urlTileLayer.minZoom = 17;
+
方法来初始化,瓦片图片是jpeg或者png格式,size为256x256
</pre>
+
*/
</div><div class="devguideorder"><span>4</span>设置BMKURLTileLayer的可渲染区域</div><div class="devguidecenter"><pre class="prettyprint codestyle">//urlTile的可渲染区域,默认世界范围
+
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")</pre>
urlTileLayer.visibleMapRect = BMKMapRectMake(32994258, 35853667, 3122, 5541);
+
</div></div></div><div class="devguideorder"><span>3</span>设置BMKURLTileLayer的可见最大/最小Zoom值</div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">urlTileLayer.maxZoom = 21;
</pre>
+
urlTileLayer.minZoom = 17;</pre>
</div><div class="devguideorder"><span>5</span>将BMKURLTileLayer对象添加到BMKMapView中</div><div class="devguidecenter"><pre class="prettyprint codestyle">[_mapView addOverlay:urlTileLayer];
+
<pre class="code_item prettyprint codestyle">//urlTile的最大Zoom值,默认21,且不能小于minZoom
</pre>
+
urlTile.maxZoom = 21
</div><div class="devguideorder"><span>6</span>实现BMKMapViewDelegate回调,返回瓦片图层View</div><div class="devguidecenter"><pre class="prettyprint codestyle">- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay {
+
//urlTile的最小Zoom值,默认3
 +
urlTile.minZoom = 17</pre>
 +
</div></div></div><div class="devguideorder"><span>4</span>设置BMKURLTileLayer的可渲染区域</div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">//urlTile的可渲染区域,默认世界范围
 +
urlTileLayer.visibleMapRect = BMKMapRectMake(32994258, 35853667, 3122, 5541);</pre>
 +
<pre class="code_item prettyprint codestyle">//urlTile的可渲染区域,默认世界范围
 +
urlTile.visibleMapRect = BMKMapRectMake(32994258, 35853667, 3122, 5541)</pre>
 +
</div></div></div><div class="devguideorder"><span>5</span>将BMKURLTileLayer对象添加到BMKMapView中</div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">[_mapView addOverlay:urlTileLayer];</pre>
 +
<pre class="code_item prettyprint codestyle">mapView.add(urlTile)</pre>
 +
</div></div></div><div class="devguideorder"><span>6</span>实现BMKMapViewDelegate回调,返回瓦片图层View</div><div class="devguidecenter"><div class="code_template"><div class="code_control"><div class="code_btn opt">Objective-C</div><div class="code_btn">Swift</div></div><div class="code_container"><pre class="code_item active prettyprint codestyle">- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay {
 
     if ([overlay isKindOfClass:[BMKTileLayer class]]) {
 
     if ([overlay isKindOfClass:[BMKTileLayer class]]) {
 
         BMKTileLayerView *view = [[BMKTileLayerView alloc] initWithTileLayer:overlay];
 
         BMKTileLayerView *view = [[BMKTileLayerView alloc] initWithTileLayer:overlay];
第108行: 第140行:
 
     }
 
     }
 
     return nil;
 
     return nil;
}
+
}</pre>
</pre>
+
<pre class="code_item prettyprint codestyle">/**
</div><div class="devguideorder"><span>7</span>实现BMKMapViewDelegate回调,返回瓦片图层View</div><div class="devguidecenter">
+
根据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
 +
}</pre>
 +
</div></div></div><div class="devguideorder"><span>7</span>实现BMKMapViewDelegate回调,返回瓦片图层View</div><div class="devguidecenter">
 
当前地图等级为17(_mapView.zoomLevel = 17;)效果如下图:
 
当前地图等级为17(_mapView.zoomLevel = 17;)效果如下图:
  
 
http://mapopen-pub-iossdk.cdn.bcebos.com/newIos/tiledMap002.jpg
 
http://mapopen-pub-iossdk.cdn.bcebos.com/newIos/tiledMap002.jpg
 
</div></div>
 
</div></div>

2020年3月26日 (四) 11:15的最后版本

瓦片图简介

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

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

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

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消