Weex开发之地图篇的具体使用(4)

- (instancetype)initWithRef:(NSString *)ref type:(NSString*)type styles:(nullable NSDictionary *)styles attributes:(nullable NSDictionary *)attributes events:(nullable NSArray *)events weexInstance:(WXSDKInstance *)weexInstance { self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]; if (self) { NSArray *centerArray = [attributes map_safeObjectForKey:@"center"]; if ([WXConvert isValidatedArray:centerArray]) { _center = centerArray; } _radius = [[attributes map_safeObjectForKey:@"radius"] doubleValue]; } return self; } - (void)updateAttributes:(NSDictionary *)attributes { NSArray *centerArray = [attributes map_safeObjectForKey:@"center"]; DMapViewComponent *parentComponent = (DMapViewComponent *)self.supercomponent; if ([WXConvert isValidatedArray:centerArray]) { _center = centerArray; [parentComponent removeOverlay:self]; [parentComponent addOverlay:self]; }else if ([[attributes map_safeObjectForKey:@"radius"] doubleValue] >= 0) { _radius = [[attributes map_safeObjectForKey:@"radius"] doubleValue]; [parentComponent removeOverlay:self]; [parentComponent addOverlay:self]; }else { [super updateAttributes:attributes]; } }

2.5 weex-amap-polygon

weex-amap-polygon主要用于绘制多边形，其效果如下图：

要自定义weex-amap-polygon，可以从以下步骤着手：

新建DMapPolygonComponent类继承WXComponent；

在DMapViewComponent中使用mapview的addOverlay方法添加DMapPolygonComponent组件；

在DMapViewComponent重写insertSubview方法来添加子组建多边形。

部分实现代码如下：

- (instancetype)initWithRef:(NSString *)ref type:(NSString*)type styles:(nullable NSDictionary *)styles attributes:(nullable NSDictionary *)attributes events:(nullable NSArray *)events weexInstance:(WXSDKInstance *)weexInstance { self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]; if (self) { _fillColor = [attributes map_safeObjectForKey:@"fillColor"]; _fillOpacity = [attributes map_safeObjectForKey:@"fillOpacity"]; } return self; } - (void)updateAttributes:(NSDictionary *)attributes { if ([attributes map_safeObjectForKey:@"fillColor"]) { _fillColor = [attributes map_safeObjectForKey:@"fillColor"]; }else if ([attributes map_safeObjectForKey:@"fillOpacity"]) { _fillOpacity = [attributes map_safeObjectForKey:@"fillOpacity"]; }else { [super updateAttributes:attributes]; } }

2.6 weex-amap-polyline

weex-amap-polyline组件主要用于在地图上实现划线操作，其最终效果如下图：

在iOS中，自定义直接需要从以下几步着手：

新建DMapPolylineComponent类继承WXComponent；

在DMapViewComponent中使用mapview的addOverlay方法添加DMapPolylineComponent组件；

在DMapViewComponent重写insertSubview方法来添加子组建折线。

@implementation DMapPolylineComponent - (instancetype)initWithRef:(NSString *)ref type:(NSString*)type styles:(nullable NSDictionary *)styles attributes:(nullable NSDictionary *)attributes events:(nullable NSArray *)events weexInstance:(WXSDKInstance *)weexInstance { self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]; if (self) { NSArray * pathArray = [attributes map_safeObjectForKey:@"path"]; if ([WXConvert isValidatedArray:pathArray]) { _path = pathArray; } _strokeColor = [attributes map_safeObjectForKey:@"strokeColor"]; _strokeWidth = [[attributes map_safeObjectForKey:@"strokeWidth"] doubleValue]; _strokeOpacity = [[attributes map_safeObjectForKey:@"strokeOpacity"] doubleValue]; _strokeStyle = [attributes map_safeObjectForKey:@"strokeStyle"]; } _viewLoaded = NO; return self; } - (void)updateAttributes:(NSDictionary *)attributes { NSArray * pathArray = [attributes map_safeObjectForKey:@"path"]; DMapViewComponent *parentComponent = (DMapViewComponent *)self.supercomponent; if (pathArray) { if ([WXConvert isValidatedArray:pathArray]) { _path = pathArray; } [parentComponent removeOverlay:self]; [parentComponent addOverlay:self]; return; }else if ([attributes map_safeObjectForKey:@"strokeColor"]) { _strokeColor = [attributes map_safeObjectForKey:@"strokeColor"]; }else if ([[attributes map_safeObjectForKey:@"strokeWidth"] doubleValue] >= 0) { _strokeWidth = [[attributes map_safeObjectForKey:@"strokeWidth"] doubleValue]; }else if ([[attributes map_safeObjectForKey:@"strokeOpacity"] doubleValue] >= 0) { _strokeOpacity = [[attributes map_safeObjectForKey:@"strokeOpacity"] doubleValue]; }else if ([attributes map_safeObjectForKey:@"strokeStyle"]) { _strokeStyle = [attributes map_safeObjectForKey:@"strokeStyle"]; } [parentComponent updateOverlayAttributes:self]; } @end

地图组件扩展

当然，我们也可以不使用weex-amap，而是直接使用高德地图进行扩展。

3.1 weex-amap

例如，我们自己扩展一个基于原生高德SDK生成的weex-amap组件。

要实现这么一个地图显示的功能，实现的步骤如下：

新建DMapViewComponent类继承WXVContainer实现LocationSource；

使用initComponentHostView(context)初始化；

在DMapViewComponent实现文件中实现初始化map对象initMap，设置map的key；

@WXComponentProp注解实现属性绑定；

通过fireEvent添加适当时机可以触发的事件；

设置mapview的setInfoWindowAdapter，addPolyline，addPolygon，addCircle，addMarker等方式来实现覆盖物，，线，圆等等。

实现代码可以参考下面的代码：