腾讯地图手把手教你绘制行政区划边界

前言

腾讯地图iOS SDK推出了4.4.0版本,更新了多个比较实用的功能,本次介绍地图SDK行政区划检索功能新添加的行政区划轮廓点串,可以让我们在地图上绘制行政区划的边界。

使用场景

绘制行政区划的边界

准备

腾讯地图iOS SDK

单个行政区划绘制

1、使用QMSDistrictSearchSearchOption类来发起单个行政区划检索功能

QMSDistrictSearchSearchOption *option = [[QMSDistrictSearchSearchOption   alloc] init];

2、配置检索参数对象,并设置行政区划轮廓点串,发起检索:

option.keyword = @"110001";
// 需要注意,该属性只有在keyword为adcode时才会生效
option.get_polygon = QMSDistrictPolygonWithSeaArea;
[self.searcher searchWithDistrictSearchSearchOption:option];

3、在MapView的代理方法中获取检索结果,并绘制在地图中:

- (void)searchWithDistrictSearchOption:(QMSDistrictBaseSearchOption *)districtSearchOption didRecevieResult:(QMSDistrictSearchResult *)districtSearchResult {

    NSArray *districtArray = districtSearchResult.result.firstObject;
    QMSDistrictData *data = districtArray.firstObject;

    CLLocationCoordinate2D coords[data.polygon.count];

    for (int i = 0; i < data.polygon.count; i++) {
        NSValue *coordValue = data.polygon[i];
        coords[i] = [coordValue coordinateValue];
    }

    QPolygon *polygon = [[QPolygon alloc] initWithWithCoordinates:coords count:data.polygon.count];
    [self.mapView addOverlay:polygon];
}


- (QOverlayView *)mapView:(QMapView *)mapView viewForOverlay:(id<QOverlay>)overlay {
    if ([overlay isKindOfClass:[QPolygon class]]) {
        QPolygonView *polygon = [[QPolygonView alloc] initWithPolygon:overlay];
        polygon.strokeColor = [UIColor redColor];
        polygon.lineWidth = 2;
    
        return polygon;
    }

    return nil;
}

4、示例图

image.png

多个子行政区划绘制

1、使用QMSDistrictSearchSearchOption类来发起单个行政区划检索功能

QMSDistrictChildrenSearchOption *option2 = [[QMSDistrictChildrenSearchOption alloc] init];

2、配置检索参数对象,并设置行政区划轮廓点串,发起检索:

// 这里需要注意,子级行政区划检索需要根据父级的行政区划ID来检索
option2.ID = @"110000";
[option2 setGet_polygon:QMSDistrictPolygonWithSeaArea];
[self.searcher searchWithDistrictChildrenSearchOption:option2];

3、示例图

image.png

总结

行政区划检索可以配合定位功能来展示用户当前所在的区域,也可以用于做行政区划的展示功能。

作者:面糊

链接:https://www.jianshu.com/p/ae7351337371

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
将JavaScript API GL集成到Vue.js应用程序中的过程与将其集成到任何其他Web应用程序中的过程类似。以下是一些简单的步骤: 1. 在Vue.js应用程序中安装JavaScript API GL。可以使用npm或yarn进行安装。同时,需要通过script标签引入腾讯地图JavaScript API。 ``` <script src="//map.qq.com/api/js?v=2.exp&key=[您申请的key值]&libraries=convertor"></script> ``` 2. 创建一个Vue.js组件,将JavaScript API GL集成到该组件中。可以在Vue.js组件的生命周期钩子中初始化地图并添加绘图代码。 ``` <template> <div ref="mapContainer" class="map-container"></div> </template> <script> export default { data() { return { map: null, drawingManager: null } }, mounted() { this.initMap(); this.initDrawingManager(); }, methods: { initMap() { const map = new qq.maps.Map(this.$refs.mapContainer, { center: new qq.maps.LatLng(39.916527, 116.397128), zoom: 13 }); this.map = map; }, initDrawingManager() { const drawingManager = new qq.maps.drawing.DrawingManager({ drawingMode: qq.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: qq.maps.ControlPosition.TOP_CENTER, drawingModes: [ qq.maps.drawing.OverlayType.MARKER, qq.maps.drawing.OverlayType.CIRCLE, qq.maps.drawing.OverlayType.POLYGON, qq.maps.drawing.OverlayType.POLYLINE, qq.maps.drawing.OverlayType.RECTANGLE ] }, circleOptions: { fillColor: qq.maps.Color.fromHex('#000000', 0.5), strokeColor: qq.maps.Color.fromHex('#000000', 0.8), strokeWeight: 2 } }); drawingManager.setMap(this.map); this.drawingManager = drawingManager; } } } </script> ``` 在这个例子中,我们创建了一个简单的Vue.js组件,用于在Web应用程序中集成JavaScript API GL。组件中包含一个div元素,用作地图容器。在组件的mounted生命周期钩子中,我们初始化了地图并添加了绘图代码。我们还添加了一个方法`initDrawingManager()`用于初始化绘图工具。 3. 在Vue.js组件中设置JavaScript API GL的属性和事件处理程序。这些属性和事件处理程序可用于控制绘图和响应用户的交互行为。 在这个例子中,我们在`initDrawingManager()`方法中设置了绘图工具的属性和事件处理程序。 希望这可以帮助您开始在Vue.js应用程序中使用JavaScript API GL和腾讯地图

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值